why my react app showing blank page after webpack-dev-server compilation?

Question

this is my webpack.conf.js

var path = require('path');
var config = {
  devServer: {
      contentBase: "./public",
      hot: true,
  },
  entry: path.resolve(__dirname, 'src') + '/index.js',
  output:{
    path: path.resolve(__dirname, 'public'),
    filename:'driven.js'
  },
  module:{
    loaders: [
      {
     test: /\.jsx?$/,
     loader: 'babel-loader',
     exclude: /node_modules/,
     query: {
       presets: ['react', 'es2015', 'stage-1']
     }
   },
   {
     test: /\.css$/,
     loaders: ['style', 'css']
   },
   {
     test: /\.png$/,
     loader: "url-loader?limit=100000"
   },
   {
     test: /\.jpg$/,
     loader: "file-loader"
   },
   {
     test: /\.(woff|woff2)(\?.*$|$)/,
     loader: 'url?limit=10000&mimetype=application/font-woff'
   },
   {
     test: /\.ttf(\?.*$|$)/,
     loader: 'url?limit=10000&mimetype=application/octet-stream'
   },
   {
     test: /\.eot(\?.*$|$)/,
     loader: 'file'
   },
   {
     test: /\.otf(\?.*$|$)/,
     loader: 'file'
   },
   {
     test: /\.svg(\?.*$|$)/,
     loader: 'url?limit=10000&mimetype=image/svg+xml'
   },
   {
     test: /\.gif$/i,
     loaders: [
       'file?hash=sha512&digest=hex&name=[hash].[ext]',
       'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
     ]
   },
   {
     test: /\.json?$/,
     loader: 'json'
   }
    ]

    }
  }

module.exports = config;

And this is my package.json

{
  "name": "react",
  "version": "1.0.0",
  "description": "Sample react application",
  "main": "./src/index.js",
  "dependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.4.1",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.3.13",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.1",
    "history": "^4.6.3",
    "jquery": "^3.2.1",
    "react-bootstrap": "^0.31.0",
    "react-fb-like": "^0.4.5",
    "react-router": "^3.0.5",
    "react-toasts": "^1.0.6",
    "react-scripts": "1.0.10",
    "redux": "^3.7.2",
    "file-loader": "^0.11.2",
    "image-webpack-loader": "^3.3.1",
    "css-loader": "^0.26.1",
    "html-webpack-plugin": "^2.28.0",
    "json-loader": "^0.5.4",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7"
  },
  "scripts": {
    "start": "webpack-dev-server --hot ",
    "react-start": "set PORT=3005 && node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom"
  },
  "keywords": [
    "React",
    "Sample",
    "For",
    "MyApp"
  ],
  "author": "Jasmel",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-stage-1": "^6.24.1",
    "html-webpack-plugin": "^2.29.0"
  }
}

And this is my folder structure

Please help me to know whats going on here.I ran npm start..then it shows the result webpack compiled successfully like this,

D:\jasmel\react\webpacktest>npm start

> react@1.0.0 start D:\jasmel\react\webpacktest
> webpack-dev-server --hot

 http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from ./public
Hash: c189d361086fdc8489c3
Version: webpack 1.15.0
Time: 4092ms
    Asset    Size  Chunks             Chunk Names
