错误:缺少类属性转换

安装@babel/plugin-proposal-class-properties：

npm install @babel/plugin-proposal-class-properties --save-dev

或

yarn add @babel/plugin-proposal-class-properties --dev

并将以下内容添加到您的 Babel 配置文件中 - 通常是 .babelrc 或 babel.config.js 。

"plugins": ["@babel/plugin-proposal-class-properties"],

好吧，终于想通了，在我的webpack.config.js中，我有：

module: {
    loaders: [
      {
        test: /'.js?$/,
        exclude: /(node_modules|bower_components)/,
        loaders: [
          'react-hot',
          'babel?presets[]=react,presets[]=es2015,presets[]=stage-0'
        ]
      }
    ]
  }

'babel?presets[]=stage-0,presets[]=react,presets[]=es2015'

必须以与.babelrc相同的方式处理，将阶段 0 切换为 es2015 之后，并且可以完美编译。

以防万一有人实际上仍然面临同样的问题，以下博客文章确实帮助了我：https://devblogs.microsoft.com/typescript/typescript-and-babel-7/

就我而言（babel 7.9.6，打字稿 3.9.2，webpack 4.43.0），我必须执行以下操作：

1. 运行以下命令：

   npm install --save-dev @babel/preset-typescript @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread
   

2. 使用以下内容创建 .babelrc 文件（是的，我以前没有，它确实工作得很好）：

   {
       "presets": [
           "@babel/env",
           "@babel/preset-typescript"
       ],
       "plugins": [
           "@babel/proposal-class-properties",
           "@babel/proposal-object-rest-spread"
       ]
   }
   

当我不假思索地将一些箭头函数放入我的一个类时，我遇到了这个问题。一旦我将箭头函数更改为常规函数/方法定义，错误就解决了。

在我的情况下，修复是在我的 webpack.config 的选项属性中定义"转换类属性"插件.js，我正在使用 babel V6

 rules:[
    .....,
    {
       test: /'.(js|jsx)$/,
       exclude: /(node_modules|bower_components)/,
       loader: 'babel-loader',
       options: { plugins: ['transform-class-properties']}
    }
 ]

我遇到了同样的错误，我在 .babelrc 中正确订购了我的插件，但它仍然存在。删除我在 webpack 加载器中定义的预设参数修复了它。

以前的 webpack 配置：

module: {
  rules: [
    {
      test: /.jsx?$/,
      loader: 'babel-loader',
      include: path.join(__dirname, 'src'),
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react']
      }
    }
  ]
}

工作 webpack 配置：

module: {
  rules: [
    {
      test: /.jsx?$/,
      loader: 'babel-loader',
      include: path.join(__dirname, 'src'),
      exclude: /node_modules/
    }
  ]
}

我有这个错误，因为我使用的是stage-3而不是stage-0。

由于使用了 env 预设，我也遇到了此错误： "presets": [ "react", "es2015", "stage-0", ["env", { "modules": false }]], 在我删除 env 预设后，它运行良好

@speak是对的，但你需要改变顺序

loaders: [
  'react-hot',
  'babel?presets[]=react,presets[]=es2015,presets[]=stage-0'
]

我在使用koa-react-view时遇到了同样的问题。从这些答案中获得灵感，最后在koa server.js中使用以下代码修复它：

const register = require('babel-register');
register({
    presets: ['es2015', 'react', 'stage-0'],
    extensions: ['.jsx']
});

终于发现，要在 Laravel-Mix 项目中删除此错误，请在 webpack.mix.js 中添加以下代码

mix.webpackConfig({
        module: {
            rules: [
                {
                    test: /'.js?$/,
                    exclude: /(node_modules|bower_components)/,
                    loaders: [
                        'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0'
                    ]
                }
            ],
        }
});

如果您使用的是 Babel 7.4 或更高版本，则不推荐使用 @babel/pollify。

安装core-js、regenerator-runtime、@babel/plugin-proposal-class-properties和babel-plugin-transform-class-properties软件包。

yarn add core-js regenerator-runtime @babel/plugin-proposal-class-properties babel-plugin-transform-class-properties --dev
// or
npm install core-js regenerator-runtime @babel/plugin-proposal-class-properties babel-plugin-transform-class-properties --save-dev

然后，添加到.babelrc或babel.config.js

"plugins": ["@babel/plugin-proposal-class-properties"],

最后，在主 js 文件中添加以下行：

import "core-js/stable";
import "regenerator-runtime/runtime";

取自：https://stackoverflow.com/a/54490329/9481448

完整的工作解决方案 --

1. 使用 "react-pdf"： "^5.7.2" 版本

2. 从 "react-pdf" 导入 { Document， Page， pdfjs }

   ;

3. 还要将其添加到功能组件中

useEffect（（） => { pdfjs.GlobalWorkerOptions.workerSrc = https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js ;}）;

如果您使用的是 create-react-app，则可以将特定于 babel 的配置添加到您的package.json：

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
  }