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

[rinarakaki]

Verify canary release

• [X] 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.

[huozhi]

@vladshcherbin can you try the latest canary (13.0.3-canary.3), it works for me with your reproduction

[schickling]

@housseindjirdeh thanks for the update. I've also been running into this issue and just tried out the canary build you've mentioned above, however, it still doesn't seem to work for me. (You can try out this example and navigate to the /posts/change-me path).

[vladshcherbin]

@huozhi I've tried 13.0.3-canary.3, seems to be working for me 🥳

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

@huozhi thank you for resolving the issue 🤗

[github-actions[bot]]

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