问题描述
我正在尝试编译我的React Native App,但出现以下错误:
I'm trying to compile my React Native App and I'm getting the following error:
如果我正确理解,由于它是一个本机应用程序,因此.babelrc文件将被忽略,但是仍然有一些方法可以解决该问题.我在网上看到了一些解决方案,但似乎没有一个适合我.
If I understand correctly, since it is a react native app, the .babelrc file is ignored, but there are still some ways to overcome that. I have seen a few solutions on the web but none seem to work for me.
我尝试过:
- 在与package.json相同的文件夹中添加babel.config.js:
module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript'
],
plugins: [
'@babel/plugin-proposal-class-properties'
]
};
- 将babel配置添加到package.json
{
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript'
],
plugins: [
'@babel/plugin-proposal-class-properties'
]
}
- 向插件添加松散属性:
"plugins": [
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
似乎没有任何作用.
package.json:
package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.5.0",
"@material-ui/icons": "^4.4.3",
"@react-native-community/google-signin": "^3.0.1",
"jquery": "^3.4.1",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-ga": "^2.7.0",
"react-native-google-signin": "^2.1.0",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
},
"devDependencies": {
"@babel/cli": "^7.6.4",
"@babel/core": "^7.6.4",
"@babel/plugin-proposal-class-properties": "^7.5.5"
}
}
babel.config.js:
babel.config.js:
module.exports = {
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-transform-regenerator',
[
'@babel/plugin-transform-runtime',
{
helpers: false,
regenerator: true,
},
],
],
presets: [
"@babel/preset-flow",
'module:metro-react-native-babel-preset',
],
};
如果有人可以在这个伟大的问题上大放异彩,谢谢!
If anyone can shine a light on the issue that would be great, Thank you!
推荐答案
根据[this GitHub] [1]问题,如果您使用create-react-app,则应复制 .babelrc
或 babel.config.js
配置为 webpack.config.js
并删除这些配置.因为htis两行代码 babelrc:false,configFile:false,
您在babelrc中的配置,..是没有用的.而webpack.config.js位于./node_madules/react-scripts/config文件夹中.您可以解决以下问题:
According to [this GitHub][1] issue if you using create-react-app you should copy your .babelrc
or babel.config.js
configurations to webpack.config.js
and delete those.because of htis two line of code babelrc: false,configFile: false,
your config in babelrc,.. are useless. and your webpack.config.js is in your ./node_madules/react-scripts/config folder. you can solve the problem like this:
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
'@babel/preset-env', '@babel/preset-react'
],
plugins: ['@babel/plugin-proposal-class-properties'],
.
.
.
或者您可以根据您的配置文件将 babelrc:false,configFile:false
更改为true.或者您可以弹出并执行此操作.
or you can change babelrc: false,configFile: false,
to true according to your config file.or you can eject and do this.
这篇关于目前尚未启用对实验性语法"classProperties"的支持(8:16).添加@ babel/plugin-proposal-class-properties的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!