CODEWITHSUNDEEP
javascriptlinuxreactjswebpack
Kirill Stas
Kirill Stas

Reputation: 1447

Webpack for React doesn`t work

I am just start React and have finished codecademy courses and several other on youtube. I decide to configure my local machine for react. I ve started with webpack & webpack-dev-server. And here I get mistake. Here is mistake screenshot

Also Here is my files tree

Here is my webpack.config.js:

var webpack = require('webpack');
var path = require('path');

module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:8080/',
        'webpack/hot/only-dev-server',
        './src'
    ],
    output: {
           path: path.join(__dirname, 'public'),
           filename: "bundle.js"
    },
    resolve: {
        modulesDirectories: ['node_modules', 'src'],
        extensions: ['', '.js']
    },
    module: {
        loader: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']
        }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

My index.html:

<!DOCTYPE html>
<html>
<head>
    <title>React ToDos App</title>
</head>
<body>
    <div id="app" />
    <script src="bundle.js"></script>
</body>
</html>

And index.js:

let message = 'Hello from entry message';

console.log(message);

Thanks for any help.

Upvotes: 0

Views: 639

Answers (2)

Alexandr Subbotin
Alexandr Subbotin

Reputation: 1734

I see two issues in your code:

  1. The name of js bundle should be the same in html and in webpack – you use ready.js in webpack config and bundle.js in your html.
  2. On your screenshot you have a typo and name of webpack config is webpack.congig.js, but it should be webpack.config.js (that is used by default by webpack-dev-server)

Upvotes: 1

Pranesh Ravi
Pranesh Ravi

Reputation: 19133

In your webpack config you're setting the output filename as ready.js and in your HTML your are looking for bundle.js. This is the reason for the error. Give a same name in both the places.

 <!DOCTYPE html>
<html>
<head>
    <title>React ToDos App</title>
</head>
<body>
    <div id="app" />
    <script src="ready.js"></script>
</body>
</html>

Upvotes: 0

Related Questions