create-next-app --ts not recognising @types/react

[JayAchar]

Verify canary release

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

Provide environment information

Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 19.6.0: Thu Jan 13 01:26:33 PST 2022; root:xnu-6153.141.51~3/RELEASE_X86_64
Binaries:
Node: 16.13.1
npm: 8.3.0
Yarn: 1.22.15
pnpm: 6.11.0
Relevant packages:
next: 12.1.5-canary.6
react: 18.0.0
react-dom: 18.0.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

After running npx create-next-app@latest --ts test-app then cd test-app && npm run dev, I get the following error:

---

> test-app@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install @types/react by running:

yarn add --dev @types/react

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).

---

Running the @types/react installation command doesn't fix the problem.
@types/react version 18.0.2 is listed as a devDependency in the package.json.

Expected Behavior

create-next-app@latest --ts should create a template which works when npm run dev is called.

To Reproduce

npx create-next-app@latest --ts test-app

cd test-app && npm run dev

[andresmanz]

Downgrading @types/react to 18.0.1 works for me as a workaround. Might be related to facebook/react#24304?

[valstu]

Downgrading @types/react to 18.0.1 works for me as a workaround. Might be related to facebook/react#24304?

This seems to work 👍

[JayAchar]

I've got it working again by downgrading only the @types/react package. Thanks @andresmanz

"@types/react": "18.0.1"

[eps1lon]

We added an export map in 18.0.2: DefinitelyTyped/DefinitelyTyped#59838

Maybe this isn't supported by Next?

[balazsorban44]

I think we have to update our TS config verifier:

next.js/packages/next/lib/has-necessary-dependencies.ts

Lines 16 to 23 in a9d6d9f

	const missingPackages = requiredPackages.filter((p) => {
	try {
	resolutions.set(p.pkg, require.resolve(p.file, { paths: [baseDir] }))
	return false
	} catch (_) {
	return true
	}
	})

On @types/react@18.0.2, it throws with:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './index.d.ts' is not defined by "exports" in .../node_modules/@types/react/package.json
    at new NodeError (node:internal/errors:371:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:440:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:692:3)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.mod._resolveFilename (.../node_modules/.pnpm/next@12.1.4_react-dom@18.0.0+react@18.0.0/node_modules/next/dist/build/webpack/require-hook.js:183:28)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at .../node_modules/.pnpm/next@12.1.4_react-dom@18.0.0+react@18.0.0/node_modules/next/dist/lib/has-necessary-dependencies.js:11:44
    at Array.filter (<anonymous>) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}```

[Brooooooklyn]

Closed in #36082

[ijjk]

Hi, the above patch is now available in v12.1.5-canary.7 of Next.js, please update and give it a try!

[Spikeysanju]

Any update on this?. I have tried above patch v12.1.5-canary.7 & still it's throwing the same issue.

[ijjk]

@Spikeysanju can you confirm the latest canary is installed with cat node_modules/next/package.json? We have two confirmations this is resolved on that version here #36103

[Spikeysanju]

Hey @ijjk, just saw your message. Sweet! It works like a charm. Thanks for helping me out so quick 🙌.

[async9]

Downgrading types to 18.0.1 works, but make sure it's not like this "^18.0.1" - should be "18.0.1" without "^" before.

[balazsorban44]

@async9 this should not be an issue anymore. Make sure you are at least on v12.1.5-canary.7 (You can use latest now, as this is out on the stable release channel)

[apetta]

I'm unfortunately still getting this issue with "next": "^12.1.6" with "@types/react": "^18.0.9" and "typescript": "^4.7.2"

EDIT: Tried downgrading @types/react to "18.0.1" but no luck. I also noticed "@types/node" was running ahead of my installed node version (v16.15.0) so I downgraded that to "16.11.38" - not sure if that affects this, but also no luck.

Update: Fixed it. Short story is that I was being stupid. Long story is that I needed to omit the "--only=production" part of "RUN npm ci --only=production" on the Dockerfile I wrote 🤦‍♂️

Sorry for the spam! Leaving this here for others...

[github-actions]

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.