Выходит ошибка при сборке проекта с помощью Webpack?

Question

[Денис]

Здравствуйте. Недавно поставил Webpack 3.11.0 , в нем соответственно изменилось подключение лоудеров и т.д. Тем не менее, опираясь на документацию, я прописал в конф. файле вебпака все соответствующие правила, в частности для Бабеля. При сборке вышла ошибка:
ERROR in ./src/index.js
Module build failed: Error: Couldn't find preset "preset-env" relative to directory "C:\\git-repo\\todos"
at C:\git-repo\todos\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
at Array.map ()
at OptionManager.resolvePresets (C:\git-repo\todos\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
at OptionManager.mergePresets (C:\git-repo\todos\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
at OptionManager.mergeOptions (C:\git-repo\todos\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
at OptionManager.init (C:\git-repo\todos\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (C:\git-repo\todos\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (C:\git-repo\todos\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (C:\git-repo\todos\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transpile (C:\git-repo\todos\node_modules\babel-loader\lib\index.js:50:20)
@ multi (webpack)-dev-server/client?localhost:8080 webpack/hot/dev-server ./src/index.js
webpack: Failed to compile.

Пресеты вроде указал в файле babelrc. Не могу понять пока на что он ругается. Есть ссылка на гитхаб с проектом. Помогите разобраться, пожалуйста. https://github.com/denis862008/test

Answer 1

[Антон Спирин]

Поправьте в .babelrc:

{
  "presets": ["env", "react", "stage-0"],
  "plugins": ["transform-decorators-legacy"]
}

и уберите из конфига. Незачем дублировать.

Либо поправьте в конфиге:

options: {
  presets: ['env', 'react', 'stage-0'],
  plugins: ['transform-decorators-legacy']
}

Comments

[Денис]

Сейчас попробую

[Денис]

Спасибо, помогло. Остался маленький вопрос: я указал в выполнении скрипта флаг --hot, таким образом, я рассчитываю на то, что при изменении в файлах .js перезагрузки страницы не будет, но она есть. В чем может быть проблема?

[Антон Спирин]

Денис, в официальной документации есть простой пример.

[Денис]

Антон Спирин, Но я добавил в plugins HotModuleReplacementPlugin и даже сделал по примеру из документации:

// const path = require('path');
const webpack = require('webpack');
const NODE_ENV = process.env.NODE_ENV || 'development';

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        publicPath: '/',
        filename: 'bundle.js'
    },
    watch: NODE_ENV === 'development',
    devServer: {
        // host: 'localhost',
        hot: true,
        inline: true,
        port: 3000,
        contentBase: './public',
        historyApiFallback: true
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    'react-hot-loader/webpack',
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['env', 'react', 'stage-0'],
                            plugins: ['transform-decorators-legacy']
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    devtool: 'inline-source-map',
    resolve: {
        extensions: ['.js', '.jsx', '.json', '*']
    }
};

[Антон Спирин]

Денис, чтобы подменять модули JS на лету, надо добавить вызов module.hot.accept:

import someModule from  './someModule';

// some actions

if (module.hot) {
  module.hot.accept('./someModule', () => {
    // some actions
  });
}

Посмотрите этот скринкаст. Придет понимание того, как это работает.

[Денис]

Антон Спирин, В случае с React от ручных проверок избавит react-hot-loader полагаю, правильно?

[Антон Спирин]

Денис, нет, там еще и компонент React через entry патчить нужно. На странице официального репозитория есть все руководства. В интернете так же можно найти много статей на эту тему.