Babel模块解析器无法与React原生配合使用

r8xiu3jd 于 2022-12-08 发布在 Babel

关注(0)|答案(2)|浏览(197)

我的babel模块解析器不能与React-Native一起工作（VScode中的intellij也不能）
这是我的巴别塔配置

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';

babeljs

来源：https://stackoverflow.com/questions/66741315/babel-module-resolver-not-working-with-react-native

2条答案

按热度按时间

ghg1uchk1#

我也遇到了同样的问题，我只是从我的别名中删除了“@”，现在看起来工作得很好。
下面是我的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"],                                                                                        
      },                                                                                                                                                      
    ],                                                                                                                                                 
  ],                                                                                                                                                   
};

};

赞(0）回复(0）举报 2022-12-08

5n0oy7gb2#

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

赞(0）回复(0）举报 2022-12-08

我来回答

Babel模块解析器无法与React原生配合使用

2条答案

相关问题

热门标签

最新问答