core: Cannot read property 'isCE' of null in remote component with slot using Module Federation

That’s because you have two distinct copies of the Vue package being used, one in each package.

Vue uses a global singleton to track the current rendering instance - having more than one copy included will inevitably lead to such issues.

Solution: configure project in a way that Al packages use that same package.

In yarn workspaces, this would work fine because Vue would be hoistws to the root’s node_modules.

Using the npm link is the primary reason as the host application would try to use the vue from the linked library. Add these two lines to the vue.config.js of the host application.

  chainWebpack(config) {
    config.resolve.symlinks(false)
    config.resolve.alias.set( 'vue', path.resolve('./node_modules/vue'))    
  },  

Refer to: https://github.com/vuejs/vue-next/issues/2064#issuecomment-797365133

Hi,

I am building a library with vue3 and vite, when i use the library if i use slot i got same issue, i tried the solutions in this thread but i can not fix the issue.

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

My vite config.js:

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import eslintPlugin from 'vite-plugin-eslint'
const path = require('path')

export default defineConfig({
  resolve: {
    alias:{
      '/@': path.resolve('./node_modules/vue')
    },
    preserveSymlinks: false
  },
  plugins: [
    eslintPlugin(),
    vue(),
  ],
  build: {
    lib: {
      entry: path.resolve(__dirname, './src/components/main.js'),
      name: 'LuiVue',
      fileName: (format) => `lui-vue.${format}.js`
    },
  },
  rollupOptions: {
    external: ['vue'],
    output: {
      globals: {
        vue: 'Vue',
      },
    },
  },
})

Hi,

I am building a library with vue3 and vite, when i use the library if i use slot i got same issue, i tried the solutions in this thread but i can not fix the issue.

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

My vite config.js:

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import eslintPlugin from 'vite-plugin-eslint'
const path = require('path')

export default defineConfig({
  resolve: {
    alias:{
      '/@': path.resolve('./node_modules/vue')
    },
    preserveSymlinks: false
  },
  plugins: [
    eslintPlugin(),
    vue(),
  ],
  build: {
    lib: {
      entry: path.resolve(__dirname, './src/components/main.js'),
      name: 'LuiVue',
      fileName: (format) => `lui-vue.${format}.js`
    },
  },
  rollupOptions: {
    external: ['vue'],
    output: {
      globals: {
        vue: 'Vue',
      },
    },
  },
})

@rhmkstk add this to your vite.config.ts

resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }, dedupe: ['vue'], // this line }

Adding the dedupe: ['vue'] to my vite.config.js solve the problem. Thanks!

I had this issue when trying to build a vue3 project with a library imported as a submodule.

I solved this by:

• Deleting yarn.lock files from both root project and submodule
• Deleting node_modules from both root project and submodule
• Deleting dist directory from both root project and submodule
• Moving Vue to a dev dependency in package.json within my submodule (I had Vue set as a dependency in my submodule)
• Setting the vue versions in both root project and submodule as exactly the same verison (3.2.37 in my case)
• Adding ['vue'] to resolve.dedupe to my vite.config.js file in the root project. For completeness, here is my vite config file:

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    dedupe: ['vue']
  },
})

• Running yarn install then yarn build in both root project and submodule

Then my submodule components used in my root project worked without this error.

Maybe all these steps weren’t necessarily needed; I would be interested to know if I my solution could be improved.

@fatawesome could you please tell us what was the solution? I am facing the same problem and I don’t know how to not conflict the two distinct copies of the Vue package. Thanks

@huntjs I have the same exact problem, so please report back if you make progress

if you build with rollup. please add “external: [“vue”]” in build config file.like this: export default { ... external: [ "vue" ], ... }

Same here; I have not found a way to work around this issue. I made sure that both packages were using the same Vue version (matching versions and hashes in their package-lock.json files) and the 'isCE' of null error is still persisting. I also tried disabling symlink resolution for node_modules, and that had no effect either.

I also met the same issue, the parent Application(vue3+vite2.0) share some common component to child Application, but if the common component exist slot , the child Application will throw an exception( vue3+ webpack5), In parent Application, i had config below

so who can help me to slove this problem

Using the npm link is the primary reason as the host application would try to use the vue from the linked library. Add these two lines to the vue.config.js of the host application.

  chainWebpack(config) {
    config.resolve.symlinks(false)
    config.resolve.alias.set( 'vue', path.resolve('./node_modules/vue'))    
  },  

Refer to: #2064 (comment)

After revising the same issue this week, this actual resolved the issue in a component-library and npm link scenario

use webpack resolve vue to one package reference.