首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >TypeError:无法读取null属性(读取'isCE') -自定义组件库

TypeError:无法读取null属性(读取'isCE') -自定义组件库
EN

Stack Overflow用户
提问于 2022-04-28 00:32:24
回答 3查看 4.1K关注 0票数 2

我在使用ViteJS和NPM为Vue 3构建自定义组件库时遇到了问题。我在下面列出了我的问题的基本说明,能不能有人告诉我我做错了什么,或者指出了正确的方向,我已经被困在这个问题上2天了。

我的文件夹结构:

  • dist
  • node_modules
  • 钢筋混凝土
    • 组件
      • Paragraph.vue

代码语言:javascript
运行
复制
- paragraph.js
  • .gitignore
  • package.json
  • README.md
  • vite.config.js

package.json

代码语言:javascript
运行
复制
{
  "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

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
import Paragraph from './components/Paragraph.vue';

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

Paragraph.vue

代码语言:javascript
运行
复制
<script setup>
  console.log('Test');
</script>

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

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

当我成功地运行npm run build并创建正确的文件时,我将es文件作为插件包含到我的test项目中。

代码语言:javascript
运行
复制
import { createApp } from 'vue'
import App from './App.vue'
import Paragraph from '../../paragraph/dist/paragraph.es.js'

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

该组件在使用时不工作,就像这样。

代码语言:javascript
运行
复制
<Paragraph>Hello World 2!</Paragraph>

下面的错误报告在控制台中。

代码语言:javascript
运行
复制
TypeError: Cannot read properties of null (reading 'isCE')

我研究过这个问题,似乎很多人都有同样的问题,虽然我自己找不到解决办法。

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

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

将自制的Vue 3库导入Vue 3项目时:“未登录TypeError:无法读取null属性(读取'isCE')”

这里提到的解决方案都不起作用.

有人能帮忙吗!

我已经注意到,如果不包括<slot />,它可以正常工作,但是插槽对于组件来说是至关重要的。

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

提前谢谢。

EN

回答 3

Stack Overflow用户

发布于 2022-05-03 06:55:07

我也遇到过这个非常令人沮丧的问题。根据这个答案的说法,这是由从多个包导入Vue而不是像您所怀疑的那样只使用一个单例造成的。

想必,您正在使用Vite构建您的消费者应用程序。在这种情况下,在其dedupe中设置vite.confg.js选项可以解决这个问题。

代码语言:javascript
运行
复制
resolve: {
  dedupe: [
    'vue'
  ]
},
票数 4
EN

Stack Overflow用户

发布于 2022-05-12 10:17:15

我也遇到了这个问题:)问题是您使用的Vue包有两个不同的副本

只要读一下这个,你就会找到答案。对我来说,改变工作空间成纱是解决方案。

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

票数 0
EN

Stack Overflow用户

发布于 2022-06-07 22:09:55

尝试删除node_modules + yarn.lock,然后重新安装包装(纱线)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72036673

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档