vue.js - 类型错误 : Cannot read properties of null (reading 'isCE' ) - Custom Component Library

Question

我在使用 ViteJS 和 NPM 为 Vue 3 构建自定义组件库时遇到问题。我在下面包含了我的问题的基本说明，有人可以告诉我我做错了什么或指出正确的方向吗，我已经坚持了 2 天:(。

我的文件夹结构:

• 分布
• 节点模块
• 来源
  • 组件
    • 段落.vue
  • 段落.js
• .gitignore
• package.json
• 自述文件
• vite.config.js

package.json

{
  "name": "paragraph",
  "private": true,
  "version": "0.0.0",
  "description": "The paragraph test component.",
  "main": "./dist/paragraph.umd.js",
  "module": "./dist/paragraph.es.js",
  "exports": {
    ".": {
      "import": "./dist/paragraph.es.js",
      "require": "./dist/paragraph.umd.js"
    },
    "./dist/style.css": "./dist/style.css"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "vite": "^2.9.5"
  }
}

vite.config.js

import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    lib: {
      entry: fileURLToPath(new URL('./src/paragraph.js', import.meta.url)),
      name: 'Paragraph',
      fileName: (format) => `paragraph.${format}.js`,
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        },
      },
    },
  },
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

paragraph.js

import Paragraph from './components/Paragraph.vue';

export default {
  install: (app) => {
    app.component('Paragraph', Paragraph);
  },
};

段落.vue

<script setup>
  console.log('Test');
</script>

<template>
  <p class="paragraph">
    <slot />
  </p>
</template>

<style>
  .paragraph
  {
      color: black;
  }
</style>

当我运行 npm run build它成功运行并创建了正确的文件，然后我将 es 文件作为插件包含到我的测试 Vue 项目中。

import { createApp } from 'vue'
import App from './App.vue'
import Paragraph from '../../paragraph/dist/paragraph.es.js'

createApp(App).use(Paragraph).mount('#app')

像这样使用时组件不起作用。

<Paragraph>Hello World 2!</Paragraph>

控制台返回如下错误。

TypeError: Cannot read properties of null (reading 'isCE')

我已经调查了这个问题，似乎很多人都有同样的问题，尽管我自己找不到解决办法。

我已经尝试了以下链接中提到的解决方案:

https://github.com/vuejs/core/issues/4344

When Importing Self Made Vue 3 Library Into Vue 3 Project: "Uncaught TypeError: Cannot read properties of null (reading 'isCE')"

此处提到的两种解决方案均无效。

有人可以帮忙吗!!!

我注意到如果我排除了 <slot />它工作正常，但插槽对组件至关重要。

我知道它将 Vue 代码捆绑到构建文件中，但我该如何阻止它这样做。

提前致谢。

Answer 1

我也遇到过这个非常令人沮丧的问题。根据this answer ，这是由于从多个包导入 Vue 而不是像您怀疑的那样只使用一个单例引起的。

假设您正在使用 Vite 构建您的消费者应用程序。在这种情况下，在其 vite.confg.js 中设置 dedupe 选项应该可以解决它。

resolve: {
  dedupe: [
    'vue'
  ]
},