Nuxt2导入Vue-CLI构建的Vue2自定义组件库报错TypeError

问题描述 #

我用Vue CLI搭建了一个Vue组件库，在普通Vue CLI项目中可正常使用，但导入Nuxt项目（如pages/index.vue）时出现以下错误：

TypeError: Cannot read properties of undefined (reading 'call')
    at __webpack_require__ (my-ui-components.common.js?75f2:7584:1)
    at eval (my-ui-components.common.js?75f2:9788:1)
    at eval (my-ui-components.common.js?75f2:12878:1)
    at eval (my-ui-components.common.js?75f2:12880:1)
    at ./node_modules/my-ui-components/dist/my-ui-components.common.js (index.js:10:1)
    at __webpack_require__ (runtime.js:854:30)
    at fn (runtime.js:151:20)
    at eval (index.js?!./node_modules/ts-loader/index.js?!./node_modules/vue-loader/lib/index.js?!./pages/index.vue?vue&type=script&lang=ts&:5:80)
    at ./node_modules/babel-loader/lib/index.js?!./node_modules/ts-loader/index.js?!./node_modules/vue-loader/lib/index.js?!./pages/index.vue?vue&type=script&lang=ts& (index.js:11:1)
    at __webpack_require__ (runtime.js:854:30)

组件库核心配置 #

• 导出入口index.ts：

import ATag from './components/ATag.vue';
import AnotherThing from './components/AnotherThing.vue';
...

export {
  ATag,
  AnotherThing,
  ...
};

• package.json：

{
  "name": "my-ui-components",
  "scripts": {
    "build": "vue-cli-service build --target lib --name my-ui-components ./src/index.ts",
  },
  "main": "./dist/my-ui-components.common.js",
  "files": [
    "dist/*"
  ]
}

• Nuxt项目依赖引入：

"dependencies": {
  "my-ui-components": "git+ssh://git@bitbucket.org:my-account/my-ui-components.git",
}

• Nuxt中组件导入方式（pages/Index.vue）：

<script>
import { ATag, AnotherThing } from 'my-ui-components';
export default {
  ...
  components: {
    ATag,
    AnotherThing,
  }
  ...
}
</script>

解决方案 #

这个错误本质是组件库打包时的Vue依赖与Nuxt环境的Vue冲突，或打包格式不兼容Nuxt的构建流程，按以下步骤逐一修复：

1. 让组件库依赖宿主环境的Vue #

在组件库根目录创建vue.config.js，配置webpack不打包Vue，而是使用Nuxt提供的Vue实例：

module.exports = {
  configureWebpack: {
    externals: {
      vue: 'Vue'
    }
  }
}

重新构建组件库后发布，避免重复打包Vue导致的版本冲突。

2. 优化组件库的导出格式 #

在组件库的package.json中添加module字段，指向ES模块格式的打包文件，提升Nuxt的兼容性与tree-shaking支持：

{
  "main": "./dist/my-ui-components.common.js",
  "module": "./dist/my-ui-components.esm.js", // 添加该行
  "files": [
    "dist/*"
  ]
}

3. 调整Nuxt的构建配置 #

如果仍有问题，在Nuxt的nuxt.config.js中配置编译组件库，避免编译不兼容问题：

export default {
  build: {
    transpile: ['my-ui-components']
  }
}

4. 移除组件中不必要的Vue导入 #

单文件组件无需手动导入Vue，移除ATag.vue中的import Vue from 'vue'：

<script>
// 移除 import Vue from 'vue';
export default {
  name: 'a-tag',
  // ...其余代码
};
</script>

5. 完善TypeScript配置（可选） #

确保组件库的tsconfig.json生成类型声明，提升开发体验：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "declaration": true,
    "outDir": "./dist/types"
  }
}

并在package.json中添加类型入口：

{
  "types": "./dist/types/index.d.ts"
}

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