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

[rinarakaki]

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

[vladshcherbin]

Same, I believe it's somehow related to webpack. Using next dev --turbo fixes the problem 🤔

[balazsorban44]

@vladshcherbin @rnarkk do you have a reproduction by any chance?

[kevva]

I get this with the following in package.json:

{
  "type": "module"
}

[vladshcherbin]

@balazsorban44 here's reproduction: https://github.com/vladshcherbin/next-13-esm-error

as @kevva mentioned, package.json has "type": "module"

[vladshcherbin]

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