React-Native 0.57:“找不到变量:需要”与metro-react-native-babel-preset

IT技术 reactjs react-native babeljs babel-polyfill
2021-05-21 03:52:35

我开始了一个多平台项目,在 react-native 和 react-js 之间共享代码。所以我有一个用于浏览器/电子的 webpack 设置,以及一个用于 Android/iOS 的 react-native 0.57 设置。我现在遇到的问题如下: 找不到变量:需要

这可能是一个非常直率的问题,但我还需要什么吗?我读到,React-native 本身应该支持 require,但找不到与此设置相关的任何内容。

.babelrc {"presets": ["module:metro-react-native-babel-preset"]}

我也在浏览器端使用@babel/polyfill 和@babel/runtime,但我想知道它们是否会干扰。

3个回答

得到了解决方案,我的 .babelrc 没问题,但是打包器缓存了第一个错误的,所以我不得不以如下方式启动打包器: react-native start --reset-cache

查看下面的github问题后,问题似乎是由corejs选项@babel/plugin-transform-runtime引起的,因此将其替换为@babel/polyfil

https://github.com/facebook/react-native/issues/21048

.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
 }

安装 Babel polyfill 7 "@babel/polyfill": "^7.0.0"

并将其导入到 App 组件中

  import '@babel/polyfill'

似乎react-native start --reset-cache有效。