时间戳

首页 > 解决方案 > 在 React Native 中升级 Babel 后没有命名空间支持？

typescript - 在 React Native 中升级 Babel 后没有命名空间支持？

问题描述

我使用'react-native init --typescript'创建了一个项目，将react-native升级到0.59.5，babel使用npx babel-upgrade，安装并配置了metro-react-native-babel-preset。但是，现在日志说不支持命名空间。我还有什么要做的吗？

我尝试清理 npm 缓存，删除 node_modules 目录并重做 npm install。我什至尝试过重建项目。

.babelrc

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

包.json

{
  "name": "Ovik",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start --skipflow --reset-cache",
    "develop:android": "react-native run-android --no-packager",
    "develop:ios": "react-native run-ios --no-packager",
    "check": "tsc --noEmit || true"
  },
  "dependencies": {
    "@babel/core": "^7.0.0",
    "babel-loader": "^8.0.5",
    "es6-symbol": "^3.1.1",
    "firebase": "^5.9.4",
    "futura": "^0.2.0",
    "geofire": "^5.0.1",
    "lodash.isequal": "^4.5.0",
    "react": "^16.8.6",
    "react-native": "^0.59.5",
    "react-native-firebase": "^5.3.1",
    "react-native-safe-area-view": "^0.13.1",
    "react-native-slider": "^0.11.0",
    "react-native-typography": "^1.4.0"
  },
  "devDependencies": {
    "@types/lodash.isequal": "^4.5.5",
    "@types/react": "^16.8.13",
    "@types/react-native": "^0.57.45",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.4.2",
    "jest": "^24.7.1",
    "metro-react-native-babel-preset": "^0.53.1",
    "patch-package": "^6.1.2",
    "react-native-typescript-transformer": "^1.2.12",
    "react-test-renderer": "^16.8.6",
    "tslint": "^5.16.0",
    "tslint-language-service": "^0.9.9",
    "typescript": "^3.4.3",
    "@babel/preset-flow": "^7.0.0"
  },
  "jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    }
  }
}

我希望该项目像以前一样捆绑，但是它给出了以下错误

error: bundling failed: SyntaxError: D:\Project\ovik\src\state\loading\index.ts: Namespaces are not supported.
  48 | /** Types */
  49 |
> 50 | export namespace Loading {
     |        ^
  51 |   export interface State {
  52 |   }
  53 |
    at File.buildCodeFrameError (D:\Project\ovik\node_modules\@babel\core\lib\transformation\file\file.js:261:12)
    at NodePath.buildCodeFrameError (D:\Project\ovik\node_modules\@babel\traverse\lib\path\index.js:157:21)
    at PluginPass.TSModuleDeclaration (D:\Project\ovik\node_modules\@babel\plugin-transform-typescript\lib\index.js:244:22)
    at newFn (D:\Project\ovik\node_modules\@babel\traverse\lib\visitors.js:193:21)
    at NodePath._call (D:\Project\ovik\node_modules\@babel\traverse\lib\path\context.js:53:20)
    at NodePath.call (D:\Project\ovik\node_modules\@babel\traverse\lib\path\context.js:40:17)
    at NodePath.visit (D:\Project\ovik\node_modules\@babel\traverse\lib\path\context.js:88:12)
    at TraversalContext.visitQueue (D:\Project\ovik\node_modules\@babel\traverse\lib\context.js:118:16)

标签： typescriptreact-nativereact-native-androidbabeljs

解决方案

我对 React Native 的了解是有限的，但我确实对转译器/捆绑器有相当长的了解。

您的升级显然包括 babel 的新 typescript 预设或transform-typescript插件。就像它说namespace的那样，babel 不支持。原因是 babel 在每个文件的基础上进行编译，这与将项目作为一个整体的 typescript 不同。

这个警告会留下来，不太可能在不久的将来得到修复。因此，您要么放弃namespace使用，要么切换回以前的配置并继续tsc用作编译器。

推荐阅读