[email protected]，发布到线上后发现引入了`@vue/composition-api`导致页面报错

[defghy]

开发时没问题，build发布线上后，发现引入了@vue/composition-api

项目架构：pnpm workspace 项目 组件引入

• 使用 TinyVueSingleResolver
• 使用public-hoist-pattern[]=@opentiny/*将组件提升到根目录 vite.config.ts中增加配置TINY_MODE: 'pc'

引入时刻

导致了报错如下

环境 node@22 pnpm@9 [email protected] @opentiny/[email protected] vite@5

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Title: [email protected]. After posting it online, it was found that the introduction of @vue/composition-api caused the page to report an error.

[petercat-assistant[bot]]

在发布到线上后遇到 @vue/composition-api 引入导致的报错问题，可能是由于在构建过程中某些依赖被错误地引入或配置不当导致的。以下是一些可能的解决方案和建议：

1. 检查依赖配置: 确保 @vue/composition-api 没有被错误地添加到项目的依赖中。可以在 package.json 中查看是否有相关的依赖项。

2. 检查构建配置: 确保 vite.config.ts 中的配置正确无误，特别是 TINY_MODE: 'pc' 是否符合项目需求。

3. pnpm 配置: 确保 pnpm workspace 的配置正确，特别是 public-hoist-pattern[]=@opentiny/* 是否正确地将组件提升到根目录。

4. 组件引入方式: 使用 TinyVueSingleResolver 时，确保其配置和使用方式符合官方文档的要求。

5. 调试构建输出: 可以通过调试构建输出，查看是否有不必要的依赖被引入，或者是否有其他错误信息可以帮助定位问题。

如果以上方法无法解决问题，建议检查是否有相关的已知问题或补丁可以应用。我可以帮助你在 opentiny/tiny-vue 的 issue 列表中搜索是否有类似的问题。请让我知道是否需要这样做。

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

After posting it online, I encountered an error problem caused by the introduction of @vue/composition-api, which may be caused by some dependencies being incorrectly introduced or improperly configured during the build process. Here are some possible solutions and suggestions:

1. Check dependency configuration: Make sure @vue/composition-api is not added to the project's dependencies incorrectly. You can check whether there are related dependencies in package.json.

2. Check the build configuration: Make sure the configuration in vite.config.ts is correct, especially if TINY_MODE: 'pc' meets the project requirements.

3. pnpm configuration: Make sure that the pnpm workspace is configured correctly, especially whether public-hoist-pattern[]=@opentiny/* correctly promotes the component to the root directory.

4. Component introduction method: When using TinyVueSingleResolver, make sure that its configuration and usage comply with the requirements of the official documentation.

5. Debug build output: You can use debug build output to see if unnecessary dependencies are introduced, or if there are other error messages that can help locate the problem.

If the above method cannot solve the problem, it is recommended to check whether there are related known issues or patches that can be applied. I can help you search for the issue list of opentiny/tiny-vue if there are similar questions. Please let me know if this is necessary.

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[petercat-assistant[bot]]

It seems like you've encountered an error related to the @vue/composition-api after deploying your application. The suggestions provided earlier are aimed at helping you troubleshoot and resolve this issue. If you would like, I can assist you in searching the issue list of opentiny/tiny-vue to see if there are any similar issues or known solutions. Please let me know if you would like me to proceed with this search.

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[defghy]

问题定位：由 @opentiny/vue-common 引入

尝试开发与打包移除掉@vue/composition-api

vite.config.ts如下配置

{
  resolve: {
    alias: [
      {
        find: '@vue/composition-api',
        replacement: false,
      },
    ],
  },
  build: {
    rollupOptions: {
      // 告诉打包工具 在external配置的 都是外部依赖项  不需要打包
      external: ['@vue/composition-api'],
    },
  },
}

定位到包引入为止，报错如下

报错位置为：加载composition-api时，如果window.Vue有值，则自动挂载，如下

我们的项目由于external包使用了window.Vue方式，移除window.Vue，页面可以正常加载

todo: vue-common包源码追查

[defghy]

看起来现在打包只打了2个版本

这样虽然vue-common有2.7的兼容代码

但是默认打包命令会忽略掉这个文件夹。所以[email protected]使用的vue-common其实是[email protected]的包

感觉如果需要一个完美兼容2.7的包，需要自己打包带上参数2.7才行

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

It seems that only 2 versions have been packaged now

This way, although vue-common has 2.7 compatible code

However, the default packaging command will ignore this folder. So the vue-common used by [email protected] is actually a [email protected] package

I feel that if you need a perfectly compatible 2.7 package, you need to pack it with parameter 2.7 by yourself.

[defghy]

临时解决方案，从3.22.0打包了一个2.7版本的@opentiny/vue-common: https://www.npmjs.com/package/@yuhufe/opentiny-vue-common?activeTab=versions

如果你是用的是pnpm，package.json填加如下配置

  "pnpm": {
    "overrides": {
      "@opentiny/vue-common": "npm:@yuhufe/[email protected]"
    }
  }

问题应该就解决了

PS：@opentiny/vue-common有一个vue2.7-latest版本

但是这个版本是2年前的了，我试了下会报错

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Temporary solution, packaged a 2.7 version of @opentiny/vue-common from 3.22.0: https://www.npmjs.com/package/@yuhufe/opentiny-vue-common?activeTab=versions

If you are using pnpm, fill in the following configuration package.json

  "pnpm": {
    "overrides": {
      "@opentiny/vue-common": "npm:@yuhufe/[email protected]"
    }
  }

The problem should be solved

PS: @opentiny/vue-common has a vue2.7-latest version

But this version is from 2 years ago. I will get an error after trying it.

[defghy]

2.7的vue-common对radio-button有bug，换一种方案，把composition-api指向空对象

{
  find: '@vue/composition-api',
  replacement: resolve(process.cwd(), '../../packages/aweb-test/utils/mocks.ts'),
}

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

2.7's vue-common has a bug with radio-button. Change the solution and point composition-api to an empty object

{
  find: '@vue/composition-api',
  replacement: resolve(process.cwd(), '../../packages/aweb-test/utils/mocks.ts'),
}