Javascript 错误：缺少类属性转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35517245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Error: Missing class properties transform
提问by speak
Error: Missing class properties transform
Error: Missing class properties transform
Test.js:
Test.js：
export class Test extends Component {
constructor (props) {
super(props)
}
static contextTypes = {
router: React.PropTypes.object.isRequired
}
.babelrc:
.babelrc：
{
"presets": ["es2015", "react", "stage-0"],
"plugins": ["transform-class-properties"]
}
package.json:
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",
I have scoured the web and all fixes revolve around: Upgrading to babel6, switching the order of "stage-0" to be after "es2015". All of which I have done.
我搜索了网络，所有修复都围绕：升级到 babel6，将“stage-0”的顺序切换到“es2015”之后。所有这些我都做过。
采纳答案by speak
OK, finally figured this out, in my webpack.config.jsI had:
好吧，终于想通了，在我的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'
'babel?presets[]=stage-0,presets[]=react,presets[]=es2015'
Has to be treated in the same way as .babelrc, switched stage-0 to be after es2015 and it compiles perfectly.
必须以与 相同的方式处理.babelrc，将 stage-0 切换到 es2015 之后，它可以完美编译。
回答by user2849063
You need to install babel-plugin-transform-class-properties, that is
您需要安装babel-plugin-transform-class-properties，即
npm install babel-plugin-transform-class-properties --save-dev
and add the following to your .babelrcfile
并将以下内容添加到您的.babelrc文件中
"plugins": ["transform-class-properties"]
UPDATE May 2020:
2020 年 5 月更新：
According to @Joshua this package was moved to:
根据@Joshua，这个包被移到了：
@babel/plugin-proposal-class-properties
@babel/plugin-proposal-class-properties
https://www.npmjs.com/package/@babel/plugin-proposal-class-properties
https://www.npmjs.com/package/@babel/plugin-proposal-class-properties
回答by Vanessa Ejikeme
I had this same error and I ordered my plugins correctly in my .babelrc but it still persisted. Removing the preset parameters I defined in my webpack loader fixed it.
我有同样的错误，我在我的 .babelrc 中正确订购了我的插件，但它仍然存在。删除我在 webpack 加载器中定义的预设参数修复了它。
Former webpack config:
以前的 webpack 配置：
module: {
rules: [
{
test: /.jsx?$/,
loader: 'babel-loader',
include: path.join(__dirname, 'src'),
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
}
Working webpack config:
工作 webpack 配置：
module: {
rules: [
{
test: /.jsx?$/,
loader: 'babel-loader',
include: path.join(__dirname, 'src'),
exclude: /node_modules/
}
]
}
回答by Ben
I had this error because I was using stage-3instead of stage-0.
我有这个错误，因为我使用的是stage-3而不是stage-0.
回答by Creem
I also meet this error because of the using of env presets:
"presets": [ "react", "es2015", "stage-0", ["env", {
"modules": false
}]],
and after I remove the env presets, it works well
由于使用了 env 预设，我也遇到了这个错误：
"presets": [ "react", "es2015", "stage-0", ["env", {
"modules": false
}]],
在我删除了 env 预设后，它运行良好
回答by JimmyFlash
The fix in my case was defining 'transform-class-properties'plugin in the options attribute of my webpack.config.js, i'm using babel V6
在我的情况下的修复是在我的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']}
}
]
回答by Anatolyevich
Just in case anybody is actually still facing the same issue, The following blog post did help me: https://devblogs.microsoft.com/typescript/typescript-and-babel-7/
以防万一有人实际上仍然面临同样的问题，以下博客文章确实帮助了我：https: //devblogs.microsoft.com/typescript/typescript-and-babel-7/
In my case (babel 7.9.6, typescript 3.9.2, webpack 4.43.0) I had to do the following:
在我的情况下（babel 7.9.6，typescript 3.9.2，webpack 4.43.0）我必须执行以下操作：
Run the following command:
npm install --save-dev @babel/preset-typescript @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spreadCreate .babelrcfile (yes, I didn't have one before and it did work just fine)with the following content:
{ "presets": [ "@babel/env", "@babel/preset-typescript" ], "plugins": [ "@babel/proposal-class-properties", "@babel/proposal-object-rest-spread" ] }
运行以下命令：
npm install --save-dev @babel/preset-typescript @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread使用以下内容创建.babelrc文件（是的，我以前没有，它确实工作得很好）：
{ "presets": [ "@babel/env", "@babel/preset-typescript" ], "plugins": [ "@babel/proposal-class-properties", "@babel/proposal-object-rest-spread" ] }
回答by Muhammad Sulman
Finally discovered, To remove this error in Laravel-Mix project, add below code in webpack.mix.js
终于发现，要在 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'
]
}
],
}
});
回答by Jeff Tian
I met the same problem using koa-react-view. Get inspired by these answers and finally fixed it with the following code in the koa server.js:
我使用koa-react-view遇到了同样的问题。从这些答案中获得灵感，并最终使用以下代码修复它koa server.js：
const register = require('babel-register');
register({
presets: ['es2015', 'react', 'stage-0'],
extensions: ['.jsx']
});回答by Montage
@speak is right, but you need to change the order
@speak 是对的，但你需要改变顺序
loaders: [
'react-hot',
'babel?presets[]=react,presets[]=es2015,presets[]=stage-0'
]