Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot read property 'isCE' of null in host component with slot using Module Federation #10545

Open
alghifarifikri opened this issue Mar 19, 2024 · 1 comment

Comments

@alghifarifikri
Copy link

alghifarifikri commented Mar 19, 2024

Vue version

3.4.15

Link to reproduction

https://github.com/alghifarifikri/module-federation-poc.git

Steps to reproduce

Clone Repository, then :

  1. cd host, npm install / yarn install, then npm run dev / yarn dev to running host project (Using Nuxt JS)
  2. cd remote, npm install / yarn install, then npm run dev / yarn dev to running remote project (Using Vue JS)

What is expected?

I create Carousel component in remote project, then I try to share with Module Federation.
When host project access Carousel it's should be running well.

What is actually happening?

host project Error Cannot read property 'isCE' of null error because tags <slot> in component Carousel.
image

System Info

No response

Any additional comments?

I've read several references, but haven't been able to fix them.
#4344
#7115
nuxt/nuxt#13117
https://stackoverflow.com/questions/71063992/when-importing-self-made-vue-3-library-into-vue-3-project-uncaught-typeerror
https://stackoverflow.com/questions/72036673/typeerror-cannot-read-properties-of-null-reading-isce-custom-component-li

@bahuang1
Copy link

remote配置
federation({ name: "shared-component", filename: "remoteEntry.js", exposes: { "./TestButton": "./src/components/test-button.vue", "./validate": "./src/utils/validate.ts", }, shared: ['vue'] }),
host配置:
proxy: { '/node_modules': { target: 'http://localhost:3333', changeOrigin: false, rewrite: path =>/uepsuftpweb/${path}} }, plugins: [ federation({ name: "host-app", filename: "remoteEntry.js", remotes: { "shared_component": "http://localhost:4173/assets/remoteEntry.js" }, shared: ['vue'] }) ]
可以解决上述报错问题,但是模块联邦共享组件在 host端使用时,内部响应式数据的响应式丢失,dep属性值为undefined

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants