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 时出错。确保您已关注 所有博览会更新安装步骤均正确。无法解决 模块

../../modules/store/components/Filters

来自

src/utils/Router.js

：

这些文件都不存在：

我在哪里导入这样的文件

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

Answer 1

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

react-native start --reset-cache

这对我有用。欲了解更多信息，请参阅此处

Answer 2

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

这是我的 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 3

将

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 4

只需添加扩展参数即可，

但是对于开启Metro服务器的情况，我不知道前面的IOS还是前面的Android如何选择

{
// http://localhost:8081/foo/bar/baz.bundle?dev=true&platform=ios
extensions: [".js", ".jsx", ".tsx", ".ios.js", ".android.js"],
// http://localhost:8081/foo/bar/baz.bundle?dev=true&platform=android
extensions: [".js", ".jsx", ".tsx", ".android.js", ".ios.js"],
}

Answer 5

您可以使用以下命令安装开发依赖项来修复它：

yarn install --dev 

npm install --dev

我相信在大多数情况下不需要其他任何东西。

Answer 6

我在 babel 上也遇到了类似的问题，我通过更新到项目所需的节点版本并重新安装其他所有内容来解决：watchman、react-native-cli、节点模块和 pod。