Error [ERR_UNKNOWN_FILE_EXTENSION] on latest version of MSW (v0.48.2)

[comverser]

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.14.2

Reproduction repository

vercel/next.js example: with-msw

Reproduction steps

1. Install and start the with-msw example:

yarn create next-app --example with-msw with-msw-app
cd with-msw-app
yarn dev

2. visit localhost:3000

Current behavior

There is an ESM related error in the terminal.

error - unhandledRejection: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".json" for /home/s/temp/next.js/examples/with-msw/node_modules/statuses/codes.json
    at new NodeError (node:internal/errors:371:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:87:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:102:38)
    at defaultLoad (node:internal/modules/esm/load:21:14)
    at ESMLoader.load (node:internal/modules/esm/loader:359:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:280:58)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:297:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:261:34)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:81:21) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Expected behavior

No error in the terminal

Comment

I am not looking for a temporary fix such as, forcing next to NOT use ESM modules in packages.

[sidharthramesh]

Related:

TypeError: Module "file:///project/node_modules/statuses/codes.json" needs an import assertion of type "json"

when using with an Playwright

[jose-codegourmet]

I tried upgrading to node 18 I also get this error

/node_modules/statuses/codes.json" needs an import assertion of type "json"
    at new NodeError (node:internal/errors:393:5)
    at validateAssertions (node:internal/modules/esm/assert:82:15)
    at defaultLoad (node:internal/modules/esm/load:84:3)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at ESMLoader.load (node:internal/modules/esm/loader:605:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
    at new ModuleJob (node:internal/modules/esm/module_job:63:26)
    at #createModuleJob (node:internal/modules/esm/loader:480:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:78:21) {
  code: 'ERR_IMPORT_ASSERTION_TYPE_MISSING'
}

[kettanaito]

Hey. Thanks for reporting this. What's the recommended way of including JSON files as dependencies in ESM? This is not the library-specific problem.

[mattcosta7]

Hey. Thanks for reporting this. What's the recommended way of including JSON files as dependencies in ESM? This is not the library-specific problem.

I think the simplest way is probably to inline a js object instead.

There are import assertions as an option, but I don't think support is there for most tooling yet https://github.com/tc39/proposal-import-assertions

Inlining at build time should avoid issues

[kettanaito]

Would somebody please open a pull request to our esbuild config to inline statuses JSON into the build?

[mattcosta7]

Would somebody please open a pull request to our esbuild config to inline statuses JSON into the build?

#1458

[kettanaito]

Released: v0.48.3 🎉

This has been released in v0.48.3!

• 📄 Release notes
• 📦 npm package

Make sure to always update to the latest version (npm i msw@latest) to get the newest features and bug fixes.

---

Predictable release automation by @ossjs/release.