Конфликт webpack и react-scripts

267
09 мая 2018, 03:30

У меня, похоже, конфликтуют react-scripts и webpack. Имеется небольшой проект с такими конфигами:

package.json

{
  "name": "todo_react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "webpack",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.8.1",
    "webpack-cli": "^2.1.3"
  }
}

Сначала вместо "start": "webpack" было "start": "react-scripts start", однако при выполнении командыnpm start` возникала ошибка:

Cannot read property 'thisCompilation' of undefined

Конфиг для вебпака такой:

var path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: "babel-loader"
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: "babel-loader"
            },
            {
                test: /\.css$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            }
        ]
    }
};

Я нагуглил, что такая ошибка может возникать из-за одновременного присутствия react-scripts и webpack в package.json. Советуют даже удалять node_moules, вебпак и устанавливать все заново. А как можно проще решить эту проблему?

Мне нужна возможность удобно запускать проект при помощи npm start и использовать вебпак.

Answer 1

Официальная сборка от разработчиков React - github репозиторий (https://github.com/facebook/create-react-app). Все конфигурационные файлы настроены как нужно, после установки можно сразу писать приложение не задумываясь о том как подружить babel с вебпаком. Достаточно иметь только NPM, чтобы развернуть проект. Установите ее и там все по умолчанию уже настроено и в дальнейшем при добавлении библиотек будет следить за корректной установкой.

npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
READ ALSO
Обработчик события окончание анимации. JS и CSS

Обработчик события окончание анимации. JS и CSS

Нужно сделать анимациюЧтобы элемент передвигался в одно место, затем в другое, потом в третье и т

218
Как сделать нормальное мега меню jquery?

Как сделать нормальное мега меню jquery?

Делаю мега меню и получилась ересь: результат работы и проблему можно увидеть тут: sanahuntsite Блоки перекрывают друг друга и не исчезают как...

187
Как определить в каком из div

Как определить в каком из div

Как определить в каком из div с id произошли изменения в этом iteminfo0_game_name или в этом iteminfo1_game_name?

203