question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Resolve module (mjs) incorrectly when using Module Federation Plugin

See original GitHub issue

Bug report

What is the current behavior?

When using swr/infinite with swr>1.1.2 dependency and sharing it with Module Federation (SharePlugin)

    new webpack.container.ModuleFederationPlugin({
      shared: ['swr'],
    }),

We encountered this error:
with-mf

If the current behavior is a bug, please provide the steps to reproduce.

I created this repo that reproduces the issue: https://github.com/tzachbon/swr-mf-error

All you have to do is to use SWR >= 1.2.0 and add it to the shared array in the Module Federation Plugin. In the change log here: https://github.com/vercel/swr/compare/1.1.2...1.2.0 I found a few things that might be the reason.

In my code, I try to import swr/infinite, which now has exports field in its package json:

  "exports": "./dist/index.mjs",

In the swr package json, the exports field now has a filename that ends with mjsextension:

    "./infinite": {
      "import": "./infinite/dist/index.mjs",
      "module": "./infinite/dist/index.esm.js",
      "require": "./infinite/dist/index.js",
      "types": "./infinite/dist/infinite/index.d.ts"
    },

When I manually changed the filename to .js it worked.

What is the expected behavior?

To resolve it like .js

Other relevant information: webpack version: 5.74.0 Node.js version: 16.15.0 Operating System: MacBook Pro (16-inch, 2021) Additional tools: swr: 1.3.0

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:5
  • Comments:14 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
keropodiumcommented, Aug 10, 2022

You can skip this issue by also sharing any submodule of swr changing this:

new webpack.container.ModuleFederationPlugin({
    shared: ['swr'],
}),  

to this

new webpack.container.ModuleFederationPlugin({
    shared: ['swr/'],
}),  
2reactions
Twippedcommented, Dec 2, 2022

I’ve been able to figure out that the issue is in the detection of exportsType of a shared module when passing through from another shared module, it comes back as default-with-named instead of dynamic, which then means that interopDefaultAccessUsed never gets set to true, and compatGetDefaultExport never gets added to the build. What I can’t figure out is why it breaks only when coming in through another shared module. If imported as a first-level shared module, this doesn’t happen, the file is correctly typed as dynamic.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack module federation is not working with eager shared ...
In order to make it work you need to change the way you are loading remote entry. Update your ModuleFederationPlugin config in webpack.config.js ......
Read more >
Module Federation - webpack
This plugin creates an additional container entry with the specified exposed modules. ContainerReferencePlugin (low level). This plugin adds specific references ...
Read more >
Micro Frontends Using Webpack 5 Module Federation
Webpack applies plugins to configure features. These examples can be installed by the following command: git clone https://github.com/module-federation/module- ...
Read more >
Build for production - Lit.dev
For a set of sample build configurations using Rollup, see Building with Rollup. ... For resolving bare module specifiers. ... SystemJS module loader:....
Read more >
module-not-found - Next.js
The module you're trying to import has a different casing ... Make sure the casing of the file is correct. ... Incorrect casing...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found