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

feat(ssr): support ESM-only dependencies #4450

Closed
wants to merge 3 commits into from

Conversation

aleclarson
Copy link
Member

@aleclarson aleclarson commented Jul 30, 2021

Description

This is a proof-of-concept for compatibility with ESM-only dependencies in Vite SSR.

It needs #3950 and #3951 to be merged first. Therefore, I've squashed those two branches and included them in this PR, so you'll want to look at 6a279e80 to avoid all the git-diff noise.

Caveats:

  • The temporary override of require resolution being done in fix(ssr): use tryNodeResolve instead of resolveFrom #3951 is incompatible with Node's ESM loader, so ESM-only dependencies are unaware of resolve.dedupe and mode options. The only way around this is to inject an experimental ESM loader through a CLI flag (see here), which is not ideal, since we really only want to affect module resolution while loading an SSR module, rather than all the time, but maybe that issue can be fixed via temporary injection of the Vite config into the ESM loader.

Other than that, this approach seems to be bullet-proof.

Playground

I've also included an ssr-esm playground, but no automated tests yet. To test it out, do the following:

cd packages/playground/ssr-esm
pnpm install
pnpm serve

Try setting mode: "production" in the Vite config to see the ESM-only package load the incorrect module for its cjs-package dependency, resulting in duplicate instances of cjs-package (one from ./index.js, the other from ./index.dev.js).


What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

if (cached) {
return cached
try {
// Resolve the import manually, to avoid the ESM resolver.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it could be worth expanding this comment to explain why we want to avoid the ESM resolver

} else {
return moduleGraph.urlToModuleMap.get(unwrapId(dep))?.ssrModule
async function ssrImport(dep: string) {
if (dep[0] !== '.' && dep[0] !== '/') {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand this part. It seems to be suggesting that all external imports will be nodeRequired. But if it's an ESM-only module, I believe we should import rather than require it

@benmccann
Copy link
Collaborator

Do we want to close this in favor of #5197, which I think would also address the same issue?

@aleclarson aleclarson closed this Oct 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat: ssr p2-nice-to-have Not breaking anything but nice to have (priority)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants