React多工作区项目通用路径配置失效问题排查

项目背景 #

• 基于Solito + NativeBase的TypeScript模板Monorepo，包含4个独立模块，正在逐步从JavaScript迁移至TypeScript
• 目录结构：

/ - 根目录
/apps/expo - Expo相关代码与配置
/apps/next - Next.js相关代码与配置
/packages/app/ - 通用业务逻辑、组件、页面等

• 根目录package.json工作区配置：

"workspaces": [
  "apps/*",
  "packages/*"
],

已尝试的配置 #

1. tsconfig.json路径配置（根目录及各子目录均尝试过） #

"paths": {
  "app/*": ["./packages/app/*"],
  "components/*": ["./packages/app/components"],
  "config/*": ["./packages/app/config"],
  "controllers/*": ["./packages/app/controllers"],
  "pages/*": ["./packages/app/pages"],
  "reducers/*": ["./packages/app/redux"],
  "resources/*": ["./packages/app/resources"],
  "revenuecat/*": ["./packages/app/revenuecat"],
  "routing/*": ["./packages/app/routing"],
  "utils/*": ["./packages/app/utils"],
  "interfaces/*": ["./packages/app/interfaces"],
  "root/*": ["./*"]
}

2. Expo目录babel.config.js插件配置 #

[
  'module-resolver',
  {
    root: '../../packages',
    alias: {
      app: '../../packages/app',
      components: '../../packages/app/components',
      config: '../../packages/app/config',
      controllers: '../../packages/app/controllers',
      pages: '../../packages/app/pages',
      reducers: '../../packages/app/redux',
      resources: '../../packages/app/resources',
      revenuecat: '../../packages/app/revenuecat',
      routing: '../../packages/app/routing',
      utils: '../../packages/app/utils',
      interfaces: '../../packages/app/interfaces',
    },
  },
]

3. Next.js目录.babelrc插件配置 #

[
  "module-resolver",
  {
    "root": "../../packages",
    "alias": {
      "app/*": "../../packages/app",
      "components": "../../packages/app/components",
      "config": "../../packages/app/config",
      "controllers": "../../packages/app/controllers",
      "pages": "../../packages/app/pages",
      "reducers": "../../packages/app/redux",
      "resources": "../../packages/app/resources",
      "revenuecat": "../../packages/app/revenuecat",
      "routing": "../../packages/app/routing",
      "utils": "../../packages/app/utils",
      "interfaces": "../../packages/app/interfaces"
    }
  }
]

出现的错误 #

Next.js环境中，_app.js可正常加载/packages/app/components/main/Footer.web.js，但Footer.web.js内部的导入语句报错：

error - ../../packages/app/components/main/Footer.web.js:4:0
Module not found: Can't resolve 'components/main/AppButtons'
  2 | import { FontAwesome } from '@expo/vector-icons';
  3 | import moment from 'moment';
> 4 | import AppButtonGroup from 'components/main/AppButtons';
  5 | import {
  6 |   Row,
  7 |   Column,

注：AppButtons.tsx与Footer.web.js位于同一目录下

疑问 #

1. 为何所有路径配置均未生效？
2. /packages/app目录下的内部导入无法识别自定义路径的原因是什么？是否需要在该目录添加.babelrc配置？

内容的提问来源于stack exchange，提问作者Steven Matthews