Babel 模块解析器不适用于 react-native

Question

我的 babel 模块解析器不适用于 React-Native（VScode 中的 intellij 也不适用）

这是我的 babel 配置

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'],
        alias: {
          '@assets': './src/assets',
          '@modules': './src/modules',
          '@config': './src/config',
          '@utils': './src/utils',
        },
      },
    ],
  ],
};

和 jsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./src",
        "paths": {
            "@assets": ["./assets"],
            "@modules": ["./modules"],
            "@config": ["./config"],
            "@utils": ["./utils"]
        }
    }
}

我更改了我的一个文件的导入，这是我从 Xcode 执行构建命令时遇到的错误

错误：从 Metro 加载资产 JSON 时出错。 确保您已正确执行所有 expo-updates 安装步骤。 无法从src/utils/Router.js ../../modules/store/components/Filters

这些文件都不存在：

我在哪里导入这样的文件

import Filters from '@modules/store/components/Filters';

Answer 1

我有同样的问题，我刚刚从我的别名中删除了“@”，现在看起来工作正常。

这是我的 babel.config.js

module.exports = function (api) {     ■ File is a CommonJS module; it may be converted to an ES6 module.   
api.cache(true);                                                                                                
return {                                                                                           
  presets: ["babel-preset-expo"],                                                                                                                             
  plugins: [                                                                                                                                                  
    [                                                                                                                                                         
      require.resolve("babel-plugin-module-resolver"),                                                                                                        
      {                                                                                                                                                
        root: ["./src/"],                                                                                                                              
        alias: {                                                                                                                                       
          // define aliases to shorten the import paths                                                                                                
          components: "./src/components",                                                                                                              
          containers: "./src/containers",                                                                                                              
          contexts: "./src/contexts",                                                                                                                  
          interfaces: "./src/interfaces",                                                                                                              
          organizer: "./src/screens/organizer",                                                                                                        
          screens: "./src/screens",                                                                                                                    
        },                                                                                                                                             
        extensions: [".js", ".jsx", ".tsx", ".ios.js", ".android.js"],                                                                                        
      },                                                                                                                                                      
    ],                                                                                                                                                 
  ],                                                                                                                                                   
};                                                                                                                                                            

};

Answer 2

将您的module-resolver的根更改为['./src/'] ：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src/'], // <-- here ✅
        alias: {
          '@assets': './src/assets',
          '@modules': './src/modules',
          '@config': './src/config',
          '@utils': './src/utils',
        },
      },
    ],
  ],
};

Answer 3

如果以上建议的答案不起作用，请尝试重置缓存

react-native start --reset-cache

这对我有用。 有关更多信息，请参见此处