[英]React-Native 0.57: 'Can't find variable: require' with metro-react-native-babel-preset
I started a multiplatform project with code sharing between react-native and react-js. 我启动了一个多平台项目,在react-native和react-js之间共享代码。 So I have a webpack setup for browser/Electron, and a react-native 0.57 setup for Android/iOS.
所以我有一个针对浏览器/电子的webpack设置,以及针对Android / iOS的react-native 0.57设置。 The problem I'm having right now is the following: Can't find variable: require
我现在遇到的问题如下: 无法找到变量:require
It might be a very bald question, but do I need anything else? 这可能是一个非常光头的问题,但我还需要其他什么吗? I read, that React-native should support require by itself, but couldn't find anything related to this setup yet.
我读过,React-native应该自己支持require,但是找不到任何与此设置相关的内容。
.babelrc {"presets": ["module:metro-react-native-babel-preset"]}
I'm also using @babel/polyfill and @babel/runtime on browser side, but I wonder if they would interfere. 我也在浏览器端使用@ babel / polyfill和@ babel / runtime,但我想知道它们是否会干扰。
得到了解决方案,我的.babelrc还可以,但是打包器缓存了第一个错误的解压缩程序,因此我不得不启动打包程序: react-native start --reset-cache
After looking at below github issue it looks like the issue is caused by corejs option @babel/plugin-transform-runtime, So replace it by @babel/polyfil 看下面的github问题看起来问题是由corejs选项@ babel / plugin-transform-runtime引起的,所以用@ babel / polyfil替换它
https://github.com/facebook/react-native/issues/21048 https://github.com/facebook/react-native/issues/21048
.babelrc config for ref .babelrc配置参考
{
"presets": [
"module:metro-react-native-babel-preset",
],
"plugins": [
"react-require",
[
"module-resolver",
{
"root": [
"./src",
"./assets"
],
"alias": {
"app": "./src",
"assets": "./assets"
}
}
],
[
"babel-plugin-require-context-polyfill",
{
"alias": {
"app": "./src"
}
}
],
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-transform-flow-strip-types",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": false
}
],
[
"@babel/plugin-transform-runtime",
{
}
],
],
"sourceMaps": true
}
Install Babel polyfill 7 "@babel/polyfill": "^7.0.0" 安装Babel polyfill 7“@ babel / polyfill”:“^ 7.0.0”
And import that in App component 并在App组件中导入
import '@babel/polyfill'
似乎react-native start --reset-cache
起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.