[Bug][Vue]: Uncaught (in promise) TypeError: Cannot read properties of null (reading 'isCE')

[imzisy]

Version

System:
    OS: MAC
  Browsers:
    Chrome.
  npmPackages:
    "@rsbuild/core": "^0.7.7",
    "@rsbuild/plugin-vue": "^0.7.7",

Details

Currently I'm using rsbuild with vue 3 plugin and getting this error.

and I have found this and I'm not sure if it is relater to the issue. I have disable the splitChunks optimization
splitChunks: {
vue: false,
router: false,
},
Which fixes the duplicate loading for vue but I'm still getting the error mentioned.

Cannot read properties of null (reading 'isCE')

Reproduce link

https://github.com/imzisy/rsbuild-vue-issue/tree/main

Reproduce Steps

yarn dev for both remote and host try to change any compoent and after that do refresh the browser and you shpuld be able to get the error.

for small project the error happen when you refresh the page but in bigger project the error happen while hot reload.

the error happens from rsbuild 0.7.x

[elliotwestlake]

Also seeing the same error with react.

[SoonIter]

I got it from stackoverflow's reply, which might be a multi-instance problem.

https://stackoverflow.com/questions/72036673/typeerror-cannot-read-properties-of-null-reading-isce-custom-component-li
vuejs/core#4344 (comment)

1. If the multi-instance problem is due to the 3rd dependencies in node_modules

you can set like this

// rsbuild.config.ts
source: {
	alias: {
		'vue': path.resolve(__dirname, 'node_modules', 'vue')
	}
}

rspack project might follow below

// rspack.config.ts
resolve: {
	alias: {
		'vue': path.resolve(__dirname, 'node_modules', 'vue')
	}
}

more information can be found in https://rsdoctor.dev/blog/topic/duplicate-pkg-problem

2. if the multi-instance problem is due to module federation, i think you might need to config the related configuration

https://module-federation.io/configure/shared.html#how-to-use-shared-dependencies

[imzisy]

I'm not sure if i'm doing anything worng but I'm still getting the same error

[SoonIter]

@imzisy I cloned your demo, but I can't reproduce it.

https://github.com/imzisy/rsbuild-vue-issue/blob/51219e4d9991d51d00baf6dfcfcafc5124f6ed01/provider/rsbuild.config.ts#L49-L57

      appendPlugins([
        new ModuleFederationPlugin({
          name: `ASSET_REMOTE`,
          filename: `remoteEntry.js`,
          exposes: {
            "./AppIndex": "./src/views/AppIndex",
            "./store": "./src/store/index",
          },
          shared: {
            // vue: {
            //   singleton: true,
            //   requiredVersion: dependencies.vue,
            // },
            // vuex: {
            //   singleton: true,
            //   requiredVersion: dependencies.vuex,
            // },
          },
        }),
      ]);

I think the reason for this problem is that your provider and consumer share the same vue instance, but the semantic version span is too large. You can try to make it smaller.
:D Moreover, this problem has nothing to do with Rsbuild. I think it is related to module federation. If it is okay, I will transfer the issue to the mf repository.

[imzisy]

@SoonIter Why is it breaking if it is too large? Do you have any idea? How did you measure that it is too large?

[SoonIter]

@SoonIter if it is too large why it is breaking ? any idea ?

try to use the same vue version

"dependencies": {
	 "vue": "3.2.31",
	 "vuex": "4.0.2"
}

[imzisy]

@SoonIter if it is too large why it is breaking ? any idea ?

try to use the same vue version

"dependencies": {
	 "vue": "3.2.31",
	 "vuex": "4.0.2"
}

I tried using the same version, but it still didn't work. Afrer I also changed a component and manually refreshed the page I have seen the same error .

[elliotwestlake]

Seems there is already an issue that looks similar, I have posted my reproduction in there

module-federation/core#2617

[mrcwl]

When I use rsbuild v0.6.15 everything works fine.
I'm not sure if it's a issues with rsbuild or module federation

[imzisy]

now I tried using 0.7.9 looks ok, I hope someone can explain to us how this was fixed.

[chenjiahan]

Rspack fixed some MF issues in 0.7.4 and 0.7.2, which may be related to the current issue:

• [Bug]: HMR fails with RSPack v0.7.1 rspack#6740
• fix(mf): avoid error __webpack_require__.f.consume after hmr rspack#6796

For anyone who encounters MF issues, first upgrade to the latest version of Rsbuild (currently v0.7.9)