[英]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".我搜索了 web,所有修复都围绕着:升级到 babel6,将“stage-0”的顺序切换到“es2015”之后。 All of which I have done.
所有这些我都做过。
You need to install babel-plugin-transform-class-properties
:你需要安装
babel-plugin-transform-class-properties
:
npm install babel-plugin-transform-class-properties --save-dev
or或者
yarn add babel-plugin-transform-class-properties --dev
and add the following to your Babel configuration file - usually .babelrc
or babel.config.js
.并将以下内容添加到您的 Babel 配置文件中 - 通常是
.babelrc
或babel.config.js
。
"plugins": ["@babel/plugin-proposal-class-properties"],
OK, finally figured this out, in my webpack.config.js
I 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'
Has to be treated in the same way as .babelrc
, switched stage-0 to be after es2015 and it compiles perfectly.必须以与
.babelrc
相同的方式.babelrc
,将 stage-0 切换到 es2015 之后,它可以完美编译。
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-spread
Create .babelrc file (yes, I didn't have one before and it did work just fine) with the following content:使用以下内容创建.babelrc文件(是的,我以前没有,它确实工作得很好) :
{ "presets": [ "@babel/env", "@babel/preset-typescript" ], "plugins": [ "@babel/proposal-class-properties", "@babel/proposal-object-rest-spread" ] }
I had this same error and I ordered my plugins correctly in my .babelrc but it still persisted.我有同样的错误,我在我的 .babelrc 中正确订购了我的插件,但它仍然存在。 Removing the preset parameters I defined in my webpack loader fixed it.
删除我在 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/
}
]
}
I ran into this issue when I put some arrow functions into one of my classes without thinking.当我不假思索地将一些箭头函数放入我的一个类中时,我遇到了这个问题。 Once I changed the arrow functions to regular function/method definitions the error was resolved.
一旦我将箭头函数更改为常规函数/方法定义,错误就解决了。
我有这个错误,因为我使用的是stage-3
而不是stage-0
。
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']}
}
]
由于使用了 env 预设,我也遇到了这个错误"presets": [ "react", "es2015", "stage-0", ["env", { "modules": false }]],
在我之后删除 env 预设,效果很好
@speak is right, but you need to change the order @speak 是对的,但你需要改变顺序
loaders: [ 'react-hot', 'babel?presets[]=react,presets[]=es2015,presets[]=stage-0' ]
I met the same problem using koa-react-view .我使用koa-react-view遇到了同样的问题。 Get inspired by these answers and finally fixed it with the following code in the
koa server.js
:从这些答案中获得启发,并最终在
koa server.js
使用以下代码修复它:
const register = require('babel-register'); register({ presets: ['es2015', 'react', 'stage-0'], extensions: ['.jsx'] });
Finally discovered, To remove this error in Laravel-Mix project, add below code in webpack.mix.js
最后发现,为了消除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'
]
}
],
}
});
If you are using Babel 7.4 or newer, @babel/pollify
is deprecated.如果您使用的是 Babel 7.4 或更新版本,
@babel/pollify
已弃用。
Install core-js
, regenerator-runtime
, @babel/plugin-proposal-class-properties
and babel-plugin-transform-class-properties
packages.安装
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
Then, add to .babelrc
or babel.config.js
然后,添加到
.babelrc
或babel.config.js
"plugins": ["@babel/plugin-proposal-class-properties"],
Finally, add this lines in your main js file:最后,在您的主 js 文件中添加以下行:
import "core-js/stable";
import "regenerator-runtime/runtime";
Taked from: https://stackoverflow.com/a/54490329/9481448摘自: https ://stackoverflow.com/a/54490329/9481448
Complete working solution --完整的工作解决方案——
Use "react-pdf": "^5.7.2" version使用 "react-pdf": "^5.7.2" 版本
import { Document, Page, pdfjs } from "react-pdf";从“react-pdf”导入{文档,页面,pdfjs};
Also add this inside your functional component还要将其添加到您的功能组件中
useEffect(() => { pdfjs.GlobalWorkerOptions.workerSrc = https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js
;}); useEffect(() => { pdfjs.GlobalWorkerOptions.workerSrc =
https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js
;});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.