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

fatawesome · 2021-08-15T14:14:19Z

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:

Host content
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.

The text was updated successfully, but these errors were encountered:

LinusBorg · 2021-08-15T15:07:40Z

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 · 2021-08-15T15:30:18Z

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 · 2021-08-15T15:45:03Z

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

lonczynski · 2021-08-26T19:12:19Z

@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 · 2021-08-26T21:12:42Z

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 · 2021-08-28T21:37:04Z

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.

ghost · 2021-09-03T15:36:28Z

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 · 2021-09-16T14:29:37Z

use webpack resolve vue to one package reference.

rhmkstk · 2021-12-08T13:20:43Z

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

ejirocodes · 2022-01-27T13:38:51Z

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 }

tangjiahui-cn · 2022-02-08T06:23:01Z

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

941477276 · 2022-02-16T07:32:18Z

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 }

did you solve this problem?

tangjiahui-cn · 2022-02-17T09:36:54Z

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 }
did you solve this problem?

I have 2 ideas that you can try.

(1) config vite ssr。 like this:
export default defineConfig({...., ssr:{external: ["vue"]} ,.....}).
vite

(2)or, write a single file to use rollup build.
export default packagesInfo.map(({name: packageName}) => { return { input: getInput(packageName), output: ["umd", "es"].map((format) => ({ format, name: getName(packageName, format), file: getFile(packageName, format), globals: { vue: "vue" } })), plugins: [ typescript({ module: "ESNext" }), resolve(), aliasResolve(alias), // fixCE(), json(), vuePlugin(), babel({ extensions: [...DEFAULT_EXTENSIONS, "ts", "tsx"], babelHelpers: "bundled", exclude: "node_modules/**" }), postcss({ minimize: true, extract: "index.css", extensions: [".css", ".less", ".scss"] }), terser() ], external: ["vue"] } })
rollup.lib.js

rhmkstk · 2022-02-22T12:05:50Z

Hello,

thanks for your answer, after i try several solution i reintall project with newer vite version and it fix the issue

mszkb · 2022-02-26T18:17:25Z

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

webarthur · 2022-02-27T18:17:51Z

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

uoau · 2022-03-07T13:19:16Z

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 }
did you solve this problem?

I solved.

linuschinsay · 2022-05-25T03:34:56Z

use webpack resolve vue to one package reference.

how do I do that?

huntJs · 2022-06-05T09:06:23Z

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

MaxLeiter · 2022-06-06T23:31:34Z

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

cheny-github · 2022-06-17T10:55:08Z

nice dude

xu-Aurora · 2022-07-11T07:21:55Z

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

I have the same problem, did you solve it?

941477276 · 2022-07-11T07:28:11Z

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

I have the same problem, did you solve it?

Just remove vue from dependencies in package.json in your public component library and add vue dependencies in devDependencies

bneeland · 2022-07-11T16:41:18Z

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.

Eug620 · 2022-08-31T10:30:15Z

Brother, have you solved it? The micro front end I tested also encountered this problem. When the father and son are vite + vue3 first load no problem, the switch encountered this situation, if you finally solve it, please tell me

vuetifyjs/vuetify#4068 (comment) vuejs/core#4344 (comment)

Rusinas · 2022-12-20T20:03:00Z

Same problem with custom UI library built with Vite and Vue 3 which I'm trying to use in my Nuxt app. The error is in the component which uses onMounted() hook:

[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

[Vue warn]: onBeforeUnmount is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

[Vue warn]: Unhandled error during execution of render function                                                                                   00:00:45  
  at <Dropdown dropdown-max-height=300 dropdown-min-width=60 disabled=false >
[nitro] [dev] [unhandledRejection] TypeError: Cannot read properties of null (reading 'isCE')

Maybe this warns are not related, but when I don't import this exact component, everything is fine.

None of the solutions above helps :(

flozero · 2023-01-29T22:31:13Z

why this has been closed even if the error happen all the time ? we should have hard tests on that as it seems people have it a lot when using module federation or library components

none of the solutions works unfortunately with latest vue version + vite 4

tangjiahui-cn · 2023-01-30T10:07:37Z

components

'isCE' happen because which has two differece vue verdion. you can try use 'external' to exclude another vue in components.

zongzi531 · 2023-02-01T08:46:43Z

why this has been closed even if the error happen all the time ? we should have hard tests on that as it seems people have it a lot when using module federation or library components

none of the solutions works unfortunately with latest vue version + vite 4

@flozero You can try this config set at vue@3.2.x and vite@4

{
  resolve: {
    alias: {
      vue: path.resolve('your current vue folder', 'dist', 'vue.runtime.esm-bundler.js')
    }
  }
}

I am set this config solved my problem.

razorness · 2023-03-20T18:37:38Z

Take care what internal method from @vue/core you are using. In my case, I used the helper renderSlot() which not only bloated the bundle size of my lib by 50 kb but also caused this error.

lisilinhart · 2023-05-05T08:55:25Z

For me the error disappeared when I installed the dependency in the root project with npm instead of yarn. I also setup the lib similar to this vite configuration (https://github.com/ferryanggriawan/vue3-plugin-boilerplate/blob/master/vite.config.ts) and tried all the things recommended on this thread, but really only switching to npm on the installation made the error disappear.

03251112 · 2023-08-24T08:01:50Z

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
	resolve: {
		alias: {
			packages: path.resolve(__dirname, "packages"),
			examples: path.resolve(__dirname, "examples"),
			mixins: path.resolve(__dirname, "mixins"),
		},
	},
	build: {
		//打包后文件目录
		outDir: "lib",
		//压缩
		minify: false,
		lib: {
			entry: path.resolve(__dirname, "/packages/index.js"),

			formats: ["es"],
			name: "index",
			fileName: "index",
		},
		rollupOptions: {
			external: ["vue"],
			// resolve: {
			// 	dedupe: ["vue"],
			// },
			output: {
				globals: {
					vue: "Vue",
				},
			},
		},
	},
	plugins: [
		vue(),
		AutoImport({
			resolvers: [ElementPlusResolver()],
		}),
		Components({
			resolvers: [ElementPlusResolver({ importStyle: "sass" })],
		}),
	],
	css: {
		preprocessorOptions: {
			scss: {
				additionalData: `@use "./styles/element/index.scss" as *;`,
			},
		},
	},
});

解决了嘛我是这样写的还是报错

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

LinusBorg closed this as completed Aug 15, 2021

ghost mentioned this issue Sep 1, 2021

component with a slot from a component library is crashing the main vue application #4478

Closed

transtone mentioned this issue Sep 23, 2021

请锁定依赖的vue版本 jd-opensource/nutui#681

Closed

Kurogoma4D mentioned this issue Nov 13, 2021

Build fails when using local custom theme. slidevjs/slidev#405

Closed

rocwang mentioned this issue Nov 22, 2021

[BUG] tiles are still rendered as whitespace when the content length < pageSize rocwang/vue-virtual-scroll-grid#152

Closed

haoqunjiang mentioned this issue Dec 15, 2021

Unable to support functions such as "optional chain" in QQ browser 10 or chrome 70 vitejs/vite#5222

Closed

7 tasks

ybom77 mentioned this issue Jan 13, 2022

vue3 host 与 remote vue 版本冲突的问题 originjs/vite-plugin-federation#118

Closed

jackyyyy-dev mentioned this issue Feb 8, 2022

遇到了一个重复调用vue的问题 fuchengwei/vue-form-create#20

Open

lorisleiva mentioned this issue Feb 8, 2022

"Wallet not initialized" error lorisleiva/solana-wallets-vue#2

Closed

greegus mentioned this issue May 3, 2022

Vue3 + Vite ， Cannot read properties of null (reading 'isCE') jbaysolutions/vue-grid-layout#666

Closed

antony-k1208 mentioned this issue Jun 9, 2022

while collecting story [...]/.histoire/plugins/tailwind-tokens/Tailwind.story.vue:6084:57 histoire-dev/histoire#132

Closed

6 tasks

souvenir-lee mentioned this issue Jun 22, 2022

Version 6.0.0-beta.2 fails at render when used as a external dependency iamstevendao/vue-tel-input#279

Closed

quamsta mentioned this issue Jun 29, 2022

4.x button updates uiowa/uids#716

Merged

andreemic mentioned this issue Jul 1, 2022

add ssr support DannyFeliz/vue-tweet#5

Closed

fi3ework mentioned this issue Jul 19, 2022

crash on the first load of examples/minimal vuejs/vitepress#1016

Closed

3 tasks

nntai mentioned this issue Aug 24, 2022

Move vue to peerDependencies nntai/vue-command-palette#20

Closed

4 tasks

fritx added a commit to fritx/vue-at that referenced this issue Sep 2, 2022

switching to vite !! + umd support -- #137

dce37bc

vuetifyjs/vuetify#4068 (comment) vuejs/core#4344 (comment)

fritx added a commit to fritx/vue-at that referenced this issue Sep 2, 2022

switching to vite !! + umd support -- #137

99fd47b

vuetifyjs/vuetify#4068 (comment) vuejs/core#4344 (comment)

fritx added a commit to fritx/vue-at that referenced this issue Sep 2, 2022

switching to vite !! + umd support -- #137

972130e

vuetifyjs/vuetify#4068 (comment) vuejs/core#4344 (comment)

mskr mentioned this issue Oct 24, 2022

Vue 3 Component Resolution mskr/myVueJS#1

Open

fj-auto mentioned this issue Nov 12, 2022

component with <slot> and loaded via lib module is "Uncaught (in promise) TypeError: Cannot read properties of null (reading 'isCE')" #7115

Closed

zsh2401 mentioned this issue Nov 15, 2022

Cannot read properties of null (reading 'isCE') amirkian007/vue-awesome-sidebar#2

Open

AubSs mentioned this issue Dec 16, 2022

TypeError: Cannot read properties of null (reading 'isCE') NathanAP/vue-google-maps-community-fork#30

Closed

suterma mentioned this issue Mar 9, 2023

Not working properly suterma/vue-peaks#2

Closed

fabiiomiiguel mentioned this issue Mar 21, 2023

[Bug] Version 0.13.0 breaks dependencies optimizer electron-vite/vite-plugin-electron-renderer#35

Closed

seyfer mentioned this issue Jun 1, 2023

It's not working with Vue3 mauricius/vue-draggable-resizable#326

Closed

xstxhjh mentioned this issue Sep 5, 2023

How to configure Vite? vuejs/repl#154

Closed

github-actions bot locked and limited conversation to collaborators Sep 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

fatawesome commented Aug 15, 2021

LinusBorg commented Aug 15, 2021 •

edited

Loading

fatawesome commented Aug 15, 2021

fatawesome commented Aug 15, 2021

lonczynski commented Aug 26, 2021

chirpycora commented Aug 26, 2021

mszkb commented Aug 28, 2021

ghost commented Sep 3, 2021

Jcanno commented Sep 16, 2021

rhmkstk commented Dec 8, 2021 •

edited

Loading

ejirocodes commented Jan 27, 2022

tangjiahui-cn commented Feb 8, 2022

941477276 commented Feb 16, 2022

tangjiahui-cn commented Feb 17, 2022

rhmkstk commented Feb 22, 2022

mszkb commented Feb 26, 2022 •

edited

Loading

webarthur commented Feb 27, 2022

uoau commented Mar 7, 2022

linuschinsay commented May 25, 2022

huntJs commented Jun 5, 2022 •

edited

Loading

MaxLeiter commented Jun 6, 2022

cheny-github commented Jun 17, 2022

xu-Aurora commented Jul 11, 2022

941477276 commented Jul 11, 2022

bneeland commented Jul 11, 2022 •

edited

Loading

Eug620 commented Aug 31, 2022

Rusinas commented Dec 20, 2022

flozero commented Jan 29, 2023 •

edited

Loading

tangjiahui-cn commented Jan 30, 2023

zongzi531 commented Feb 1, 2023

razorness commented Mar 20, 2023

lisilinhart commented May 5, 2023

03251112 commented Aug 24, 2023

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

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

Comments

fatawesome commented Aug 15, 2021

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

LinusBorg commented Aug 15, 2021 • edited Loading

fatawesome commented Aug 15, 2021

fatawesome commented Aug 15, 2021

lonczynski commented Aug 26, 2021

chirpycora commented Aug 26, 2021

mszkb commented Aug 28, 2021

ghost commented Sep 3, 2021

Jcanno commented Sep 16, 2021

rhmkstk commented Dec 8, 2021 • edited Loading

ejirocodes commented Jan 27, 2022

tangjiahui-cn commented Feb 8, 2022

941477276 commented Feb 16, 2022

tangjiahui-cn commented Feb 17, 2022

rhmkstk commented Feb 22, 2022

mszkb commented Feb 26, 2022 • edited Loading

webarthur commented Feb 27, 2022

uoau commented Mar 7, 2022

linuschinsay commented May 25, 2022

huntJs commented Jun 5, 2022 • edited Loading

MaxLeiter commented Jun 6, 2022

cheny-github commented Jun 17, 2022

xu-Aurora commented Jul 11, 2022

941477276 commented Jul 11, 2022

bneeland commented Jul 11, 2022 • edited Loading

Eug620 commented Aug 31, 2022

Rusinas commented Dec 20, 2022

flozero commented Jan 29, 2023 • edited Loading

tangjiahui-cn commented Jan 30, 2023

zongzi531 commented Feb 1, 2023

razorness commented Mar 20, 2023

lisilinhart commented May 5, 2023

03251112 commented Aug 24, 2023

LinusBorg commented Aug 15, 2021 •

edited

Loading

rhmkstk commented Dec 8, 2021 •

edited

Loading

mszkb commented Feb 26, 2022 •

edited

Loading

huntJs commented Jun 5, 2022 •

edited

Loading

bneeland commented Jul 11, 2022 •

edited

Loading

flozero commented Jan 29, 2023 •

edited

Loading