The Cannot read properties of undefined (reading 'default') error occurs on an attempt to import remote with a shared vue library that is used in a commonJS module (devextreme-vue)

[artem-kurchenko]

Versions

• "vue": "^3.2.37",
• "@originjs/vite-plugin-federation": "1.1.7",
• "@vitejs/plugin-vue": "^3.0.1",
• "node v16.15.1"

  Reproduction

Example: https://github.com/artem-kurchenko/module-federation-devextreme-vue

Steps to reproduce

Open terminals for both host and remote directory and run on both:

npm install
npm run build

open a website for host url at http://localhost:5000

What is Expected?

The page should display a Button

What is actually happening?

The page throws the "Cannot read properties of undefined (reading 'default')" error

 at getAugmentedNamespace (__federation_expose_Helloworld_af96679d.js:9:13)
    at __federation_expose_Helloworld_af96679d.js:14288:33

Additional information:

Having checked the code I see that vue_runtime_esmBundler is always undefined in the very first import

const {
vue_runtime_esmBundler, ref,watch,resolveComponent,
openBlock,
createElementBlock,
createElementVNode:createBaseVNode,
toDisplayString,
createVNode:createVNode$1, 
pushScopeId,popScopeId,createTextVNode:createTextVNode$1} = await importShared('vue')

Then, this logic affects the code of DxButton

const require$$0 = /*@__PURE__*/getAugmentedNamespace(vue_runtime_esmBundler);
.....
var VueType$1 = __importStar$3(require$$0);
var Vue$1 = VueType$1.default || VueType$1;

Could you please help us understand whether it a module format (CommonJS) or some settings are missing for this particular case.

[flyfishzy]

The dist __federation_shared_vue.js in 'hots' and 'remote' have a slight difference. In host it has not export vue_runtime_esmBundler because it's not used. If you add DxButton in host code, the project can running properly.

import { DxButton } from 'devextreme-vue/button';

[ruleeeer]

@artem-kurchenko I clone the project, the reason for the problem is that devextreme-vue import vue using require (cjs syntax)

which causes rollup to add an extra cjs transformed export when packaging the remote,otherwise devextreme-vue cannot work.

but host does not use cjs syntax to import vue, so it will not add an extra export

[ruleeeer]

I haven't thought of a good way to deal with the problem yet, unless I add a cjs import on the host side as well

[artem-kurchenko]

Thank you for the explanation @ruleeeer . One more thing, do I understand correctly that now there is no way to somehow modify\patch Vite config for a project in vite.config.ts to overcome this issue?

[ruleeeer]

@artem-kurchenko sry,for the time being, in addition to https://github.com/originjs/vite-plugin-federation/issues/227#issuecomment-1207167441 I did not think of a better way

[saxjonas]

I've come across this issue too for other packages. What is the reason for this and is there any solve? I see this is marked as a bug but haven't received any feedback in a while.

[zhaohuanyuu]

i have the same error, comment out the share statement to return to normal

[wijionejs]

@ruleeeer, do I understand correctly that if there is a commonjs import of "react" somewhere in remote app then remote app generates additional import in the output? I've encountered an issue where my remote app uses zustand as a state manager, but there is a commonjs import (require("react"); in zustand source files and I'm getting this line in the output:

import { r as reactExports, g as getDefaultExportFromCjs } from './__federation_shared_react.js';

As a result, host app has to load react two times (I can see in Network tab that '/__federation_shared_react.js' is repeated twice) and, moreover, this reactExports is undefined.

There is an error in the console Error: Cannot read property useRef of undefined.