TypeError: Cannot read properties of null (reading 'isCE') - Custom Component Library

Question

I am having trouble building a custom component library for Vue 3 using ViteJS and NPM. I have included a basic illustration of my issue below, can someone please tell me what I am doing wrong or point me in the right direction, I have been stuck on this for 2 days :(.

My folder structure:

• dist
• node_modules
• src
  • components
    • Paragraph.vue
  • paragraph.js
• .gitignore
• package.json
• README.md
• 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);
  },
};

Paragraph.vue

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

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

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

When I run npm run build it works successfully and creates the correct files, I then include the es file into my test Vue project as a plugin.

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

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

The component doesn't work when used liked this.

<Paragraph>Hello World 2!</Paragraph>

The following error is reported back in the console.

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

I have looked into the issue and it seems a lot of people have had the same issue, although I cannot find a fix for myself.

I have tried the solutions mentioned in the following links:

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')"

Neither of the solutions mentioned here are working.

Can someone please help!!!

I have noticed if I exclude the <slot /> it works fine, but slots are vital to components.

I know it is bundling the Vue code into the build file, but how do I stop it doing so.

Thanks in advance.

Answer 1

I've also encountered this very frustrating issue. According to this answer, it is caused by having Vue imported from multiple packages instead of using just one singleton, as you do suspect.

Presumably, you are building your consumer application using Vite. In that case, setting the dedupe option in its vite.confg.js should solve it.

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

Answer 2

I've also encountered this issue :) the problem is you have two distinct copies of the Vue package being used

just read this and you will find your answer. for me, changing the workspace to yarn was the solution.

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