错误：缺少 class 属性转换

Question

Error: Missing class properties transform

Test.js ：

export class Test extends Component {
  constructor (props) {
    super(props)
  }

  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }

.babelrc ：

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["transform-class-properties"]
}

package.json :

"babel-core": "^6.5.1",
"babel-eslint": "^4.1.8",
"babel-loader": "^6.2.2",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.5.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.5.2",

我搜索了 web，所有修复都围绕着：升级到 babel6，将“stage-0”的顺序切换到“es2015”之后。 所有这些我都做过。

Answer 1

你需要安装babel-plugin-transform-class-properties ：

npm install babel-plugin-transform-class-properties --save-dev

或者

yarn add babel-plugin-transform-class-properties --dev

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

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

Answer 2

好的，终于想通了，在我的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相同的方式.babelrc ，将 stage-0 切换到 es2015 之后，它可以完美编译。

Answer 3

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

在我的情况下（babel 7.9.6，typescript 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" ] }

Answer 4

我有同样的错误，我在我的 .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/
    }
  ]
}

Answer 5

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

Answer 6

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

Answer 7

在我的情况下的修复是在我的webpack.config.js的 options 属性中定义“transform-class-properties”插件，我使用的是 babel V6

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

Answer 8

由于使用了 env 预设，我也遇到了这个错误"presets": [ "react", "es2015", "stage-0", ["env", { "modules": false }]],在我之后删除 env 预设，效果很好

Answer 9

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

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

Answer 10

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

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

Answer 11

最后发现，为了消除Laravel混合项目这个错误，在下面添加代码webpack.mix.js

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

Answer 12

如果您使用的是 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

Answer 13

完整的工作解决方案——

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

2. 从“react-pdf”导入{文档，页面，pdfjs}；

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

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