Блог

Я разобрал свое Create-React-App с помощью Webpack 4 и Babel 7. В первый раз, когда я запустил команду «npm run build», она сработала и создала новую папку сборки. Теперь, после первого раза, я пытаюсь запустить команду снова, и я получаю сообщение об ошибке.

ОШИБКА в ./src/index.js Сбой сборки модуля (из ./node_modules/babel-loader/lib/index.js ):

Я искал решение, но все, что я смог найти, это несоответствие версий babel в файле Package.json, чего у меня, похоже, нет.

Package.json

 {
  "name": "hamilton-beach",
  "version": "0.1.0",
  "license": "MIT",
  "main": "src/index.js",
  "scripts": {
    "start": "webpack-dev-server --open --port 3000 --compress --mode development",
    "dev": "webpack --mode development --progress",
    "build": "webpack --mode production --progress",
    "build-css": "node-sass --include-path scss src/main.scss   src/App.css",
    "watch-css": "nodemon -e scss -x "npm run build-css""
  },
  "private": true,
  "dependencies": {
    "@babel/polyfill": "^7.4.0",
    "axios": "^0.18.0",
    "core-js": "^3.0.0",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "jsonwebtoken": "^8.5.0",
    "lodash": "^4.17.11",
    "node-sass": "^4.11.0",
    "nodemailer-sendgrid-transport": "^0.2.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:5000",
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-proposal-decorators": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "html-webpack-plugin": "^4.0.0-beta.5",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  }
}
  

.babelrc

 {
    "presets": [
        [
            "@babel/env", 
            {
                "useBuiltIns": "entry",
                "targets": {
                    "browsers": [
                        "last 2 versions"
                    ]
                }
            },
            "@babel/react"

        ]
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
    ]
}
  

webpack.config.js

 const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devtool: 'cheap-module-source-map',
    module: {
        rules: [
            { 
                test: /.js$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader'
            },
            {
                test: /.scss$/,
                use: [
                  {
                    loader: "style-loader" // creates style nodes from JS strings
                  },
                  {
                    loader: "css-loader" // translates CSS into CommonJS
                  },
                  {
                    loader: "sass-loader" // compiles Sass to CSS
                  }
                ]
            },
            {
                test: /.(ttf|eot|svg|gif|png|jpg)(?v=[0-9].[0-9].[0-9])?$/,
                use: [{
                    loader: 'file-loader'
                }]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html'
        })
    ]
}