Got a promise instead of imported object (after the last alpha update) #47

smelukov · 2024-08-11T09:33:16Z

I have a code like this:

import {Some} from '@foo/bar';

Some.create();

@foo/bar is in shared section with singleton: true

After the last alpha update I've got a Promise in Some.
Transpiled code is something like:

var bar_1 = require_my_app_mf_loadShare_foo_bar();

// ...

bar_1.Some.create();

So, bar_1 is a promise

require_my_app_mf_loadShare_foo_bar is a function that was generated by this code https://github.com/module-federation/vite/blob/new-config/src/virtualModules/virtualShared_preBuild.ts#L56

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

zhangHongEn · 2024-08-11T11:32:52Z

Do all modules shared by this project get promise?

zhangHongEn · 2024-08-11T14:49:22Z

I need @foo_bar.js in the network, for example react-dom.js in my network

import {require_index_cjs} from "/node_modules/.vite/deps/chunk-WVZCKULC.js?v=6fa77d23";
import {__commonJS} from "/node_modules/.vite/deps/chunk-BUSYA2B4.js?v=6fa77d23";

// ../../../node_modules/.pnpm/an-empty-js-file@1.0.0/node_modules/an-empty-js-file/viteViteHost___mf__loadShare_react-dom.js
var require_viteViteHost_mf_loadShare_react_dom = __commonJS({
    "../../../node_modules/.pnpm/an-empty-js-file@1.0.0/node_modules/an-empty-js-file/viteViteHost___mf__loadShare_react-dom.js"(exports, module) {
        var {loadShare} = require_index_cjs();
        var res = loadShare("react-dom", {
            customShareInfo: {
                shareConfig: {
                    singleton: false,
                    strictVersion: false,
                    requiredVersion: "^18.3.1"
                }
            }
        });
        var exportModule = (/*mf top-level-await placeholder replacement mf*/
        res.then((factory)=>factory()));
        module.exports = exportModule;
    }
});

const __mfproxy__awaitdefault = await (require_viteViteHost_mf_loadShare_react_dom());
const __mfproxy__default = __mfproxy__awaitdefault;

export {__mfproxy__default as default};

husayt · 2024-08-11T17:01:09Z

@zhangHongEn I get this as well with Material UI:

The following code from MUI ( node_modules/@mui/styled-engine/index.js)

import emStyled from '@emotion/styled';
export default function styled(tag, options) {
  const stylesFactory = emStyled(tag, options);
  if (process.env.NODE_ENV !== 'production') {
    return (...styles) => {
      const component = typeof tag === 'string' ? `"${tag}"` : 'component';
      if (styles.length === 0) {
        console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join('\n'));
      } else if (styles.some(style => style === undefined)) {
        console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`);
      }
      return stylesFactory(...styles);
    };
  }
  return stylesFactory;
}

becomes like this

var import_styled = __toESM(require_monoSamples_mf_loadShare_emotion_styled());
...
function styled(tag, options) {
  const stylesFactory = (0, import_styled.default)(tag, options);
  if (true) {
    return (...styles) => {
      const component = typeof tag === "string" ? `"${tag}"` : "component";
      if (styles.length === 0) {
        console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join("\n"));
      } else if (styles.some((style4) => style4 === void 0)) {
        console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`);
      }
      return stylesFactory(...styles);
    };
  }
  return stylesFactory;
}

where `import_styled.default` is a promise

zhangHongEn · 2024-08-12T01:47:01Z

/*mf top-level-await placeholder replacement mf*/ I need to check if this line of comment exists in the code in the network request

…

