Create React App引入外部目录模块失败问题求助

问题根源 #

之前仅导入类型时能正常运行，是因为TypeScript编译阶段会丢弃类型定义，Webpack并未实际打包这些文件；但添加const值后，这些值需要被Webpack打包进前端代码，而Create React App（CRA）默认限制只能导入src/目录内的文件，因此触发报错。

方案1：迁移共享代码到src/目录 #

这是最直接的解决方案，规避CRA的路径限制：

• 在src/下创建共享目录，比如src/shared，将functions/src/types.ts的内容复制到src/shared/types.ts
• 前端直接从@/shared/types导入（需在tsconfig.json的paths中添加"@/*": ["./src/*"]）
• 云函数端使用相对路径导入，比如../../src/shared/types，或调整云函数的tsconfig.json配置路径

方案2：用符号链接（Symlink）绕过限制 #

通过在node_modules中创建指向共享文件的链接，让Webpack认为模块来自合法路径：

• Mac/Linux：在项目根目录执行

  mkdir -p ./node_modules/@gluetypes
  ln -s ../../functions/src/types ./node_modules/@gluetypes/types
  

• Windows（管理员权限）：

  mkdir .\node_modules\@gluetypes
  mklink .\node_modules\@gluetypes\types ..\functions\src\types
  

• 保留原tsconfig.json的paths配置，前端仍用import { val } from "@gluetypes/types"导入

方案3：用Craco修改Webpack配置 #

CRA默认不允许修改Webpack配置，可通过craco绕过限制，允许导入src/外的文件：

1. 安装依赖：

   npm install @craco/craco --save-dev
   

2. 项目根目录创建craco.config.js：

   const path = require('path');
   
   module.exports = {
     webpack: {
       configure: (webpackConfig) => {
         // 添加别名映射
         webpackConfig.resolve.alias['@gluetypes'] = path.resolve(__dirname, 'functions/src');
         return webpackConfig;
       },
     },
   };
   

3. 修改package.json的启动脚本：

   "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test"
   }
   

4. 保留原tsconfig.json的paths配置，重启项目即可正常导入

方案4：将共享代码作为本地npm包 #

把共享类型/常量发布为本地包，让npm管理依赖：

1. 在functions/src目录下创建package.json：

   {
     "name": "@gluetypes/types",
     "version": "1.0.0",
     "main": "./types.ts",
     "types": "./types.ts"
   }
   

2. 在项目根目录执行安装：

   npm install ./functions/src
   

3. 前后端均可直接用import { val } from "@gluetypes/types"导入，TypeScript和Webpack都会自动识别

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