[Bug]: cannot resolve import from `next-intl/navigation`

[stefanprobst]

Version

1.51.0

Steps to reproduce

1. clone the reproduction at https://github.com/stefanprobst/issue-playwright-bundler
2. pnpm install
3. pnpm test
4. see error message:

Error: Cannot find module '/home/stefan/Development/playground/issue-playwright-bundler/node_modules/.pnpm/next-intl@4.0.0-beta-dea867b_next@15.2.2_@playwright+test@1.51.0_react-dom@19.0.0_react_fccdb3ffef8c0b4edb06eee065c5b512/node_modules/next/navigation' imported from /home/stefan/Development/playground/issue-playwright-bundler/node_modules/.pnpm/next-intl@4.0.0-beta-dea867b_next@15.2.2_@playwright+test@1.51.0_react-dom@19.0.0_react_fccdb3ffef8c0b4edb06eee065c5b512/node_modules/next-intl/dist/esm/production/navigation/react-client/createNavigation.js
Did you mean to import "next/navigation.js"?

Expected behavior

playwright should be able to resolve imports from next-intl/navigation

Actual behavior

playwright cannot resolve imports from next-intl/navigation and errors with:

Error: Cannot find module '/home/stefan/Development/playground/issue-playwright-bundler/node_modules/.pnpm/next-intl@4.0.0-beta-dea867b_next@15.2.2_@playwright+test@1.51.0_react-dom@19.0.0_react_fccdb3ffef8c0b4edb06eee065c5b512/node_modules/next/navigation' imported from /home/stefan/Development/playground/issue-playwright-bundler/node_modules/.pnpm/next-intl@4.0.0-beta-dea867b_next@15.2.2_@playwright+test@1.51.0_react-dom@19.0.0_react_fccdb3ffef8c0b4edb06eee065c5b512/node_modules/next-intl/dist/esm/production/navigation/react-client/createNavigation.js
Did you mean to import "next/navigation.js"?

it looks like it has something to do with esm requiring a .js extension on imports from transitive dependencies?

note that next-intl imports work fine in an actual next.js project (which sets tsconfig.json#moduleResolution to bundler, which i think playwright is trying to match)

Additional context

No response

Environment

System:
    OS: Linux 6.8 KDE neon 6.2 6.2
    CPU: (16) x64 AMD Ryzen 7 5800U with Radeon Graphics
    Memory: 21.44 GB / 30.66 GB
    Container: Yes
  Binaries:
    Node: 22.14.0 - ~/.local/share/pnpm/node
    Yarn: 1.22.22 - ~/.local/share/pnpm/yarn
    npm: 10.9.2 - ~/.local/share/pnpm/npm
    pnpm: 10.5.2 - ~/.local/share/pnpm/pnpm
    bun: 1.1.37 - ~/.bun/bin/bun
  IDEs:
    VSCode: 1.98.0 - /usr/bin/code
  Languages:
    Bash: 5.1.16 - /usr/bin/bash
  npmPackages:
    @playwright/test: ^1.51.0 => 1.51.0

[agg23]

This is due to the next package being strangely constructed. import navigation from 'next/navigation'; also does not function in Playwright. This is not a Playwright issue as it also occurs in Node. Playwright tests execute in Node and thus are bound by their rules.

[stefanprobst]

is this not a case that could be handled by playwright emulating typescript's "bundler" module resolution?

[agg23]

This actually might be intended to work thanks to #23662 and #22887. Reopening.

[dgozman]

@stefanprobst Playwright only follows the moduleResolution=bundler when there is a tsconfig with path mappings involved. In this case, this is just a regular import in Node.js, which requires .js extension for ESM imports. Let me know whether this helps.

[stefanprobst]

thanks for your response! are you saying that the next-intl package works when imported in a next.js project because of some non-standard webpack module resolution, which playwright is not aiming to support?

[dgozman]

thanks for your response! are you saying that the next-intl package works when imported in a next.js project because of some non-standard webpack module resolution, which playwright is not aiming to support?

Yes. I am not exactly sure it is webpack, but usually a bundler implements its own module resolution and does not rely on Node.js builtin resolution.

[stefanprobst]

ok cool thanks 👍 ! closing this then.

[oliverstreissi]

@dgozman I have the same issue using next-intl and playwright in an nx monorepo. Getting this error when using next-intl 4.1.0 and Playwright 1.52.0.

 ⨯ [Error: Cannot find module '.../node_modules/.pnpm/next-intl@4.1.0_next@15.3.1_@babel+core@7.26.7_@opentelemetry+api@1.9.0_@playwright+test@1.52_bftcbqg4caqpcfdqns2yep44ia/node_modules/next/navigation' imported from .../node_modules/.pnpm/next-intl@4.1.0_next@15.3.1_@babel+core@7.26.7_@opentelemetry+api@1.9.0_@playwright+test@1.52_bftcbqg4caqpcfdqns2yep44ia/node_modules/next-intl/dist/esm/production/navigation/react-client/createNavigation.js
Did you mean to import "next/navigation.js"?] {

[amannn]

I just stumbled across this issue. The root of this is that Next.js is in a somewhat weird state when it comes to ESM projects/libraries importing their APIs: vercel/next.js#77200 (comment)

The ideal solution from my perspective is to fix this upstream in Next.js.

Is there a workaround for the time being for playwright users?