首页 > 解决方案 > 我该如何解决:“无法解析模块...”在 react-native 中使用纱线工作区?

问题描述

我正在将 react-native 与纱线工作区一起使用。Everthings 工作,但我不能让别名工作。当我尝试使用时:

import { useTailwind } from 'tailwind'

我得到错误:

Error: Unable to resolve module ../../../src/theme/useTailwind.tsx from /Users/.../packages/mobile-app/src/App.tsx

我的文件夹结构如下所示:

 - root
   - packages
     - mobile-app
       - src
         - App.tsx
         - theme
           - useTailwind.tsx

我的metro.config.js样子是这样的:

const path = require('path')

module.exports = {
  projectRoot: path.resolve(__dirname, '../../'),
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false, // default true
      },
    }),
  },
};

我像这样配置别名babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      "module-resolver",
      {
        "root": [
          "./src"
        ],
        "alias": {
          "tailwind": "./src/theme/useTailwind.tsx",
        }
      }
    ]
  ]
};

我试图运行 Metro 捆绑器,yarn start --reset-cache但它不起作用。我需要更改什么才能使别名正常工作?

标签: react-nativebabeljsaliasyarn-workspaces

解决方案


对于所有有同样问题的人。我能够通过如下更改路径来解决问题:

"alias": {
   "tailwind": "./packages/mobile-app/src/theme/useTailwind.tsx",
}

推荐阅读