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

[fatawesome]

Version

3.2.2

Reproduction link

https://github.com/fatawesome/vue-next-isce-issue

Steps to reproduce

Clone the repository, from root run yarn && lerna bootstrap && yarn start.
Navigate to http://localhost:3000.

What is expected?

On the page you should see two lines of text:

1. Host content
2. test remote component

What is actually happening?

Server crashes on renderSlot function with Cannot read property 'isCE' of null error.

---

Removing slot from remote component fixes the issue, but obviously we need slots in our code :)
Issue appears when building application on Module Federation architecture. We also use @telenko/node-mf package to fetch code in a universal manner, but I believe this lib cannot be a problem.

[LinusBorg]

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.

[fatawesome]

Sounds legit, thanks!
I will try messing with Module Federation configs (maybe forgot to mark package as singleton or smth) and let know if it helped.

[fatawesome]

Yep, that definitely helped. Thank you @LinusBorg :)

[lonczynski]

@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

[chirpycora]

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.

[mszkb]

Got the same issue. With vue 2 everything worked fine.
Adding my external library components with for example npm link and using in my external component I'll get
runtime-core.esm-bundler.js Uncaught TypeError: Cannot read property 'isCE' of null

Versions of vue and any other dependencies are exact the same and I use npm atm.

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)

[Jcanno]

use webpack resolve vue to one package reference.

[rhmkstk]

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',
      },
    },
  },
})