---- Replied Message ---- | From | ***@***.***> | | Date | 08/12/2024 01:01 | | To | module-federation/vite ***@***.***> | | Cc | zhn ***@***.***>, Mention ***@***.***> | | Subject | Re: [module-federation/vite] Got a promise instead of imported object (after the last alpha update) (Issue #47) | @zhangHongEn I get this as well with Material UI: The following code from MUI ( ***@***.***/styled-engine/index.js) import emStyled from ***@***.***/styled'; export default function styled(tag, options) { const stylesFactory = emStyled(tag, options); if (process.env.NODE_ENV !== 'production') { return (...styles) => { const component = typeof tag === 'string' ? `"${tag}"` : 'component'; if (styles.length === 0) { console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join('\n')); } else if (styles.some(style => style === undefined)) { console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`); } return stylesFactory(...styles); }; } return stylesFactory; } becomes like this function styled(tag, options) { const stylesFactory = (0, import_styled.default)(tag, options); if (true) { return (...styles) => { const component = typeof tag === "string" ? `"${tag}"` : "component"; if (styles.length === 0) { console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join("\n")); } else if (styles.some((style4) => style4 === void 0)) { console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`); } return stylesFactory(...styles); }; } return stylesFactory; } where `import_styled.default` is a promise — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

zhangHongEn · 2024-08-12T01:48:29Z

I'll try @ mui later

…

---- Replied Message ---- | From | ***@***.***> | | Date | 08/12/2024 01:01 | | To | module-federation/vite ***@***.***> | | Cc | zhn ***@***.***>, Mention ***@***.***> | | Subject | Re: [module-federation/vite] Got a promise instead of imported object (after the last alpha update) (Issue #47) | @zhangHongEn I get this as well with Material UI: The following code from MUI ( ***@***.***/styled-engine/index.js) import emStyled from ***@***.***/styled'; export default function styled(tag, options) { const stylesFactory = emStyled(tag, options); if (process.env.NODE_ENV !== 'production') { return (...styles) => { const component = typeof tag === 'string' ? `"${tag}"` : 'component'; if (styles.length === 0) { console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join('\n')); } else if (styles.some(style => style === undefined)) { console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`); } return stylesFactory(...styles); }; } return stylesFactory; } becomes like this function styled(tag, options) { const stylesFactory = (0, import_styled.default)(tag, options); if (true) { return (...styles) => { const component = typeof tag === "string" ? `"${tag}"` : "component"; if (styles.length === 0) { console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join("\n")); } else if (styles.some((style4) => style4 === void 0)) { console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`); } return stylesFactory(...styles); }; } return stylesFactory; } where `import_styled.default` is a promise — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

smelukov · 2024-08-12T09:22:21Z

@zhangHongEn

I have this structure:
@foo/bar - shared dep
@some/library - npm library that uses @foo/bar
my-app - host that uses @some/library

@some/library chunk has this code (and a lot of business logic):

// ../../node_modules/an-empty-js-file/my__app___mf__loadShare_foo__bar.js
var require_my_app_mf_loadShare_foo_bar = __commonJS({
    "../../node_modules/an-empty-js-file/my__app___mf__loadShare_foo__bar.js"(exports, module) {
        var {loadShare} = require_index_cjs();
        var res = loadShare("@foo/bar", {
            customShareInfo: {
                shareConfig: {
                    singleton: true,
                    strictVersion: false,
                    requiredVersion: "^0.22.1"
                }
            }
        });
        var exportModule = (/*mf top-level-await placeholder replacement mf*/
        res.then((factory)=>factory()));
        module.exports = exportModule;
    }
});

@foo/bar chunks has a lot of business logic

zhangHongEn · 2024-08-12T09:26:59Z

@smelukov foo_bar.js in network is the actual executed code. I need to check if it has this comment and this await line.

smelukov · 2024-08-12T09:33:16Z

@zhangHongEn
https://localhost:9001/node_modules/.vite/deps/__mf__prebuildwrap_foo__bar__js.js?v=5028c11a

Does not have any of these

smelukov · 2024-08-12T09:36:18Z

https://localhost:9001/node_modules/.vite/deps/@some_library.js?v=aa0f7309 has this code:

// ../../node_modules/an-empty-js-file/my__app___mf__loadShare_foo__bar.js
var require_my_app_mf_loadShare_foo_bar = __commonJS({
    "../../node_modules/an-empty-js-file/my__app___mf__loadShare_foo__bar.js"(exports, module) {
        var {loadShare} = require_index_cjs();
        var res = loadShare("@foo/bar", {
            customShareInfo: {
                shareConfig: {
                    singleton: true,
                    strictVersion: false,
                    requiredVersion: "^0.22.1"
                }
            }
        });
        var exportModule = (/*mf top-level-await placeholder replacement mf*/
        res.then((factory)=>factory()));
        module.exports = exportModule;
    }
});

zhangHongEn · 2024-08-12T09:41:16Z

@zhangHongEn https://localhost:9001/node_modules/.vite/deps/__mf__prebuildwrap_foo__bar__js.js?v=5028c11a

Does not have any of these

You are right, it has become chunk-hash.js
Can you use search to find its code in the network? I have not reproduced this problem yet, and need to find it to troubleshoot

loadShare("@foo/bar"

smelukov · 2024-08-12T09:45:29Z

@zhangHongEn the only place with loadShare("@foo/bar" is #47 (comment)

husayt · 2024-08-12T09:49:18Z

@smelukov is it possible to get this reproduced with examples we have and then we can all work to get to resolve that.

I have done the same for image loading problem from remote, see here

zhangHongEn · 2024-08-12T09:55:32Z

@zhangHongEn the only place with loadShare("@foo/bar" is #47 (comment)

@smelukov It lacks the export code of esmodule. In theory, such a file should not exist.

@husayt mentioned that @mui seems to have the same problem. I will try it using @mui tonight.

smelukov · 2024-08-12T10:22:38Z

@zhangHongEn @husayt I've made a reproduction example https://github.com/smelukov/vite/tree/repro (repro-branch)

exec npm run build in examples/vite-vite/some
exec npm run dev in examples/vite-vite/vite-host and you'll see:

Uncaught TypeError: events_1.Emitter is not a constructor
    at Initializer.create (@some_library.js?v=8f723edf:35:21)
    at main.jsx:7:25

Maybe it's because some/library is not esm library?

zhangHongEn · 2024-08-12T11:24:59Z

@zhangHongEn @husayt I've made a reproduction example https://github.com/smelukov/vite/tree/repro (repro-branch)

exec npm run build in examples/vite-vite/some

exec npm run dev in examples/vite-vite/vite-host and you'll see:
Uncaught TypeError: events_1.Emitter is not a constructor
    at Initializer.create (@some_library.js?v=8f723edf:35:21)
    at main.jsx:7:25
Maybe it's because some/library is not esm library?

Not sure why, react is also a cjs library, I will check it tonight

smelukov · 2024-08-13T11:09:38Z

@zhangHongEn can we use zhangHongEn@6297991 ?

zhangHongEn · 2024-08-13T11:15:39Z

@zhangHongEn can we use zhangHongEn@6297991 ?

Yes, I found another problem. There is a probability of failure to obtain the shared module in dev mode. Refreshing the page again works fine and does not affect the build. I originally wanted to fix it together and submit a PR.

smelukov · 2024-08-13T11:17:37Z

Is there a published version to use the fix?

smelukov · 2024-08-13T11:18:26Z

And thanks for maintaining the plugin!

zhangHongEn · 2024-08-13T11:29:31Z

#53
Waiting for this to be merged, thank you for finding these problems

gioboa · 2024-08-13T14:20:27Z

Closed by #53

* feat: new plugin configuration (#28) * init ts (#29) * fix: tsconfig * fix: issues 2 3 * feat: rust demo build and preview --------- Co-authored-by: 张洪恩 <zhanghongen@bwcj.com> * feat: support runtime plugins (#30) Co-authored-by: Sergey Melukov <s.melukov@vk.team> * fix: Ensure @module-federation/runtime singleton (#31) * fix: Ensure @module-federation/runtime singleton * fix: build preview --------- Co-authored-by: 张洪恩 <zhanghongen@bwcj.com> * feat: add packageManager * fix: remoteEntry support hash; format dynamic es module (#35) * 1.0.0-alpha-7c3ba59 * fix: remove default export (#37) * fix: remove pkg-pr-new * chore: add PR title check * 1.0.0-alpha-ffc6e23 * fix: #36 and dynamic import (#38) * fix: dynamic import * fix: #36 * 1.0.0-alpha-54ad191 * 1.0.0-alpha-80b7215 * fix: #39 #44 #45 (#46) * fix: pre-bunding * feat: add pre-bunding subdependencies demo * fix: exposes . * fix: remotes support namespace * 1.0.0-alpha-4a73cd4 * fix: windows remoteEntry error (#48) Co-authored-by: 张洪恩 <zhanghongen@bwcj.com> * feat: updated examples (#50) * 1.0.0-alpha-def937d * fix updated examples (#51) * fix: #47 (#53) * 1.0.0-alpha-10e1f83 * improved examples with MUI and etc (#55) * fix: #56 #41 (#58) * 1.0.0-alpha-6cae9ab * mfruntime update and new examples (#62) * fix: #61 (#63) Co-authored-by: 张洪恩 <zhanghongen@bwcj.com> * 1.0.0-alpha-51eeeb6 * feat: shared-slash (#67) * feat: shared slash * feat: shared slash * feat: preview examples * feat: remove an-empty-js-file * fix: remove console * optimization: reduce dev mode page reload * Optimize code and comments * fix: 64 * fix: only slash --------- Co-authored-by: 张洪恩 <zhanghongen@bwcj.com> * 1.0.0-alpha-f87d7d3 * fix: nx #40 (#69) * 1.0.0-alpha-661e052 * fix: #68 (#71) * fix: #68 * fix: #68 * fix: windows Multi-Pack * Optimization: Reduce file writing * Optimization: code format * fix: support nx monorepo --------- Co-authored-by: 张洪恩 <zhanghongen@bwcj.com> * 1.0.0-alpha-1aa30c0 * fix: monorepo (#72) Co-authored-by: 张洪恩 <zhanghongen@bwcj.com> * feat: add Nuxt example (#75) * Add Nuxt host example * Gitignore generated .__mf__win folder --------- Co-authored-by: David Sellén <david.sellen@bolagsverket.se> Co-authored-by: David Sellén <david.sellen@gmail.com> * chore: update module federation and more examples (#81) * fix: #78 (#79) * fix: #78 * Update src/utils/normalizeOptimizeDeps.ts Co-authored-by: Sergey Melyukov <s.melukov@gmail.com> --------- Co-authored-by: 张洪恩 <zhanghongen@bwcj.com> Co-authored-by: Sergey Melyukov <s.melukov@gmail.com> * fix: #77 (#82) * 1.0.0-alpha-2f53b4e * docs: update Vue example link * docs: update React example link * docs: update README * fix: Remote virtual module path (#84) Co-authored-by: 张洪恩 <zhanghongen@bwcj.com> * 1.0.0-alpha-c13dc95 * feat: add improvements (#86) * fix: Remote virtual module path * examples: nuxt(Unfinished) * feat: mf-manifest; Register remote on demand * doc: roadmap * doc: npm url * Delete src/utils/getLocalSharedImportMap_windows.ts --------- Co-authored-by: 张洪恩 <zhanghongen@bwcj.com> --------- Co-authored-by: zhn <zhang_h_n@163.com> Co-authored-by: 张洪恩 <zhanghongen@bwcj.com> Co-authored-by: Sergey Melyukov <s.melukov@gmail.com> Co-authored-by: Sergey Melukov <s.melukov@vk.team> Co-authored-by: HG <husayt@gmail.com> Co-authored-by: David sellén <sellen.david@gmail.com> Co-authored-by: David Sellén <david.sellen@bolagsverket.se> Co-authored-by: David Sellén <david.sellen@gmail.com>

zhangHongEn added a commit to zhangHongEn/vite that referenced this issue Aug 13, 2024

fix: module-federation#47

6297991

gioboa pushed a commit that referenced this issue Aug 13, 2024

fix: #47 (#53)

10e1f83

gioboa closed this as completed Aug 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Got a promise instead of imported object (after the last alpha update) #47

Got a promise instead of imported object (after the last alpha update) #47

smelukov commented Aug 11, 2024 •

edited

Loading

zhangHongEn commented Aug 11, 2024

zhangHongEn commented Aug 11, 2024

husayt commented Aug 11, 2024 •

edited

Loading

zhangHongEn commented Aug 12, 2024 via email

zhangHongEn commented Aug 12, 2024 via email

smelukov commented Aug 12, 2024

zhangHongEn commented Aug 12, 2024

smelukov commented Aug 12, 2024 •

edited

Loading

smelukov commented Aug 12, 2024

zhangHongEn commented Aug 12, 2024

smelukov commented Aug 12, 2024

husayt commented Aug 12, 2024 •

edited

Loading

zhangHongEn commented Aug 12, 2024 •

edited

Loading

smelukov commented Aug 12, 2024 •

edited

Loading

zhangHongEn commented Aug 12, 2024

smelukov commented Aug 13, 2024

zhangHongEn commented Aug 13, 2024

smelukov commented Aug 13, 2024

smelukov commented Aug 13, 2024

zhangHongEn commented Aug 13, 2024

gioboa commented Aug 13, 2024

Got a promise instead of imported object (after the last alpha update) #47

Got a promise instead of imported object (after the last alpha update) #47

Comments

smelukov commented Aug 11, 2024 • edited Loading

zhangHongEn commented Aug 11, 2024

zhangHongEn commented Aug 11, 2024

husayt commented Aug 11, 2024 • edited Loading

zhangHongEn commented Aug 12, 2024 via email

zhangHongEn commented Aug 12, 2024 via email

smelukov commented Aug 12, 2024

zhangHongEn commented Aug 12, 2024

smelukov commented Aug 12, 2024 • edited Loading

smelukov commented Aug 12, 2024

zhangHongEn commented Aug 12, 2024

smelukov commented Aug 12, 2024

husayt commented Aug 12, 2024 • edited Loading

zhangHongEn commented Aug 12, 2024 • edited Loading

smelukov commented Aug 12, 2024 • edited Loading

zhangHongEn commented Aug 12, 2024

smelukov commented Aug 13, 2024

zhangHongEn commented Aug 13, 2024

smelukov commented Aug 13, 2024

smelukov commented Aug 13, 2024

zhangHongEn commented Aug 13, 2024

gioboa commented Aug 13, 2024

smelukov commented Aug 11, 2024 •

edited

Loading

husayt commented Aug 11, 2024 •

edited

Loading

smelukov commented Aug 12, 2024 •

edited

Loading

husayt commented Aug 12, 2024 •

edited

Loading

zhangHongEn commented Aug 12, 2024 •

edited

Loading

smelukov commented Aug 12, 2024 •

edited

Loading