uni-app 关于使用 `dcloudio/uni-preset-vue` 创建 pnpm workspace 项目时的编译错误问题
uni-app 关于使用 dcloudio/uni-preset-vue 创建 pnpm workspace 项目时的编译错误问题
操作步骤：
- 使用
pnpm workspace创建项目；
预期结果：
- 执行
pnpm run serve可以正常编译并进行开发；
实际结果：
- 执行
pnpm run serve后导致编译报错，提示缺少加载器（因为code为Promise的原因导致直接拼接字符串报错）；
bug描述：
我想使用 pnpm workspace 进行创建 uniapp 项目，但是当我使用 vue create -p dcloudio/uni-preset-vue mobile 后在项目中进行运行项目。编译时提示 webpack loader 缺少，经过我的排查发现是 vue-tamplate-loader 加载器中发生的错误，不知道是什么原因导致返回值 code 为一个 Promise 对象，所以直接进行拼接的话就会发生错误，当我进行修正后代码运行正常。这种情况仅限于当我使用 pnpm workspace 模式创建项目时会发生，单独使用 vue create -p dcloudio/uni-preset-vue my-project 创建独立的项目并不会发生该情况；
项目结构为：
|- apps // 项目
|-- mobile // uniapp 项目
|-- ... // 其他项目
|- packages // 项目依赖包
|- packages.json // 根依赖
|- pnpm-workspace.yaml // 工作区描述文件
在根目录添加 .npmrc 的 shamefully-hoist=true
首先在创建工作空间创建 uni-app 项目
新创建的uni-app版本为2.0.2-3061420221215001
正常编译
在使用 dcloudio/uni-preset-vue 创建 uni-app 项目时，如果你选择使用 pnpm 作为包管理工具，并且在 pnpm workspace 中管理项目，可能会遇到一些编译错误。以下是一些常见问题及其解决方法：
1. 依赖解析错误
问题描述：
在 pnpm workspace 中，依赖可能会被提升到根目录的 node_modules 中，导致 uni-app 项目无法正确解析依赖。
解决方法：
在项目的根目录下创建一个 .npmrc 文件，并添加以下配置：
shamefully-hoist=true这个配置会强制将所有依赖提升到根目录的 node_modules 中，确保 uni-app 项目能够正确解析依赖。
2. HBuilderX 编译错误
问题描述：
使用 HBuilderX 编译时，可能会遇到类似 Module not found 或 Cannot resolve module 的错误。
解决方法：
确保项目的 node_modules 目录位于项目的根目录下。如果 pnpm 将依赖安装在 workspace 的根目录下，可以尝试以下步骤：
- 在项目的根目录下运行
pnpm install，确保所有依赖都正确安装。 - 如果问题仍然存在，可以尝试在项目的根目录下创建一个
symlink，将 workspace 根目录的node_modules链接到项目的根目录：ln -s ../node_modules ./node_modules
3. Vue 版本冲突
问题描述：
在 pnpm workspace 中，不同的项目可能依赖不同版本的 Vue，导致编译时出现版本冲突。
解决方法：
确保所有项目使用相同版本的 Vue。你可以在 workspace 的根目录下的 package.json 中指定 Vue 的版本，并在各个子项目中引用该版本：
{
"dependencies": {
"vue": "^3.2.0"
}
}然后在子项目中，确保 package.json 中不重复指定 Vue 的版本。
4. TypeScript 配置问题
问题描述：
如果项目中使用 TypeScript，可能会遇到 tsconfig.json 配置问题，导致编译失败。
解决方法：
确保 tsconfig.json 中的 paths 配置正确指向 node_modules。例如：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}如果 node_modules 不在项目根目录下，可能需要调整 baseUrl 和 paths 的配置。
5. HBuilderX 插件问题
问题描述： 使用 HBuilderX 插件时，可能会遇到插件无法正确加载或编译的问题。
解决方法：
确保 HBuilderX 插件与 pnpm 兼容。如果插件无法正常工作，可以尝试以下步骤：
- 在 HBuilderX 中，手动指定
node_modules的路径。 - 如果问题仍然存在，可以尝试使用
npm或yarn作为包管理工具，而不是pnpm。
6. 编译缓存问题
问题描述： 编译时可能会因为缓存问题导致编译失败或结果不正确。
解决方法： 清除编译缓存，重新编译项目。在 HBuilderX 中，可以通过以下步骤清除缓存：
- 打开 HBuilderX。
- 点击菜单栏中的
运行->清除缓存->清除所有缓存。 - 重新编译项目。
7. pnpm 版本问题
问题描述：
不同版本的 pnpm 可能会有不同的行为，导致编译错误。
解决方法：
确保使用最新版本的 pnpm。你可以通过以下命令更新 pnpm：
npm install -g pnpm[@latest](/user/latest)