npm 运行构建上的 Babel-Loader 语法错误

Question

I am not very strong with webpack and am trying to update webpack from V3 to V4 and have managed to update my webpack config to the point where its not throwing depreciation errors at me, but I am now stuck on a syntax error from babel-loader:

      Module build failed (from ./node_modules/babel-loader/lib/index.js):
      /path/react/node_modules/schema-utils/dist/util/hints.js:16
      const currentSchema = { ...schema
      SyntaxError: Unexpected token ...

In my webpack config I have this:

         test: /\.(js|jsx)$/,
            use: [
              {
                loader: 'babel-loader',
                options: {
                  presets: [
                    '@babel/preset-env',
                    '@babel/preset-react',
                    {
                      plugins: [
                        '@babel/plugin-proposal-class-properties'
                      ]
                    }
                  ],
                  compact: true,
                  cacheDirectory: false, // @todo: legacy option: true
                },
              }
            ]

and I am using the following versions:

 "@babel/core": "^7.1.6",
 "@babel/plugin-proposal-class-properties": "^7.8.3",
 "@babel/preset-env": "^7.1.6",
 "@babel/preset-react": "^7.0.0",
 "babel-loader": "^8.0.4",

I have tried multiple times with diffent versions of babel but always end up at this message. Can anyone see any obvious mistakes I am making?

Answer 1

The SyntaxError: Unexpected token... implies that your node isn't transpiling ES6. Have you upgraded node/npm to relatively new versions?

Also, if you're changing versions, I would suggest deleting your node_modules folder and package-lock.json file before running npm install again.