Parcel构建React widget时报cannot resolve dependency依赖解析错误

核心原因 #

你当前项目通过CRACO配置了绝对路径别名（通常是将src目录设置为模块解析根路径），因此使用craco start、craco build命令时可以正常识别layouts/DashboardLayout这类导入路径。但Parcel构建默认不会读取CRACO的别名配置，无法匹配到对应文件路径，因此抛出依赖找不到的报错。

可选解决方法 #

方法1：通过package.json配置Parcel别名 #

直接在项目package.json中新增alias字段，手动映射你用到的绝对路径前缀：

{
  // 原有package.json内容保留，新增如下配置
  "alias": {
    "layouts": "./src/layouts",
    // 其他用到的绝对路径前缀都按这个格式添加，比如components、utils等
    "components": "./src/components",
    "utils": "./src/utils"
  }
}

配置完成后重新执行npm run build:widget即可。

方法2：通过tsconfig.json配置路径（更推荐TS项目） #

Parcel V2默认支持读取tsconfig.json中的baseUrl和paths配置，如果你项目的tsconfig.json中已经配置了"baseUrl": "src"，只需要确认是Parcel V2版本即可正常识别。如果未配置，在tsconfig.json的compilerOptions下新增如下配置：

{
  "compilerOptions": {
    // 原有配置保留，新增如下内容
    "baseUrl": "src",
    "paths": {
      "*": ["*"]
    }
  }
}

如果使用的是Parcel V1版本，建议升级到Parcel V2，V1版本不支持读取tsconfig路径配置。

方法3：改为相对路径导入 #

如果不想修改配置，可以直接将所有绝对路径导入改为相对路径导入，例如将App.tsx中的
import DashboardLayout from 'layouts/DashboardLayout'
改为对应层级的相对路径：
import DashboardLayout from './layouts/DashboardLayout'
这种方式不需要调整构建配置，但项目文件多的话修改成本较高。

额外注意事项 #

你当前的build:widget命令中用到了cp指令，Windows系统原生CMD不支持该指令，后续如果遇到执行报错可以将命令调整为Windows适配版本：
parcel build src/index.tsx --no-source-maps -d widget && copy build\\static\\css\\*.css widget\\index.css
或者安装跨平台文件复制工具cpx替换原生复制指令。

内容的提问来源于stack exchange，提问作者Genral-walker