vue3打包lib的问题，Cannot read properties of undefined (reading 'pushScopeId')

Question

vue3使用webpack5打包lib，打包后报错 Cannot read properties of undefined (reading 'pushScopeId')，无法访问打包文件

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ,具体如下：
这个错误通常是因为 Vue 的版本过低导致的，可能需要更新 Vue 的版本或者升级 Vue 相关的依赖库。在 Vue 3 中，pushScopeId 是编译器的一个内部方法，用于编译模板，并在模板中保留局部作用域信息。

可以尝试以下步骤来解决问题：

1. 确认 Vue 的版本是否是 3.x 版本。
2. 检查 package.json 中 Vue 相关的依赖版本是否都是最新的。
3. 如果使用了 Vue 的 CLI 工具来创建项目，可以尝试重新安装依赖或者升级工具版本。
4. 如果以上方法都没有解决问题，可以考虑尝试手动升级 Vue 相关依赖库或者查看相关依赖库是否存在兼容性问题。

---

如果以上回答对您有所帮助，望采纳～谢谢

Answer 2

该回答引用GPTᴼᴾᴱᴺᴬᴵ
这个错误可能是由于使用的 Vue 版本和 Vue Loader 版本不兼容导致的。

Vue Loader 是用于编译 Vue 单文件组件的工具，它的版本需要和 Vue 版本兼容才能正常工作。

解决方法：

1. 升级或降级 Vue 版本，使其和 Vue Loader 版本兼容。

2. 将 Vue Loader 的版本降低到和 Vue 版本兼容的版本。具体可查看 Vue Loader 和 Vue 版本的兼容矩阵表。

3. 在 Vue Loader 的配置中添加选项 compilerOptions，将其中的 isCustomElement 属性设置为 tag => tag.startsWith('app-')，即只有以 app- 开头的标签才会被认为是自定义标签。这个选项可以避免 Vue Loader 识别到第三方组件库中的自定义标签而导致的问题。

示例代码：

// webpack.config.js

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.vue$/,
        use: 'vue-loader'
        options: {
          compilerOptions: {
            isCustomElement: tag => tag.startsWith('app-')
          }
        }
      }
    ]
  },
  plugins: [
    // ...
    new VueLoaderPlugin()
  ]
}

Answer 3

请问你解决了吗，我也遇到了同样的问题

Answer 4

• 关于该问题，我找了一篇非常好的博客，你可以看看是否有帮助，链接：【vue3项目】解决 “TypeError: Cannot read properties of undefined (reading ‘xxx‘)“