Unable to load ReactJS resource into browser using Babel and Webpack

I'm trying to learn ReactJS by running a basic program.

webpack.config.js

var config = {
    entry: './main.js',

    output: {
        path: './',
        filename: 'index.js'
    }, 

    devServer: {
        inline: true,
        port: 8080
    }, 

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',

                query: {
                    presets: ['es2015', 'react']
                }
            }
            ]
    }
}

module.experts = config;

package.json

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

App.jsx

import React from 'react';

class App extends React.Component   {
    render()    {
    return  (
    <div>
        "Hello, world."
    </div>
    );
    }
}

export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

index.html

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset="utf-8">
    <title>React App</title>
</head>
<body>
    <div id = "app"></div>
    <script type="text/javascript" src = "index.js"></script>
</body>
</html>

On starting the server, I see an empty page with no contents. The HTML page is there but the part which is to be added to the DOM by React can't be seen.

index.js is set as the file which will contain our bundled app but the browser's console shows 'Faile to load resource index.js(404)' error. If I change the src attribute of script tag in HTML to main.js, I get a SyntaxError with the import statement.

I suspect the problem is with not correctly linking Babel or some other dependency with my package.

Inside webpack.config.js there is typo, must be exports instead of experts

module.exports = config;
          ^

in this case you don't export config from webpack.config.js, and webpack doesn't know about your custom configuration and uses default config.

Related Articles