No longer able to dynamically import JSON files in Playwright

It used to be possible to dynamically import JSON files in Playwright, however, I recently updated all my NPM packages and I now get the following error.

TypeError: Module "file:///c:/mouse/tests/mouse.json" needs an import attribute of "type: json"

The issue is pretty easy to reproduce by creating a new Playwright project, then modifying the "get started link" test like this:

test('get started link', async ({ page }) => {
  const mouse = await import('./mouse.json');
});

Where "mouse.json" is a valid JSON file - in my case:

{
  "mouse":
  {
    "name": "Jerry"
  }
}

This results in the error above (TypeError: Module "file:///c:/mouse/tests/mouse.json" needs an import attribute of "type: json").

If I add an assertion (which a bit of web searching suggests is the "right" thing to do here) and change the test code to:

test('get started link', async ({ page }) => {
  const mouse = await import('./mouse.json', { assert: { type: 'json' } });
});

I get a different error:

SyntaxError: c:\mouse\tests\example.spec.ts: Support for the experimental syntax 'importAttributes' isn't currently enabled (11:75):


   9 |
  10 | test('get started link', async ({ page }) => {
> 11 |   const mouse = await import('./mouse.json', { assert: { type: 'json' } });
     |                                                                           ^
  12 | });
  13 |

Add @babel/plugin-syntax-import-attributes (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-import-attributes) to the 'plugins' section of your Babel config to enable parsing.

If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded.
You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
npx cross-env BABEL_SHOW_CONFIG_FOR=c:\mouse\tests\example.spec.ts <your build command>
See https://babeljs.io/docs/configuration#print-effective-configs for more info.

I have neither a babel config, nor a babel build command. I presume that Playwright uses babel "behind the scenes" and that this change would need to be made in Playwright. However, rather than make assumptions and raise a bug against Playwright, I thought I would ask here in case somebody knows something that I don't.

Solution

Upgrading to "@playwright/test": "^1.46.1" helped in my case. NOTE: we have the following in package.json: "type": "module", (I am aware PLaywright folks don't recommend using it) Also, tsconfig.json in project's root folder has the following

    "module": "ESNext",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "moduleResolution": "Node"

Now JSON is being imported with

import config from "@jsondata/config.json" assert { type: "json" };

and it works just fine.

But, we're getting (node:31424) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time which is being discussed here: https://github.com/nodejs/node/issues/51347