简体   繁体   中英

Unable to use the spread operator after ejecting create-react-app

I used create-react-app to create a react application.

After I run eject, I am unable to use the spread operator as follows:

//eslint-disable-next-line 
const { children, ...attributes } = this.props; //Line 19

It keeps giving me this error when I run yarn start

Line 19: Parsing error: Unexpected token ..

Webpack Dev Server I have tried adding all the presets and the transform plugin to both webpack dev server config and .babelrc but no luck

// Process JS with Babel.
          {
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),    


            options: {
              presets:['react','es2015','env',"stage-2"],
              plugins: ["transform-object-rest-spread"],
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
            },
          },
          // "postcss" loader app

And in the babel rc file as well //.babelrc

{
    "presets":["env","react","stage-2"],
    "plugins": [
      ["transform-object-rest-spread", { "useBuiltIns": true }]
    ]
  }

It works fine if I don't eject the script.

So the problem turned out to be eslint. Webpack config was loading it before babel

Adding parser options fixed it.

{
        test: /\.(js|jsx|mjs)$/,
        enforce: 'pre',
        use: [
          {
            options: {
              formatter: eslintFormatter,
              eslintPath: require.resolve('eslint'),
              "extends": "airbnb",
              "parserOptions":{
                "ecmaFeatures": {
                  "experimentalObjectRestSpread": true
                }
              }

            },
            loader: require.resolve('eslint-loader'),
          },
        ],
        include: paths.appSrc,
      },

用这个更新了@babel: npm install @babel/runtime@latest 做了这项工作

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM