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

Question

Денис @den0820

Фронтенд Junior разработчик.

Webpack

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

Здравствуйте. Недавно поставил 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

Вопрос задан более трёх лет назад
428 просмотров

Комментировать

Подписаться 1 Средний Комментировать

Решения вопроса 1

7 комментариев

Денис @den0820 Автор вопроса

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

Написано более трёх лет назад
Денис @den0820 Автор вопроса

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

Написано более трёх лет назад
Антон Спирин @rockon404

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

Написано более трёх лет назад

Денис @den0820 Автор вопроса

Антон Спирин, Но я добавил в 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', '*']
    }
};

Написано более трёх лет назад

Антон Спирин @rockon404
Денис, чтобы подменять модули JS на лету, надо добавить вызов module.hot.accept:
import someModule from './someModule'; // some actions if (module.hot) { module.hot.accept('./someModule', () => { // some actions }); }

Посмотрите этот скринкаст. Придет понимание того, как это работает.
Написано более трёх лет назад
Денис @den0820 Автор вопроса

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

Написано более трёх лет назад
Антон Спирин @rockon404

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

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

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

Войти через центр авторизации

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

Webpack

+1 ещё

Простой
Как исправить Modules «net» and «tls» not found when running webpack under sheets API directory?
- 1 подписчик
- 14 часов назад
- 10 просмотров
0

ответов
Webpack

Простой
Есть ли необходимость в битых файлах созданных при сборке Webpack?
- 2 подписчика
- вчера
- 184 просмотра
0

ответов
JavaScript

+1 ещё

Средний
Как правильно подменить код в Javascript-файле, упакованном WebPack?
- 1 подписчик
- 02 апр.
- 96 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Почему в electron-builder ссылки на svg имеют не верный путь?
- 1 подписчик
- 01 апр.
- 68 просмотров
1

ответ
CSS

+3 ещё

Простой
Можно ли удалить файл theme.min.css из dev сборки?
- 1 подписчик
- 19 мар.
- 192 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как лучше настроить режимы в WebPack сборке?
- 1 подписчик
- 18 мар.
- 85 просмотров
1

ответ
Webpack

Средний
Почему webpack долго собирает проект?
- 1 подписчик
- 12 мар.
- 82 просмотра
0

ответов
Vue.js

+2 ещё

Простой
Необходимо собрать code metrics проекта, сложность компонентов/функций в компонентах и тд, Какие есть инструменты для этого?
- 2 подписчика
- 11 мар.
- 125 просмотров
0

ответов
Node.js

+1 ещё

Простой
Как собрать проект чтобы в конце бандла были лицензии всех пакетов?
- 2 подписчика
- 10 мар.
- 304 просмотра
0

ответов
Webpack

+2 ещё

Средний
Как исправить ошибку при импортe Chart.js в Nuxt2?
- 1 подписчик
- 08 мар.
- 21 просмотр
0

ответов
Показать ещё Загружается…

Fullstack Developer, Remote 🔥

Fundraise Up

от 3 800 до 6 500 $

Middle Fullstack Developer (Laravel + Vue.js) (Contractor, Remote)

Hicaliber

от 2 500 до 3 800 $

Преподаватель по программированию

Современный цифровой колледж • Пермь

от 10 000 до 50 000 ₽

Доработать бота

20 апр. 2024, в 08:24

1500 руб./за проект

Разработать интранет сайт (корпоративный портал)

20 апр. 2024, в 07:24

100000 руб./за проект

Исправить адаптивную верстку на Tilda Zero Block

20 апр. 2024, в 06:39

4000 руб./за проект

Answer 1 · 2018-02-19 15:31:19

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

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

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

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

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

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

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

Минуточку внимания

Войдите на сайт