使用模块解析器时出现 Metro 捆绑器错误

Question

我使用 expo typescript 模板创建了一个项目。在 iOS 和 Android 上运行。没有网络。

然后我在tsconfig.json中设置路径别名如下：

"paths": {
  "@models/*": ["./src/models/*"],
  "@navigation/*": ["./src/navigation/*"],
  "@services/*": ["./src/services/*"],
  "@components/*": ["./tsx/components/*"],
  "@screens/*": ["./tsx/screens/*"],
  "@assets/*": ["./assets/*"]
}

相应地，我配置babel.config.js如下：

plugins: [
        [
            'module-resolver',
            {
                root: ['./'],
                alias: {
                    '@models': path.resolve(path.dirname('.'), 'src/models'),
                    '@navigation': path.resolve(path.dirname('.'), 'src/navigation'),
                    '@services': path.resolve(path.dirname('.'), 'src/services'),
                    '@screens': path.resolve(path.dirname('.'), 'tsx/screens'),
                    '@components': path.resolve(path.dirname('.'), 'tsx/components'),
                    '@assets': path.resolve(path.dirname('.'), 'assets'),
                }
            }
        ]
    ]

上述配置有效。应用程序捆绑并运行良好。但是，在捆绑过程中会发出以下非严重错误：

transform[stderr]: Could not resolve "/Users/jblues/mobbiz/LOSMobileApp/src/navigation/AppNavigator" in file /Users/jblues/LOSMobileApp/tsx/App.tsx.
transform[stderr]: Could not resolve "/Users/jblues/LOSMobileApp/tsx/components/BottomTabNavigator" in file /Users/jblues/LOSMobileApp/src/navigation/AppNavigator.ts.
transform[stderr]: Could not resolve "/Users/jblues/mobbiz/LOSMobileApp/tsx/screens/Login" in file /Users/jblues/LOSMobileApp/src/navigation/AppNavigator.ts.

。 .等等。有什么可以添加到我的配置中来防止这些错误的吗？

Answer 1

您缺少扩展配置，例如：

extensions: ['.js', '.ts', '.ios.js', '.ios.ts', '.android.js', '.android.ts', '.json'],

这是我拥有的babel.config.js 文件，它可以正常工作。可能对您有用。

const MODULE_RESOLVER = [
  'module-resolver',
  {
    extensions: ['.js', '.ios.js', '.android.js', '.json'],
    alias: {
      '@Components': './App/Components',
      '@Navigation': './App/Navigation',
      '@Constants': './App/Constants',
      '@Features': './App/Features',
      '@Services': './App/Services',
      '@Fixtures': './App/Fixtures',
      '@Themes': './App/Themes',
      '@Config': './App/Config',
      '@Sagas': './App/Sagas',
      '@Redux': './App/Redux',
      '@Types': './App/Types',
      '@I18n': './App/I18n',
      '@Lib': './App/Lib',
    },
  },
];
module.exports = {
  plugins: [MODULE_RESOLVER],
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: ['ignite-ignore-reactotron', MODULE_RESOLVER],
    },
  },
};