[NEXT-779] next/* - Typescript cannot find module when moduleResolution=nodenext and type=module

[Izhaki]

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 21.6.0: Thu Sep 29 20:13:56 PDT 2022; root:xnu-8020.240.7~1/RELEASE_ARM64_T6000
Binaries:
  Node: 16.17.0
  npm: 8.15.0
  Yarn: N/A
  pnpm: 7.25.0
Relevant packages:
  next: 13.1.7-canary.18
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

TypeScript

To Reproduce

• pnpm create next-app (with typescript)
• add "type": "module" to package.json
• change moduleResolution to nodenext
• run npx tsc --noEmit

Describe the Bug

Typescript complain about next/*, for example:

Cannot find module 'next/head' or its corresponding type declarations.

I believe this is because there is no exports field in node_modules/next/package.json.

Expected Behavior

Typescript shouldn't complain.

Context

• We use "type": "module" as we want repo scripts to be esm rather than cjs.
• We use "moduleResolution": "nodenext" as we use a setup similar to the monorepo created by npx create-turbo@latest, but we want sources to be under src and not the root folder.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-779

[balazsorban44]

Potential fix #46676 (comment)

[Izhaki]

Doesn't look like it:

And even if you remove the other export statement:

[karlhorky]

Interesting, it worked for me in a "module": "node16" app (this is in tsconfig.json), as noted in #46676 (ESM, also using "type": "module" in package.json)

Maybe @andrewbranch has a tip here... 🤔

Or maybe this issue is not a duplicate of #46676 cc @balazsorban44

[Izhaki]

Someone correct me if I'm wrong, but on the latest canary there is neither module nor exports in package.json. Also, I cannot see any ESM build under node_modules/next.

So I can't quite see why typescript should resolve the package...

I might be wrong, but it'll need an ESM build and exports field in package.json for this to work.

{
  "name": "next",
  "version": "13.2.4-canary.5",
  "description": "The React Framework",
  "main": "./dist/server/next.js",
  "license": "MIT",
  "repository": "vercel/next.js",
  "bugs": "https://github.com/vercel/next.js/issues",
  "homepage": "https://nextjs.org"
  // ...
}

[karlhorky]

Take a look at this comment, if you haven't read #46676 completely yet:

• TypeScript types fail with ESM (type: module) + TSConfig module: node16  #46676 (comment)

Are The Types Wrong shows that the next package is not bundled properly to be consumed by node16 moduleResolution in an ESM project.

The next package has incorrect types for the new TypeScript module formats.

[Izhaki]

The next package has incorrect types for the new TypeScript module formats.

Yep. I just wonder if this isn't the second problem needs solving; the first one being "Cannot find module"?

[kachkaev]

Replacing next/some-entrypoint with next/some-entrypoint.js works, but it’d be great to avoid it. If next adds exports into package.json, it will be possible to use next/some-entrypoint consistently. You can find an example of a workaround (next/some-entrypoint.js) in 🐸 kachkaev/njt#186.

We can get inspiration from @vercel/analytics/package.json, which contains exports and works fine in moduleResolution=nodenext + type=module. I did not have to replace @vercel/analytics/react with @vercel/analytics/react in the above PR.