webpack icon indicating copy to clipboard operation
webpack copied to clipboard

Published 20 hours ago • verified publisher icon webpack

Async modules not resolved correctly with module federation

Open vincenthend opened this issue 3 years ago • 13 comments

Bug report

What is the current behavior? async modules (e.g. using top-level-await) are resolved into promise by Module Federation

If the current behavior is a bug, please provide the steps to reproduce. https://github.com/vincenthend/webpack-module-federation-async-modules Repo above is two webpack apps using module-federation main-app is importing a function from component-app, where there is a top-level-await in the imported module.

The imported module is resolved as Promise instead of object (even if using import syntax) image

What is the expected behavior? Imported modules from module federation should resolve normally whether it's async modules or not

Other relevant information: webpack version: 5.61.0 Node.js version: 14.8 Operating System: macOS 10.15 Additional tools: -

vincenthend avatar Dec 23 '21 10:12 vincenthend

Yep, sounds like a bug

alexander-akait avatar Dec 23 '21 11:12 alexander-akait

imagen imagen imagen

Im seeing the same behaviour on a Next.js app

jorgev259 avatar Dec 24 '21 04:12 jorgev259

@jorgev259 No need to duplicate, on the top we have example of the problem

alexander-akait avatar Dec 24 '21 11:12 alexander-akait

It seems the top-level-await should be placed in your main-app instead of component-app according to the doc.

cool-little-fish avatar Dec 29 '21 08:12 cool-little-fish

It seems the top-level-await should be placed in your main-app instead of component-app according to the doc.

This solution is different from the expected behavior above. Normal import statement should work normally (no await needed) for async modules as stated here.

While for now, if the async module is within module federation, it resolves into a promise

vincenthend avatar Dec 30 '21 13:12 vincenthend

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

webpack-bot avatar Apr 01 '22 02:04 webpack-bot

bump

vankop avatar Apr 01 '22 07:04 vankop

imagen

When working with async modules you need to make sure that your are working only with ESM imports. And also make sure to not accidentically transpile them (via babel) to CommonJs (as shown in the screenhot, (0, _utils).hasRole is how babel transpiles imports)

sokra avatar Apr 01 '22 12:04 sokra

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

webpack-bot avatar Jul 16 '22 20:07 webpack-bot

Imported modules from module federation should resolve normally whether it's async modules or not

Bug report

What is the current behavior? async modules (e.g. using top-level-await) are resolved into promise by Module Federation

If the current behavior is a bug, please provide the steps to reproduce. https://github.com/vincenthend/webpack-module-federation-async-modules Repo above is two webpack apps using module-federation main-app is importing a function from component-app, where there is a top-level-await in the imported module.

The imported module is resolved as Promise instead of object (even if using import syntax) image

What is the expected behavior? Imported modules from module federation should resolve normally whether it's async modules or not

Other relevant information: webpack version: 5.61.0 Node.js version: 14.8 Operating System: macOS 10.15 Additional tools: -

I have the same problem, it seems to be a bug?

lifeilu avatar Jul 18 '22 09:07 lifeilu

any work arounds here?

shr7 avatar Aug 17 '23 05:08 shr7