Build error with dynamic import in pages router introduced in v14.0.3-canary.12

[jakst]

Link to the code that reproduces this issue

https://github.com/jakst/nextjs-pathfinder-import-fail/tree/pages-import-error (note that the link is to a specific branch)

To Reproduce

• Start a build with pnpm build (v14.0.4-canary.37 installed)
• Observer the following error

Module not found: ESM packages (@pathfinder-ide/react) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

• Downgrade to v14.0.3-canary.11 pnpm add next@14.0.3-canary.11 && pnpm build and observe that the build passes
• Updrade to v14.0.3-canary.12 pnpm add next@14.0.3-canary.12 && pnpm build and observe that the build fails

Current vs. Expected behavior

Currently build crashes. Expected build to pass.

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:32:11 PDT 2023; root:xnu-10002.41.9~7/RELEASE_ARM64_T6030
Binaries:
  Node: 21.2.0
  npm: 10.2.3
  Yarn: 4.0.2
  pnpm: 8.10.5
Relevant Packages:
  next: 14.0.4-canary.37
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Dynamic imports (next/dynamic)

Additional context

I filed a similar issue before #58831 fro the app router, but this is not the same. This one is in the pages router and was introduced at a later point. We didn't discover this one earlier because we were blocked on the error in pages router. Now that the pages router error was fixed in v14.0.4-canary.33 we noticed the one in pages when trying to upgrade.

_NEXT-1788

[belgattitude]

I've been impacted as well with ag-grid (v30 and 31). tested on latest canary 14.0.4-canary.39. (issue is in 14.0.3) with page router.

Note that setting experimental.esmExternals: 'loose' did fix the issue (temporarily)

PS: the offending code

'use client';

import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { ModuleRegistry } from '@ag-grid-community/core';

import dynamic from 'next/dynamic';

ModuleRegistry.register(ClientSideRowModelModule);

export const DynamicAgGridReact = dynamic(
  () => import('@ag-grid-community/react').then((mod) => mod.AgGridReact),
  {
    ssr: false,
  }
);

[belgattitude]

Thanks @huozhi !

[huozhi]

Thanks for trying out the canaries and the detailed reproduction!

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.