transpilePackages causes use of 'import.meta' outside a module, breaking dev mode

[sawyerh]

Link to the code that reproduces this issue

https://github.com/sawyerh/nextjs-pino-transpilePackages-bug

To Reproduce

This bug happens when pino is in the transpilePackages config array.

Using the linked repo:

To reproduce the bug, run the application in dev mode:

npm run dev

You will see the following error:

 ⨯ ./node_modules/pino/browser.js
Module parse failed: Cannot use 'import.meta' outside a module (437:16)
|                 // still a Refresh Boundary later.
|                 // @ts-ignore importMeta is replaced in the loader
>                 import.meta.webpackHot.accept();
|                 // This field is set when the previous version of this module was a
|                 // Refresh Boundary, letting us know we need to check for invalidation or

To resolve the issue, remove transpilePackages from next.config.js and restart the server.

Current vs. Expected behavior

next dev fails to run successfully when pino is in the transpilePackages config, but next build && next start works as expected. I expected next dev to also run successfully.

I am transpiling pino in order to support Firefox versions prior to 71.

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 22.6.0: Fri Sep 15 13:41:30 PDT 2023; root:xnu-8796.141.3.700.8~1/RELEASE_ARM64_T8103
Binaries:
  Node: 18.12.1
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: 8.4.0
Relevant Packages:
  next: 13.5.4
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

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

SWC transpilation

Additional context

A similar import.meta error message was reported in #35110 however it's not caused by usage of transpilePackages.

_NEXT-2061

[galaxynova1999]

isn't Pino a pure Node.js log tool? I don't think it is compatible with browser environment

[sawyerh]

@galaxynova1999 No, that's not accurate. Pino includes a Browser API via a browser.js bundle. Pino is also recommended in the Next.js documentation.

[danoc]

@sawyerh — were you able to find a workaround to this? cc: @lavelle

[sawyerh]

@sawyerh — were you able to find a workaround to this? cc: @lavelle

No

[gameisdead]

same issue occurs to my project.
We built a monorepo using next.js v.13 with Jest Framework which is common js library. That's why I needed to set transpilePackages on next.config.js to transpile some ESM libiraries with swc.
turbo run start and build works well, however run dev doesn't just like you mentioned.

[niksbanna]

same issue here after deleting node_modules and reinstalling them

[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.