找不到相对于目录的预设“模块：metro-react-native-babel-preset”

Posted 2023-03-13

【中文标题】找不到相对于目录的预设“模块：metro-react-native-babel-preset”

【英文标题】：Couldn't find preset "module:metro-react-native-babel-preset" relative to directory

【发布时间】：2019-06-04 01:11:34

【问题描述】：

我正在尝试运行我的测试套件，但出现以下错误：

Couldn't find preset "module:metro-react-native-babel-preset" relative to directory "/Users/dan/Sites/X"

      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
          at Array.map (<anonymous>)
      at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
      at OptionManager.mergePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
      at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)
      at File.initOptions (node_modules/ts-jest/dist/util/hacks.js:23:43)
      at new File (node_modules/babel-core/lib/transformation/file/index.js:135:24)
      at Pipeline.transform (node_modules/babel-core/lib/transformation/pipeline.js:46:16)

这是我在package.json 中的jest 配置：

"jest": 
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json"
    ],
    "transform": 
      "^.+\\.(js)$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
      "\\.(ts|ts)x?$": "ts-jest"
    ,
    "testRegex": "/src/.*.spec.(js|ts|tsx)?$",
    "globals": 
      "ts-jest": 
        "useBabelrc": true
      
    
  

如果需要，这里是babelrc的内容

  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    [
      "module-resolver",
      
        "alias": 
          "~": "./src"
        
      
    ]
  ]

【问题讨论】：

在这里讨论：github.com/facebook/metro/issues/242

【参考方案1】：

This issue 在撰写本文时保持打开状态。

用户似乎对修复有不同的结果，但这两个对我有用：

选项 1：将 .babelrc 更改为 .babelrc.js

只需将.babelrc 重命名为.babelrc.js 或babel.config.js。

不要忘记在文件开头添加module.exports = 。

这解决了我的玩笑问题，但为我破坏了其他 eslint 插件。

选项 2：将转换添加到 Jest 配置

对于选项 2，我认为它可以通过在所有 javascript 文件上手动调用 react-native 预处理器来解决该问题。

transform:  '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js' 

如果您没有单独的 Jest 配置文件，您可以将其添加到您的 package.json 中，例如...

  "jest": 
    "transform":  
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js" 
    
  

【讨论】：

可能值得指出的是，JSON 示例中的 transform 需要用双引号 ("transform") 括起来。

【参考方案2】：

我在控制台中遇到了同样的警告。我通过运行以下命令修复了它：

npm i metro-react-native-babel-preset --save-dev