@bee2015

Установка react/webpack, в чем проблема?

Помогите пожалуйста понять в чем ошибка? Устанавливаю проект с react/redux/webpack/webpck-devserver и выдает такую ошибку. Уже все обновлял, ничего не помогает. В гугле не нашел решения пробемы.
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
            }
        })
    )
}


Буду очень благодарен за помощь!
  • Вопрос задан
  • 1116 просмотров
Пригласить эксперта
Ответы на вопрос 4
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
Могу предположить, что возможно проблемы в пути (есть пробел у директории Study projects). Попробуйте провернуть все это в директории, в пути до которой нет пробелов.
Ответ написан
@stasov1
проблема вот в этой строчке loaders: ['react-hot', 'babel-loader'], поствьте из  npm новую версию пакете react-hot-loader@3.0.0-beta.6 и замените эту строку на loaders: ['react-hot-loader/webpack', 'babel-loader'].
Ответ написан
@bee2015 Автор вопроса
Структура
409c7d59869d416d808c8a1414f93349.png
Ответ написан
Комментировать
@montecazazza
Node, GraphQL, React
вот это точно неправильно - './src/index.js' нужно указывать абсолютные пути.
У вас уже указаны пути в resolve, так что можно просто оставить 'index.js'. Или пока уберите resolve раздел и используйте модуль path и __dirname переменную (просто чтобы получше разобраться на первом этапе)
resolve: {
        moduleDirectories: ['node_modules', 'bower_components'],
        moduleTemplates: ['*', 'index'],
        extensions: ['*', 'index'],
        root: __dirname + '/src'
    },

extensions: ['*', 'index'] - вот это тоже странное - тут должны быть указаны расширения файлов. и раз уж вы указываете '*', то на этом можно и остановиться, но лучше указывать реальные расширения файлов которые участвуют в сборке ['js', 'jsx', 'css', и тд]

достаточно много логических несостыковок в конфиге, вы, очевидно, не доконца понимаете, что конретно тут происходит. Я бы вам порекомендовал начать с разделов entry, output и module и остальное добавлять по мере того, как будете читать документацию. сейчас она у них написана отлично. Успехов!!! разберитесь с этим, это того стОит!!!
https://webpack.js.org/configuration/
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы