如何解决：“无法解析模块...”在使用yarn工作区的react-native中？

Question

我在yarn工作区中使用react-native。一切都正常，但我不能让alias正常工作。当我尝试使用：

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

我试着用yarn start --reset-cache运行metro bundler，但它不起作用。为了让别名正常工作，我需要做些什么？

Answer 1

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

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