【问题标题】:Unable to use the spread operator after ejecting create-react-app弹出 create-react-app 后无法使用扩展运算符
【发布时间】:2023-03-25 01:57:01
【问题描述】:

我使用 create-react-app 创建了一个 react 应用程序。

运行弹出后,我无法使用展开运算符,如下所示:

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

当我运行 yarn start 时它一直给我这个错误

第 19 行:解析错误:意外令牌..

Webpack 开发服务器 我尝试将所有预设和转换插件添加到 webpack 开发服务器配置和 .babelrc 但没有运气

// 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

在 babel rc 文件中也是如此 //.babelrc

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

如果我不弹出脚本,它可以正常工作。

【问题讨论】:

  • 与您的问题没有直接关系,但可能会为您指明所需的方向。 github.com/facebook/create-react-app/issues/3197
  • 所以问题原来是 eslint。 Webpack 在 babel 之前加载它,虽然 babel 没有传播问题,但 eslint 有。

标签: reactjs babeljs create-react-app


【解决方案1】:

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

【讨论】:

    【解决方案2】:

    所以问题原来是 eslint。 Webpack 配置在 babel 之前加载它

    添加解析器选项修复了它。

    {
            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,
          },
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-09-23
      • 2018-11-13
      • 1970-01-01
      • 2018-04-01
      • 1970-01-01
      • 2021-02-28
      • 1970-01-01
      • 2018-01-14
      相关资源
      最近更新 更多