fix: add import support to ssrModuleLoader

[natemoo-re]

Description

This PR adds SSR support for loading Node ESM packages using import rather than always using require. This improves compatibility with the growing number of packages that are shipped as ESM only.

Additional context

This is implemented using an approach that Snowpack has been using with great success.

The basic steps are:
1. Attempt to require the package
2. Handle any errors that may have happened during the require
- If it's a SyntaxError and we see an import or export keyword, the user is likely using an outdated Node version. Give them a helpful error.
- If it's the known ERR_REQUIRE_ESM error, attempt to import the module.
- If it's any other error, surface it with another throw.

This PR has been updated to load everything (CJS and ESM) via import() rather than require with an import() fallback.

One caveat to this PR: TypeScript currently doesn't have a way to not compile dynamic import(), so we need to use the native-import.js file to load it. When typescript@4.5.0 is out of Beta and is officially released, this can be cleaned up significantly.

---

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

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• 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.

[FredKSchott]

Just wanted to chime in to give a +1 to this approach as Snowpack creator/maintainer: we landed this support in Snowpack several months ago and have had no issues that I'm aware of.

[patak-dev]

Thanks for this PR @natemoo-re, we'll discuss it in this week's team meeting.

[benmccann]

Just leaving a note here to reflect discussion from Discord

If it's a SyntaxError and we see an import or export keyword, the user is likely using an outdated Node version. Give them a helpful error.
If it's the known ERR_REQUIRE_ESM error, attempt to import the module.

The package.json specifies engines, so we know the user can't be on a version of Node that doesn't support import. Thus, I would use import only and not try require first

[natemoo-re]

Updated to use import and now tests are failing with a Segmentation fault... not sure what's going on there.

[natemoo-re]

Ah, just figured out why the test suite is failing! Will take some time to see if I can get things running again locally.

Jest ships with experimental support for ECMAScript Modules (ESM).
https://jestjs.io/docs/ecmascript-modules

Edit Welp, --experimental-vm-modules didn't seem to fix it. Any assistance on this would be greatly appreciated!

[SamVerschueren]

@natemoo-re I also ran into the segfault issue with Jest. See #5213 (comment). I wasn't able to solve it as I think it's something with Node or Jest that causes this...

[matthewp]

Here's a PR with Astro's test suite passing with this change: withastro/astro#1585

[bluwy]

I've also tested this branch locally at sveltejs/vite-plugin-svelte#204, and the changes here are working as well.

[patak-dev]

Thanks for testing this in Astro and Svelte @matthewp @bluwy. We discussed with @sodatea, and we think that with these external tests available it is safe to merge this PR as part of the next minor as we will also get extra testing from the beta period. Merging this one now in preparations for this release

[benmccann]

It looks the segfault when running tests with Jest is caused by a bug in v8. That issue can't be immediately resolved as a blocker must be resolved first.