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"
    ]
  }

0 ответов

Другие вопросы по тегам