Installing react/webpack, what's the problem?

Question

JavaScript

Please help me understand what is wrong? I install a project with react/redux/webpack/webpck-devserver and I get this error. Already updated everything, nothing helps. I couldn't find a solution to the problem on google.

ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' E:\Study projects\React-test\node_modules\webpack-dev-server\client\index.js in E:\Study projects\React-test
 @ multi main

ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' ./src/index.js in E:\Study projects\React-test
 @ multi main

ERROR in multi main
Module not found: Error: Cannot resolve module 'webpack/hot/dev-server' in E:\Study projects\React-test
 @ multi main

ERROR in multi main
Module not found: Error: Cannot resolve module 'webpack-dev-server/client' in E:\Study projects\React-test
 @ multi main

npm - v3.10.8
node - v6.9.1
Config webpack-a

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

const NODE_ENV = process.env.NODE_ENV || 'development';

module.exports = {
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/dev-server',
        './src/index.js'
    ],
    output: {
        publicPath: 'http://localhost:3000/',
        path: __dirname + '/public',
        filename: 'bundle.js'
    },
    watch: NODE_ENV == 'development',
    watchOptions: {
        aggregateTimeout: 100
    },
    devtool: NODE_ENV == 'development' ? 'cheap-inline-module-source-map' : null,
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin('bundle.css'),
        new webpack.DefinePlugin({
            NODE_env: JSON.stringify(NODE_ENV)
        }),
        new webpack.NoErrorsPlugin()
    ],
    resolve: {
        moduleDirectories: ['node_modules', 'bower_components'],
        moduleTemplates: ['*', 'index'],
        extensions: ['*', 'index'],
        root: __dirname + '/src'
    },
    resolveLoader: {
        moduleDirectories: ['node_modules', 'bower_components'],
        moduleTemplates: ['*-loader', '*'],
        extensions: ['', '.js']
    },
    devServer: {
        host: 'localhost',
        port: 3000,
        contentBase: __dirname + '/public',
        inline: true,
        hot: true,
        historySpiFallback: true
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loaders: ['react-hot', 'babel-loader'],
                include: [
                    path.resolve(__dirname, 'src')
                ],
                plugins: ['transform-runtime']
            },
            {
                test: /\.(png|jpg|svg|gif)$/,
                loaders: 'file?name=img/[path][name].[ext]'
            },
            {
                test: /\.woff(\?v=\d+\.d+\.d+)?$/,
                loaders: 'url?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]'
            },
            {
                test: /\.woff2(\?v=\d+\.d+\.d+)?$/,
                loaders: 'url?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]'
            },
            {
                test: /\.ttf(\?v=\d+\.d+\.d+)?$/,
                loaders: 'url?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]'
            },
            {
                test: /\.eot(\?v=\d+\.d+\.d+)?$/,
                loaders: 'file&name=fonts/[name].[ext]'
            },
            {
                test: /\.svg(\?v=\d+\.d+\.d+)?$/,
                loaders: 'url?limit=10000&mimetype=image/svg+xml&name=fonts/[name].[ext]'
            }
        ]
    }
};

if(NODE_ENV == 'production'){
    console.log('WTF');
    module.exports.plugins.push(
        new webpack.optimize.__UglifyJsPlugin({
            compress: {
                warnings: false,
                drop_console: true,
                unsafe: true
            }
        })
    )
}

I would be very grateful for your help!

Answer 1

I can assume that there may be problems in the path (there is a space in the Study projects directory). Try doing all this in a directory with no spaces in the path.

Answer 2

the problem is this line loaders: ['react-hot', 'babel-loader'], install a new version of the [email protected] package from npm and replace this line with loaders: ['react -hot-loader/webpack', 'babel-loader'].

Answer 3

Structure

Answer 4

this is definitely wrong - './src/index.js' must be absolute paths.
You already have paths in resolve, so you can just leave 'index.js'. Or, for now, omit the resolve section and use the path module and __dirname variable (just to get a better understanding of the first step)

resolve: {
        moduleDirectories: ['node_modules', 'bower_components'],
        moduleTemplates: ['*', 'index'],
        extensions: ['*', 'index'],
        root: __dirname + '/src'
    },

extensions: ['*', 'index'] - this is also strange - file extensions must be specified here. and since you specify '*', then you can stop there, but it's better to specify the real file extensions that are involved in the assembly ['js', 'jsx', 'css', etc.]
there are a lot of logical inconsistencies in the config, you You obviously don't fully understand what's going on here. I would recommend that you start with the entry, output and module sections and add the rest as you read the documentation. now it is well written. Good luck!!! deal with it, it's worth it!!!
https://webpack.js.org/configuration/