[Bug, Regression]: Dynamic Import of ES Module fails in Playwright v1.44.1 and 1.43.1 (works in v1.42.1 and below)

[MindaugasMateika]

Version

1.43.1 - 1.44.1

Steps to reproduce

1. Clone https://github.com/MindaugasMateika/pw-braze-esm
2. npm install
3. npx playwright install
4. npx playwright test

Expected behavior

Expected tests to pass

Actual behavior

Throws an error

Error: require() of ES Module /Users/mindaugas.mateika/pw-braze-esm/node_modules/@braze/web-sdk/src/index.js from /Users/mindaugas.mateika/pw-braze-esm/load-braze.cjs not supported.
Instead change the require of index.js in /Users/mindaugas.mateika/pw-braze-esm/load-braze.cjs to a dynamic import() which is available in all CommonJS modules.

   at ../load-braze.cjs:10

  8 |   

    at /Users/mindaugas.mateika/pw-braze-esm/load-braze.cjs:10:63
    at /Users/mindaugas.mateika/pw-braze-esm/async /Users/mindaugas.mateika/pw-braze-esm/tests/example.spec.ts:9:3
    at /Users/mindaugas.mateika/pw-braze-esm/async /Users/mindaugas.mateika/pw-braze-esm/node_modules/playwright/lib/worker/workerMain.js:336:9
    at /Users/mindaugas.mateika/pw-braze-esm/async /Users/mindaugas.mateika/pw-braze-esm/node_modules/playwright/lib/worker/testInfo.js:297:11
    at /Users/mindaugas.mateika/pw-braze-esm/async /Users/mindaugas.mateika/pw-braze-esm/node_modules/playwright/lib/worker/workerMain.js:328:7
    at /Users/mindaugas.mateika/pw-braze-esm/async /Users/mindaugas.mateika/pw-braze-esm/node_modules/playwright/lib/worker/testInfo.js:297:11

Additional context

While attempting to import the ES Module @braze/web-sdk dynamically in a CommonJS setup, an error is encountered with a specific versions of Playwright. The issue does not occur with older versions of Playwright like 1.42.1 and below.

1.41.1 - works
1.42.1 - works
1.43.1 - error
1.44.1 - error

Environment

System:
    OS: macOS 14.4
    CPU: (12) arm64 Apple M2 Pro
    Memory: 176.83 MB / 32.00 GB
  Binaries:
    Node: 20.11.0 - ~/.local/share/mise/installs/node/20.11.0/bin/node
    npm: 10.2.4 - ~/.local/share/mise/installs/node/20.11.0/bin/npm
    pnpm: 8.7.4 - ~/.local/share/mise/installs/pnpm/8.7.4/bin/pnpm
  Languages:
    Bash: 5.2.26 - /opt/homebrew/bin/bash
  npmPackages:
    @playwright/test: 1.44.1 => 1.44.1

[askoufis]

I'm seeing this error too when upgrading playwright. Given the stack trace, my guess is that #29644 might be the cause of the regression.

[mxschmitt]

Happy to look into import/require regressions, but looking at the @braze/web-sdk module, it says:

Note: The Braze Web SDK is meant to be used client-side in a web application and may not work as expected in a Node.js server environment.

also it requires a navigator.platform/userAgent to be set. Do you encounter this in combination with component testing?

---

@askoufis do you depend on the same module?

[askoufis]

Happy to look into import/require regressions, but looking at the @braze/web-sdk module, it says:

Note: The Braze Web SDK is meant to be used client-side in a web application and may not work as expected in a Node.js server environment.

also it requires a navigator.platform/userAgent to be set. Do you encounter this in combination with component testing?

@askoufis do you depend on the same module?

@mxschmitt Nope. In my case, a dynamic import of an ES Module is being converted into a require, resulting in a similar error to what the OP is experiencing. I can try make a minimal reproduction when I get a chance.

[askoufis]

@mxschmitt I've made a reproduction of my specific situation. https://github.com/askoufis/playwright-31140-reproduction

Notably, the test file imports from a .cjs file, which itself dynamically imports from a .mjs file.

This used to work on @playwright/[email protected], but has broken as of @playwright/[email protected]. Setting type: "module" in the test module's package.json fixes the issue in 1.43.0, though that may not be a viable solution for all situations.

[MindaugasMateika]

Happy to look into import/require regressions, but looking at the @braze/web-sdk module, it says:

Note: The Braze Web SDK is meant to be used client-side in a web application and may not work as expected in a Node.js server environment.

also it requires a navigator.platform/userAgent to be set. Do you encounter this in combination with component testing?

@askoufis do you depend on the same module?

It is client side lib but we are using it in node, user agent and platform are mocked by setting those values on global. It's working well up until 1.43 version. I suppose what's used does not really matter, it's just that dynamic imports are converted to require based on error message. @askoufis repro makes more sense.

[mxschmitt]

Thank you @askoufis as well!

Looking at this smaller repro, changing the test file to a normal Node.js script file:

const { getFoo } = require("./module1.cjs");

(async () => {
  const foo = await getFoo();
  console.log({ foo })
})();

shows that its working without Playwright. Playwright should behave always identical to Node.js, in this case it works in Node.js while it doesn't with Playwright.

We'll look into it.

[superhit0]

I am facing this issue too. While debugging, I noticed that after this change the code started breaking - b41b802#diff-0f8a2f313f1572108f59a6e84663858ebb4fc455163410526b56878794001103R243

However, I have unblocked myself by doing a yarn patch and by changing back exts for Pirates back to

{ exts: ['.ts', '.tsx', '.js', '.jsx', '.mjs'] }

Waiting for 1.45

Root Cause:

• With cjs and other file types being transpiled now, @babel/plugin-syntax-dynamic-import is converting the dynamic imports to require and one cannot require an EJS module from CJS module