У меня, похоже, конфликтуют 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 и использовать вебпак.
Официальная сборка от разработчиков 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
Сборка персонального компьютера от Artline: умный выбор для современных пользователей