SyntaxError: неожиданная строка, когда npm запускает мой config.dev.js
При настройке нового реагирующего проекта возникла проблема с состоянием, я установил "@ babel / plugin-offer-class-properties", и после этого произошла ошибка, которую я не могу исправить.
import '@babel/polyfill';
^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected string
at Module._compile (internal/modules/cjs/loader.js:718:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
at Module.load (internal/modules/cjs/loader.js:641:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:681:19)
at require (internal/modules/cjs/helpers.js:16:16)
at WEBPACK_OPTIONS (E:\github\reat-proj\node_modules\webpack-cli\bin\utils\convert-argv.js:116:13)
at requireConfig (E:\github\reat-proj\node_modules\webpack-cli\bin\utils\convert-argv.js:118:6)
at E:\github\reat-proj\node_modules\webpack-cli\bin\utils\convert-argv.js:125:17
at Array.forEach (<anonymous>)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reat-proj@1.0.0 start:client:dev: `webpack-dev-server --mode development --config config.dev.js --open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reat-proj@1.0.0 start:client:dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\admin\AppData\Roaming\npm-cache\_logs\2019-08-04T18_52_23_680Z-debug.log
Я попытался очистить кэш $ npm --force, удалить node_modules, удалить package-lock.json и переустановить. Переустановить webpack-cli \ разными способами. не помогло
мой пакет.json
{
"name": "reat-proj",
"version": "1.0.0",
"description": "",
"main": "config.dev.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start:client:dev": "webpack-dev-server --mode development --config config.dev.js --open"
},
"repository": {
"type": "git",
"url": "git+https://github.com/DenisLiGit/reat-proj.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/DenisLiGit/reat-proj/issues"
},
"homepage": "https://github.com/DenisLiGit/reat-proj#readme",
"devDependencies": {
"@babel/cli": "^7.5.5",
"@babel/core": "^7.5.5",
"@babel/node": "^7.5.5",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"autoprefixer": "^9.6.1",
"babel-cli": "^6.26.0",
"babel-eslint": "^10.0.2",
"babel-loader": "^8.0.6",
"babel-preset-es2015": "^6.24.1",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.4",
"css-loader": "^3.1.0",
"eslint": "^6.1.0",
"eslint-config-airbnb-base": "^13.2.0",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-react": "^7.14.3",
"file-loader": "^4.1.0",
"html-webpack-plugin": "^3.2.0",
"imagemin-webpack-plugin": "^2.4.2",
"img-loader": "^3.0.1",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"react-hot-loader": "^4.12.10",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
},
"dependencies": {
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.1.0",
"redux": "^4.0.4"
}
}
config.dev.js
import '@babel/polyfill';
import path from 'path';
import webpack from 'webpack';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';
module.exports = {
devtool: false,
entry: {
main: [
'@babel/polyfill',
'./src/app/index.js',
'./src/css/main.scss',
]
},
output: {
filename: '[name].js',
},
devServer: {
historyApiFallback: true,
port: 3000,
hot: true,
},
module: {
rules: [
{
test: /\.(jsx?)$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react'
],
cacheDirectory: true,
plugins: [
[
'react-hot-loader/babel'
]
],
},
}],
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: 'style-loader',
options: { sourceMap: true },
},
{
loader: 'css-loader',
options: { sourceMap: true },
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: [
autoprefixer,
],
},
},
{
loader: 'sass-loader',
options: { sourceMap: true },
},
],
},
{
test: /\.(png|gif|jpe?g)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
'img-loader',
],
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
devServer: true,
},
}),
new CopyWebpackPlugin([
{ from: 'src/img', to: 'img' },
]),
new webpack.SourceMapDevToolPlugin({
filename: '[name].js.map',
exclude: ['bundle.js'],
}),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
filename: './index.html',
template: './src/index.html',
}),
],
};
.babelrc
{
"presets": [
["@babel/preset-env", {
"modules": false,
"targets": {
"node": "current"
},
"useBuiltIns": "entry"
}],
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}