driven.js  808 kB       0  [emitted]  main
chunk    {0} driven.js (main) 748 kB [rendered]
    [0] ./src/index.js 677 bytes {0} [built]
    [1] ./~/react/react.js 56 bytes {0} [built]
    [2] ./~/react/lib/React.js 5.08 kB {0} [built]
    [3] ./~/process/browser.js 5.42 kB {0} [built]
    [4] ./~/object-assign/index.js 2.11 kB {0} [built]
    [5] ./~/react/lib/ReactBaseClasses.js 5.44 kB {0} [built]
    [6] ./~/react/lib/reactProdInvariant.js 1.24 kB {0} [built]
    [7] ./~/react/lib/ReactNoopUpdateQueue.js 3.36 kB {0} [built]
    [8] ./~/fbjs/lib/warning.js 2.1 kB {0} [built]
    [9] ./~/fbjs/lib/emptyFunction.js 1.08 kB {0} [built]
   [10] ./~/react/lib/canDefineProperty.js 661 bytes {0} [built]
   [11] ./~/fbjs/lib/emptyObject.js 458 bytes {0} [built]
   [12] ./~/fbjs/lib/invariant.js 1.63 kB {0} [built]
   [13] ./~/react/lib/lowPriorityWarning.js 2.16 kB {0} [built]
   [14] ./~/react/lib/ReactChildren.js 6.19 kB {0} [built]
   [15] ./~/react/lib/PooledClass.js 3.36 kB {0} [built]
   [16] ./~/react/lib/ReactElement.js 11.2 kB {0} [built]
   [17] ./~/react/lib/ReactCurrentOwner.js 621 bytes {0} [built]
   [18] ./~/react/lib/ReactElementSymbol.js 622 bytes {0} [built]
   [19] ./~/react/lib/traverseAllChildren.js 7.03 kB {0} [built]
   [20] ./~/react/lib/getIteratorFn.js 1.12 kB {0} [built]
   [21] ./~/react/lib/KeyEscapeUtils.js 1.29 kB {0} [built]
   [22] ./~/react/lib/ReactDOMFactories.js 5.48 kB {0} [built]
   [23] ./~/react/lib/ReactElementValidator.js 9.2 kB {0} [built]
   [24] ./~/react/lib/ReactComponentTreeHook.js 11.8 kB {0} [built]
   [25] ./~/react/lib/checkReactTypeSpec.js 4.19 kB {0} [built]
   [26] ./~/react/lib/ReactPropTypeLocationNames.js 572 bytes {0} [built]
   [27] ./~/react/lib/ReactPropTypesSecret.js 442 bytes {0} [built]
   [28] ./~/react/lib/ReactPropTypes.js 500 bytes {0} [built]
   [29] ./~/prop-types/factory.js 890 bytes {0} [built]
   [30] ./~/prop-types/factoryWithTypeCheckers.js 18.6 kB {0} [built]
   [31] ./~/prop-types/lib/ReactPropTypesSecret.js 436 bytes {0} [built]
   [32] ./~/prop-types/checkPropTypes.js 2.94 kB {0} [built]
   [33] ./~/react/lib/ReactVersion.js 350 bytes {0} [built]
   [34] ./~/react/lib/createClass.js 688 bytes {0} [built]
   [35] ./~/create-react-class/factory.js 28.4 kB {0} [built]
   [36] ./~/react/lib/onlyChild.js 1.34 kB {0} [built]
   [37] ./~/react-dom/index.js 59 bytes {0} [built]
   [38] ./~/react-dom/lib/ReactDOM.js 5.17 kB {0} [built]
   [39] ./~/react-dom/lib/ReactDOMComponentTree.js 6.27 kB {0} [built]
   [40] ./~/react-dom/lib/reactProdInvariant.js 1.24 kB {0} [built]
   [41] ./~/react-dom/lib/DOMProperty.js 8.24 kB {0} [built]
   [42] ./~/react-dom/lib/ReactDOMComponentFlags.js 429 bytes {0} [built]
   [43] ./~/react-dom/lib/ReactDefaultInjection.js 3.5 kB {0} [built]
   [44] ./~/react-dom/lib/ARIADOMPropertyConfig.js 1.82 kB {0} [built]
   [45] ./~/react-dom/lib/BeforeInputEventPlugin.js 13.3 kB {0} [built]
   [46] ./~/react-dom/lib/EventPropagators.js 5.09 kB {0} [built]
   [47] ./~/react-dom/lib/EventPluginHub.js 9.11 kB {0} [built]
   [48] ./~/react-dom/lib/EventPluginRegistry.js 9.75 kB {0} [built]
   [49] ./~/react-dom/lib/EventPluginUtils.js 7.95 kB {0} [built]
   [50] ./~/react-dom/lib/ReactErrorUtils.js 2.19 kB {0} [built]
   [51] ./~/react-dom/lib/accumulateInto.js 1.69 kB {0} [built]
   [52] ./~/react-dom/lib/forEachAccumulated.js 855 bytes {0} [built]
   [53] ./~/fbjs/lib/ExecutionEnvironment.js 1.06 kB {0} [built]
   [54] ./~/react-dom/lib/FallbackCompositionState.js 2.43 kB {0} [built]
   [55] ./~/react-dom/lib/PooledClass.js 3.36 kB {0} [built]
   [56] ./~/react-dom/lib/getTextContentAccessor.js 955 bytes {0} [built]
   [57] ./~/react-dom/lib/SyntheticCompositionEvent.js 1.1 kB {0} [built]
   [58] ./~/react-dom/lib/SyntheticEvent.js 9.18 kB {0} [built]
   [59] ./~/react-dom/lib/SyntheticInputEvent.js 1.09 kB {0} [built]
   [60] ./~/react-dom/lib/ChangeEventPlugin.js 10.8 kB {0} [built]
   [61] ./~/react-dom/lib/ReactUpdates.js 9.53 kB {0} [built]
   [62] ./~/react-dom/lib/CallbackQueue.js 3.16 kB {0} [built]
   [63] ./~/react-dom/lib/ReactFeatureFlags.js 628 bytes {0} [built]
   [64] ./~/react-dom/lib/ReactReconciler.js 6.21 kB {0} [built]
   [65] ./~/react-dom/lib/ReactRef.js 2.56 kB {0} [built]
   [66] ./~/react-dom/lib/ReactOwner.js 3.53 kB {0} [built]
   [67] ./~/react-dom/lib/ReactInstrumentation.js 601 bytes {0} [built]
   [68] ./~/react-dom/lib/ReactDebugTool.js 11.7 kB {0} [built]
   [69] ./~/react-dom/lib/ReactInvalidSetStateWarningHook.js 984 bytes {0} [built]
   [70] ./~/react-dom/lib/ReactHostOperationHistoryHook.js 736 bytes {0} [built]
   [71] ./~/fbjs/lib/performanceNow.js 845 bytes {0} [built]
   [72] ./~/fbjs/lib/performance.js 588 bytes {0} [built]
   [73] ./~/react-dom/lib/Transaction.js 9.55 kB {0} [built]
   [74] ./~/react-dom/lib/inputValueTracking.js 3.1 kB {0} [built]
   [75] ./~/react-dom/lib/getEventTarget.js 1.01 kB {0} [built]
   [76] ./~/react-dom/lib/isEventSupported.js 1.94 kB {0} [built]
   [77] ./~/react-dom/lib/isTextInputElement.js 1.02 kB {0} [built]
   [78] ./~/react-dom/lib/DefaultEventPluginOrder.js 1.08 kB {0} [built]
   [79] ./~/react-dom/lib/EnterLeaveEventPlugin.js 3.15 kB {0} [built]
   [80] ./~/react-dom/lib/SyntheticMouseEvent.js 2.14 kB {0} [built]
   [81] ./~/react-dom/lib/SyntheticUIEvent.js 1.57 kB {0} [built]
   [82] ./~/react-dom/lib/ViewportMetrics.js 604 bytes {0} [built]
   [83] ./~/react-dom/lib/getEventModifierState.js 1.23 kB {0} [built]
   [84] ./~/react-dom/lib/HTMLDOMPropertyConfig.js 6.57 kB {0} [built]
   [85] ./~/react-dom/lib/ReactComponentBrowserEnvironment.js 904 bytes {0} [built]
   [86] ./~/react-dom/lib/DOMChildrenOperations.js 7.72 kB {0} [built]
   [87] ./~/react-dom/lib/DOMLazyTree.js 3.71 kB {0} [built]
   [88] ./~/react-dom/lib/DOMNamespaces.js 505 bytes {0} [built]
   [89] ./~/react-dom/lib/setInnerHTML.js 3.86 kB {0} [built]
   [90] ./~/react-dom/lib/createMicrosoftUnsafeLocalFunction.js 810 bytes {0} [built]
   [91] ./~/react-dom/lib/setTextContent.js 1.45 kB {0} [built]
   [92] ./~/react-dom/lib/escapeTextContentForBrowser.js 3.43 kB {0} [built]
   [93] ./~/react-dom/lib/Danger.js 2.24 kB {0} [built]
   [94] ./~/fbjs/lib/createNodesFromMarkup.js 2.66 kB {0} [built]
   [95] ./~/fbjs/lib/createArrayFromMixed.js 4.11 kB {0} [built]
   [96] ./~/fbjs/lib/getMarkupWrap.js 3.04 kB {0} [built]
   [97] ./~/react-dom/lib/ReactDOMIDOperations.js 955 bytes {0} [built]
   [98] ./~/react-dom/lib/ReactDOMComponent.js 38.9 kB {0} [built]
   [99] ./~/react-dom/lib/AutoFocusUtils.js 599 bytes {0} [built]
  [100] ./~/fbjs/lib/focusNode.js 704 bytes {0} [built]
  [101] ./~/react-dom/lib/CSSPropertyOperations.js 7.2 kB {0} [built]
  [102] ./~/react-dom/lib/CSSProperty.js 3.8 kB {0} [built]
  [103] ./~/fbjs/lib/camelizeStyleName.js 1 kB {0} [built]
  [104] ./~/fbjs/lib/camelize.js 708 bytes {0} [built]
  [105] ./~/react-dom/lib/dangerousStyleValue.js 3.06 kB {0} [built]
  [106] ./~/fbjs/lib/hyphenateStyleName.js 974 bytes {0} [built]
  [107] ./~/fbjs/lib/hyphenate.js 800 bytes {0} [built]
  [108] ./~/fbjs/lib/memoizeStringOnly.js 698 bytes {0} [built]
  [109] ./~/react-dom/lib/DOMPropertyOperations.js 7.61 kB {0} [built]
  [110] ./~/react-dom/lib/quoteAttributeValueForBrowser.js 700 bytes {0} [built]
  [111] ./~/react-dom/lib/ReactBrowserEventEmitter.js 12.6 kB {0} [built]
  [112] ./~/react-dom/lib/ReactEventEmitterMixin.js 958 bytes {0} [built]
  [113] ./~/react-dom/lib/getVendorPrefixedEventName.js 2.87 kB {0} [built]
  [114] ./~/react-dom/lib/ReactDOMInput.js 13.1 kB {0} [built]
  [115] ./~/react-dom/lib/LinkedValueUtils.js 5.24 kB {0} [built]
  [116] ./~/react-dom/lib/ReactPropTypesSecret.js 442 bytes {0} [built]
  [117] ./~/react-dom/lib/ReactDOMOption.js 3.69 kB {0} [built]
  [118] ./~/react-dom/lib/ReactDOMSelect.js 6.81 kB {0} [built]
  [119] ./~/react-dom/lib/ReactDOMTextarea.js 6.46 kB {0} [built]
  [120] ./~/react-dom/lib/ReactMultiChild.js 14.6 kB {0} [built]
  [121] ./~/react-dom/lib/ReactComponentEnvironment.js 1.3 kB {0} [built]
  [122] ./~/react-dom/lib/ReactInstanceMap.js 1.22 kB {0} [built]
  [123] ./~/react-dom/lib/ReactChildReconciler.js 6.11 kB {0} [built]
  [124] ./~/react-dom/lib/instantiateReactComponent.js 5.06 kB {0} [built]
  [125] ./~/react-dom/lib/ReactCompositeComponent.js 35.2 kB {0} [built]
  [126] ./~/react-dom/lib/ReactNodeTypes.js 1.02 kB {0} [built]
  [127] ./~/react-dom/lib/checkReactTypeSpec.js 4.21 kB {0} [built]
  [128] ./~/react-dom/lib/ReactPropTypeLocationNames.js 572 bytes {0} [built]
  [129] ./~/fbjs/lib/shallowEqual.js 1.74 kB {0} [built]
  [130] ./~/react-dom/lib/shouldUpdateReactComponent.js 1.4 kB {0} [built]
  [131] ./~/react-dom/lib/ReactEmptyComponent.js 704 bytes {0} [built]
  [132] ./~/react-dom/lib/ReactHostComponent.js 1.98 kB {0} [built]
  [133] ./~/react/lib/getNextDebugID.js 437 bytes {0} [built]
  [134] ./~/react-dom/lib/KeyEscapeUtils.js 1.29 kB {0} [built]
  [135] ./~/react-dom/lib/traverseAllChildren.js 7.04 kB {0} [built]
  [136] ./~/react-dom/lib/ReactElementSymbol.js 622 bytes {0} [built]
  [137] ./~/react-dom/lib/getIteratorFn.js 1.12 kB {0} [built]
  [138] ./~/react-dom/lib/flattenChildren.js 2.77 kB {0} [built]
  [139] ./~/react-dom/lib/ReactServerRenderingTransaction.js 2.29 kB {0} [built]
  [140] ./~/react-dom/lib/ReactServerUpdateQueue.js 4.83 kB {0} [built]
  [141] ./~/react-dom/lib/ReactUpdateQueue.js 9.35 kB {0} [built]
  [142] ./~/react-dom/lib/validateDOMNesting.js 13.7 kB {0} [built]
  [143] ./~/react-dom/lib/ReactDOMEmptyComponent.js 1.9 kB {0} [built]
  [144] ./~/react-dom/lib/ReactDOMTreeTraversal.js 3.72 kB {0} [built]
  [145] ./~/react-dom/lib/ReactDOMTextComponent.js 5.81 kB {0} [built]
  [146] ./~/react-dom/lib/ReactDefaultBatchingStrategy.js 1.88 kB {0} [built]
  [147] ./~/react-dom/lib/ReactEventListener.js 5.3 kB {0} [built]
  [148] ./~/fbjs/lib/EventListener.js 2.67 kB {0} [built]
  [149] ./~/fbjs/lib/getUnboundedScrollPosition.js 1.12 kB {0} [built]
  [150] ./~/react-dom/lib/ReactInjection.js 1.2 kB {0} [built]
  [151] ./~/react-dom/lib/ReactReconcileTransaction.js 5.26 kB {0} [built]
  [152] ./~/react-dom/lib/ReactInputSelection.js 4.27 kB {0} [built]
  [153] ./~/react-dom/lib/ReactDOMSelection.js 6.78 kB {0} [built]
  [154] ./~/react-dom/lib/getNodeForCharacterOffset.js 1.62 kB {0} [built]
  [155] ./~/fbjs/lib/containsNode.js 1.05 kB {0} [built]
  [156] ./~/fbjs/lib/isTextNode.js 605 bytes {0} [built]
  [157] ./~/fbjs/lib/isNode.js 828 bytes {0} [built]
  [158] ./~/fbjs/lib/getActiveElement.js 1.04 kB {0} [built]
  [159] ./~/react-dom/lib/SVGDOMPropertyConfig.js 7.32 kB {0} [built]
  [160] ./~/react-dom/lib/SelectEventPlugin.js 6.06 kB {0} [built]
  [161] ./~/react-dom/lib/SimpleEventPlugin.js 7.97 kB {0} [built]
  [162] ./~/react-dom/lib/SyntheticAnimationEvent.js 1.21 kB {0} [built]
  [163] ./~/react-dom/lib/SyntheticClipboardEvent.js 1.17 kB {0} [built]
  [164] ./~/react-dom/lib/SyntheticFocusEvent.js 1.07 kB {0} [built]
  [165] ./~/react-dom/lib/SyntheticKeyboardEvent.js 2.71 kB {0} [built]
  [166] ./~/react-dom/lib/getEventCharCode.js 1.5 kB {0} [built]
  [167] ./~/react-dom/lib/getEventKey.js 2.87 kB {0} [built]
  [168] ./~/react-dom/lib/SyntheticDragEvent.js 1.07 kB {0} [built]
  [169] ./~/react-dom/lib/SyntheticTouchEvent.js 1.28 kB {0} [built]
  [170] ./~/react-dom/lib/SyntheticTransitionEvent.js 1.23 kB {0} [built]
  [171] ./~/react-dom/lib/SyntheticWheelEvent.js 1.92 kB {0} [built]
  [172] ./~/react-dom/lib/ReactMount.js 25.5 kB {0} [built]
  [173] ./~/react-dom/lib/ReactDOMContainerInfo.js 967 bytes {0} [built]
  [174] ./~/react-dom/lib/ReactDOMFeatureFlags.js 439 bytes {0} [built]
  [175] ./~/react-dom/lib/ReactMarkupChecksum.js 1.47 kB {0} [built]
  [176] ./~/react-dom/lib/adler32.js 1.19 kB {0} [built]
  [177] ./~/react-dom/lib/ReactVersion.js 350 bytes {0} [built]
  [178] ./~/react-dom/lib/findDOMNode.js 2.46 kB {0} [built]
  [179] ./~/react-dom/lib/getHostComponentFromComposite.js 740 bytes {0} [built]
  [180] ./~/react-dom/lib/renderSubtreeIntoContainer.js 422 bytes {0} [built]
  [181] ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js 4.32 kB {0} [built]
  [182] ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js 1.37 kB {0} [built]
  [183] ./~/react-dom/lib/ReactDOMInvalidARIAHook.js 3.14 kB {0} [built]
  [184] ./src/index.css 899 bytes {0} [built]
  [185] ./~/css-loader!./src/index.css 222 bytes {0} [built]
  [186] ./~/css-loader/lib/css-base.js 1.46 kB {0} [built]
  [187] ./~/style-loader/addStyles.js 6.91 kB {0} [built]
  [188] ./src/App.js 2.92 kB {0} [built]
  [189] ./src/logo.svg 3.61 kB {0} [built]
  [190] ./src/App.css 893 bytes {0} [built]
  [191] ./~/css-loader!./src/App.css 519 bytes {0} [built]
  [192] ./src/registerServiceWorker.js 4.03 kB {0} [built]
webpack: Compiled successfully.

this showing a blank page when i start browser localhost:8080 .No error in console. when i added some text in index.html after root Div ,it showing in browser. Why my js is not rendering inside the root div? any help would be appreciated.Iam new in react and webpack.Thanks in advance.

Answer 1

Reading out the way you have configured webpack: I see that the output is called driven.js and your serving static assets via /public.

Try hitting either the url driven.js or public/driven.js. And see if your able to access your bundle.

Once you have identified your bundle location, make sure you have included a script tag in your index.html which includes this file.