Module not found: ESM packages (/path/to/app/page.js) need to be imported.

Verify canary release

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

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Tue Sep 13 07:51:46 UTC 2022
Binaries:
  Node: 18.12.0
  npm: 8.19.2
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.0.0
  eslint-config-next: 12.3.1
  react: 18.2.0
  react-dom: 18.2.0

warn - Latest canary version not detected, detected: “13.0.0”, newest: “12.3.2-canary.43”. Please try the latest canary version (npm install next@canary) to confirm the issue still exists before creating a new issue. Read more - https://nextjs.org/docs/messages/opening-an-issue

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Here is the error output when I run npm run dev or build:

Module not found: ESM packages (/path/to/app/page.js) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

https://nextjs.org/docs/messages/module-not-found

Could someone give me direction since I don’t know where to start with this bug?

I have enabled the novel app directory (experimental: { appDir: true }) and tried to put page.js and layout.js files in it.

Expected Behavior

Load page.js and layout.js properly.

Link to reproduction

To Reproduce

[huozhi]

@vladshcherbin Thanks for confirmation, I’ll close this issue as resolved.

@schickling it’s related to the esm package resolving, it’s caused by a different issue. will track yours in https://github.com/vercel/next.js/issues/42534 as duplicate issue

[vladshcherbin]

Using *.jsx as file extension also resolves the problem.