Jest with ESM modules fails to parse headers-polyfill

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn’t contain the answer to my issue

Environment check

• I’m using the latest msw version
• I’m using Node.js version 14 or higher

Node.js version

v16.17.0

Reproduction repository

https://gist.github.com/earnubs/97bef90158e77cb8b646ab4586acf19d

Reproduction steps

npm test

Current behavior

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /home/stephen/Workspace/try-jest-msw/node_modules/headers-polyfill/lib/esm/index.js:204
    export {
    ^^^^^^

    SyntaxError: Unexpected token 'export'

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1678:14)
          at async Promise.all (index 12)
          at async Promise.all (index 0)```

### Expected behavior

Test passes.

[earnubs]

Adding type: module to headers-polyfill package.json does fix this for the repro case.

From https://nodejs.org/api/esm.html#esm_enabling

Authors can tell Node.js to use the ECMAScript modules loader via the .mjs file extension, the package.json “type” field, or the –input-type flag. Outside of those cases, Node.js will use the CommonJS module loader. See Determining module system for more details.

The esm output has .js file extensions, so maybe they need to be .mjs.

EDIT: yeah, changing all the esm extensions to mjs also fixes the repro, and that’s probably the correct fix in this case.

[earnubs]

This may have squashed one bug only to reveal a few more with the ESM build:

The first one is related to the import of chalk at https://github.com/mswjs/msw/blob/main/src/node/createSetupServer.ts#L1

SyntaxError: The requested module 'chalk' does not provide an export named 'bold'

That’s easily fixed I think, but when fixed you hit:

Dynamic require of "node-fetch" is not supported

      at node_modules/msw/lib/node/index.mjs:25:9
      at node_modules/msw/src/context/fetch.ts:6:21

Which I think will be this line https://github.com/mswjs/msw/blob/main/src/context/fetch.ts#L6 and would require rewriting with something like await import ...

[5 mins later] OK, I see this PR https://github.com/mswjs/msw/pull/1399/files has all of what I’ve found so far, so I’ll try it out locally.