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安装步骤。无法解析模块../../modules/store/components/Filters，从src/utils/Router.js导入:

没有这些文件存在：

我是这样导入文件的：

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

- Cyberduck

---

你只是忘记了文件扩展名。 - Fancy John

Answer 1

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

react-native start --reset-cache

这对我有用。更多信息请参见这里

- Nabeel K

---

在 Stackoverflow 上浏览了一个小时，读了相同的答案，这就是解决方法。 - Cheyne

嗨，基本上我的配置一开始就是正确的...天啊，这太恶心了 -_- 感谢你！<3 - Limbo

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"],                                                                                        
      },                                                                                                                                                      
    ],                                                                                                                                                 
  ],                                                                                                                                                   
};                                                                                                                                                            

};

- Piotr N.

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',
        },
      },
    ],
  ],
};

- rommyarb

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"],
}

- Dylan Nelly

Answer 5

我在使用babel时遇到了类似的问题，通过更新到项目所需的node版本并重新安装其他所有内容解决了这个问题：watchman、react-native-cli、node模块和pods。

- Zara