Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature request] Port resolveWeak to javascript/esm #18633

Closed
guillaumewuip opened this issue Aug 1, 2024 · 3 comments
Closed

[Feature request] Port resolveWeak to javascript/esm #18633

guillaumewuip opened this issue Aug 1, 2024 · 3 comments
Labels

Comments

@guillaumewuip
Copy link

guillaumewuip commented Aug 1, 2024

Feature request

What is the expected behavior?
CommonJS code allows the usage of require, and so the corresponding webpack rule type javascript/auto will transform require.resolveWeak into the corresponding runtime code.

ESM code does not allow the usage of require, and so javascript/esm type does not transform require.resolveWeak, as we don't expect to see require in this context.

Still, libraries like @lodable/components or react-loadable leverage this require.resolveWeak capability to implement their code-splitting abstractions. When generating ESM code that use them, we end up with require.resolveWeak inside ESM, which webpack does not understand by default. This creates runtime failures.

What is motivation or use case for adding/changing the behavior?
As far as I know multiple options can mitigate the issue:

  1. not using ESM

  2. not using those libraries

  3. forcing javascript/auto for the concerned ESM files (see issue here)

     {
       test: /\.js$/,
       include: /path\/to\/esm\/files\/with\/resolveWeak/,
       type: 'javascript/auto',
     }

No option is perfect here:

  1. is not future-proof
  2. means that we lose key features of those libs like server-side rendering chunk extractions (eg. @loadable/server)
  3. requires extra config (and maybe it has negative side effects on other aspects like performances?)

How should this be implemented in your opinion?
Webpack started to leverage import.meta, which is free to use, to implement import.meta.webpackContext, for example.

Can we imagine following this path to port the resolveWeak capability to javascript/esm also? This is also mentioned in this comment.

This way, code historically leveraging require.resolveWeak will be able to migrate to import.meta.resolveWeak or something similar when bundled in ESM.

Are you willing to work on this yourself?
I can help, but I've never contributed to webpack so this might be a very challenging tasks for me 😅
I'm probably better suited to do update PRs on https://github.com/gregberge/loadable-components/ and https://github.com/swc-project (loadable plugin).

@alexander-akait
Copy link
Member

alexander-akait commented Aug 1, 2024

What is require.requireWeak (we never have it)? You can use import.meta.webpackContext('./directory', { mode: "weak" });

@guillaumewuip guillaumewuip changed the title [Feature request] Port requireWeak to javascript/esm [Feature request] Port resolveWeak to javascript/esm Aug 1, 2024
@guillaumewuip
Copy link
Author

Sorry, I mean require.resolveWeak 🤦 I've fixed the issue title and the description accordingly.

You can use import.meta.webpackContext('./directory', { mode: "weak" });

Does it mean that code that today is written with require.resolveWeak like so

require.requireWeak('./OtherComponent.js')

can be migrated to this in ESM without anything more to handle?

import.meta.webpackContext('./OtherComponent.js', { mode: "weak" });

@alexander-akait
Copy link
Member

Let's close in favor #16693, we don't support resolve for ESM right now, so we need to implement import.meta.resolve and import.meta.resolveWeak

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants