[BUG] "Must use import to load ES Module" when importing lodash-es into Playwright test

Update: I created a minimal test repo that reproduces my problem, if that helps. https://github.com/CheapeOne/testapp .

Context:

• Playwright Version: 1.19.2
• Operating System: Mac
• Node.js version: v12.22.9
• Browser: All
• Extra:
  • lodash-es v4.17.21
  • typescript v4.4.3
  • yarn v1.22.17

Code Snippet

Sample test file:

// test.spec.ts
import { test } from '@playwright/test';
import { range } from 'lodash-es';

test('example', async ({page}) => {
  await page.goto('https://wikipedia.org');
  console.log(range);
});

Running: npx playwright test --headed

Results in:

Error [ERR_REQUIRE_ESM] [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/asdf/testapp/node_modules/lodash-es/lodash.js
require() of ES modules is not supported.
require() of /Users/asdf/testapp/node_modules/lodash-es/lodash.js from /Users/asdf/testapp/playwright/test.spec.ts is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename lodash.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/asdf/testapp/node_modules/lodash-es/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1015:13)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/asdf/testapp/playwright/test.spec.ts:2:1)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Module._compile (/Users/asdf/testapp/node_modules/pirates/lib/index.js:136:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Object.newLoader [as .ts] (/Users/asdf/testapp/node_modules/pirates/lib/index.js:141:7)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Loader._requireOrImport (/Users/asdf/testapp/node_modules/@playwright/test/lib/loader.js:269:14)

Describe the bug

My actual problem is I’m trying to import some mocks which themselves use lodash-es, but could reproduce the same error by simply trying to import lodash-es in a test file. This same error seems to happen even if I downgrade lodash-es version. I also tied using PW_EXPERIMENTAL_TS_ESM=1 npx playwright test --headed but the same result.

Here’s my tsconfig.json if that helps. I’m curious if there’s a problem there, playwright’s test runner, or a problem with lodash-es.

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "assumeChangesOnlyAffectDirectDependencies": true,
    "baseUrl": ".",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "esnext"
  }
}

Lastly I’ve tried manually compiling tests (suggested in the docs here) but same result.

[CheapeOne]

Oh sweet, and I see you used npm and not yarn, I had included a yarn.lock file but if it’s succeeding with a totally fresh install i think i need to regenerate that. Thanks again for the help, I’ll close this.

[pavelfeldman]

I don’t see "type": "module" in your test project’s package.json. You can only import modules from modules.