@types/react every time I run "next dev"

Unanswered

Tonkinese posted this in #help-forum

TonkineseOP

2024-11-21T07:48:55.908Z

Hey guys, I get the following output every time i run next dev --turbo:

> next dev --turbo

   ▲ Next.js 15.0.3 (Turbopack)
   - Local:        http://localhost:3000
   - Environments: .env.local, .env

 ✓ Starting...
It looks like you're trying to use TypeScript but do not have the required package(s) installed.
Installing dependencies

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


Installing devDependencies (pnpm):
- @types/react

Any idea how to stop this? (I'm using v15.0.3, react-19)

44 Replies

West African Lion

2024-11-21T08:42:17.959Z

Can you share your package.json?

@West African Lion Can you share your package.json?

TonkineseOP

2024-11-21T08:56:08.605Z

of course, this is it:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "test": "jest",
    "test:watch": "jest --watch"
  },
  "overrides": {
      "react": "$react",
      "react-dom": "$react-dom"
    },
  "dependencies": {
    "again": "^0.0.1",
    "@apollo/client": "^3.11.9",
    "@apollo/experimental-nextjs-app-support": "^0.11.5",
    "@dnd-kit/core": "^6.1.0",
    "@dnd-kit/sortable": "^8.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@faker-js/faker": "^9.2.0",
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "^1.2.1",
    "@radix-ui/react-alert-dialog": "^1.1.2",
    "@radix-ui/react-aspect-ratio": "^1.1.0",
    "@radix-ui/react-avatar": "^1.1.1",
    "@radix-ui/react-checkbox": "^1.1.2",
    "@radix-ui/react-collapsible": "^1.1.1",
    "@radix-ui/react-context-menu": "^2.2.2",
    "@radix-ui/react-dialog": "^1.1.2",
    "@radix-ui/react-dropdown-menu": "^2.1.2",
    "@radix-ui/react-hover-card": "^1.1.2",
    "@radix-ui/react-icons": "^1.3.1",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-menubar": "^1.1.2",
    "@radix-ui/react-navigation-menu": "^1.2.1",
    "@radix-ui/react-popover": "^1.1.2",
    "@radix-ui/react-progress": "^1.1.0",
    "@radix-ui/react-radio-group": "^1.2.1",
    "@radix-ui/react-scroll-area": "^1.2.0",
    "@radix-ui/react-select": "^2.1.2",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slider": "^1.2.1",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-switch": "^1.1.1",
    "@radix-ui/react-tabs": "^1.1.1",
    "@radix-ui/react-toast": "^1.2.2",
    "@radix-ui/react-toggle": "^1.1.0",
    "@radix-ui/react-toggle-group": "^1.1.0",
    "@radix-ui/react-tooltip": "^1.1.3",
    "@radix-ui/react-visually-hidden": "^1.1.0",
    ...

"@storybook/addon-docs": "^8.4.2",
    "@tanstack/react-table": "^8.20.5",
    "@tiptap/extension-color": "^2.9.1",
    "@tiptap/extension-list-item": "^2.9.1",
    "@tiptap/extension-placeholder": "^2.9.1",
    "@tiptap/extension-text-style": "^2.9.1",
    "@tiptap/pm": "^2.9.1",
    "@tiptap/react": "^2.9.1",
    "@tiptap/starter-kit": "^2.9.1",
    "@types/react-lines-ellipsis": "^0.15.6",
    "@uppy/core": "^4.2.3",
    "@uppy/dashboard": "^4.1.2",
    "@uppy/drag-drop": "^4.0.4",
    "@uppy/file-input": "^4.0.3",
    "@uppy/progress-bar": "^4.0.1",
    "@uppy/react": "^4.0.3",
    "@uppy/status-bar": "^4.0.4",
    "@xyflow/react": "^12.3.4",
    "axios": "^1.7.7",
    "chroma-js": "^3.1.2",
    "class-variance-authority": "^0.7.0",
    "classnames": "^2.5.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.0.0",
    "countries-list": "^3.1.1",
    "date-fns": "^4.1.0",
    "date-fns-tz": "^3.2.0",
    "embla-carousel-react": "^8.3.1",
    "geist": "^1.3.1",
    "inflection": "^3.0.0",
    "input-otp": "^1.4.1",
    "lorem-ipsum": "^2.0.8",
    "lucide-react": "^0.456.0",
    "next": "15.0.3",
    "next-auth": "5.0.0-beta.25",
    "next-themes": "^0.4.3",
    "nuqs": "^2.1.1",
    "openid-client": "^6.1.3",
    "prettyavatars": "^0.2.0",

"react": "19.0.0-rc-69d4b800-20241021",
    "react-dom": "19.0.0-rc-69d4b800-20241021",
    "react-activity-calendar": "^2.7.1",
    "react-checkbox-tree": "^1.8.0",
    "react-code-blocks": "^0.1.6",
    "react-complex-tree": "^2.4.5",
    "react-day-picker": "^8.10.1",
    "react-hook-form": "^7.53.2",
    "react-intersection-observer": "^9.13.1",
    "react-lines-ellipsis": "^0.15.4",
    "react-resizable-panels": "^2.1.6",
    "react-select": "^5.8.3",
    "react-timer-hook": "^3.0.8",
    "recharts": "^2.13.3",
    "sonner": "^1.7.0",
    "swr": "^2.2.5",
    "tailwind-merge": "^2.5.4",
    "tailwindcss-animate": "^1.0.7",
    "timezones-list": "^3.0.3",
    "ts-invariant": "^0.10.3",
    "ts-node": "^10.9.2",
    "ui": "github:shadcn/ui",
    "vaul": "^1.1.1",
    "zod": "^3.23.8",
    "zustand": "^5.0.1"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^8.4.2",
    "@storybook/addon-interactions": "^8.4.2",
    "@storybook/addon-links": "^8.4.2",
    "@storybook/addon-onboarding": "^8.4.2",
    "@storybook/addon-themes": "^8.4.2",
    "@storybook/blocks": "^8.4.2",
    "@storybook/nextjs": "^8.4.2",
    "@storybook/react": "^8.4.2",
    "@storybook/theming": "^8.4.2",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.0.1",
    "@types/jest": "^29.5.14",
    "@types/node": "^22.9.0",
    "@types/react": "npm:types-react@19.0.0-alpha.3",
    "@types/react-dom": "npm:types-react-dom@19.0.0-alpha.3",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.14.0",
    "eslint-config-next": "15.0.3",
    "eslint-plugin-storybook": "^0.11.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "msw": "^2.6.4",
    "msw-storybook-addon": "^2.0.4",
    "postcss": "^8.4.48",
    "storybook": "^8.4.2",
    "tailwindcss": "^3.4.14",
    "typescript": "^5.6.3"
  }
}

@Tonkinese Hey guys, I get the following output every time i run `next dev --turbo`: > next dev --turbo ▲ Next.js 15.0.3 (Turbopack) - Local: http://localhost:3000 - Environments: .env.local, .env ✓ Starting... It looks like you're trying to use TypeScript but do not have the required package(s) installed. Installing dependencies If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your app and pages directories). Installing devDependencies (pnpm): - @types/react Any idea how to stop this? (I'm using v15.0.3, react-19)

gin

2024-11-21T09:19:22.327Z

what happens after the dependencies have installed?

i see u dont have the dependencies installed in your package json

TonkineseOP

2024-11-21T09:20:13.290Z

everything runs normally as far as I can get tell, but every time i start or restart the dev server, next installs that package lol

gin

2024-11-21T09:20:33.704Z

put both of these in your devDependencies ->
@types/react @types/node

oh nvm

u have it

hm thats weird

are u running via pnpm dev?

TonkineseOP

2024-11-21T09:21:29.647Z

normally yeah, i've tried both bun dev and pnpm dev, both have the same issue

i'll try normal npm now, just a sec

gin

2024-11-21T09:21:56.483Z

delete your .next folder and your node_modules

and also delete your lock file

TonkineseOP

2024-11-21T09:21:59.665Z

yeah same with npm run dev

gin

2024-11-21T09:22:19.054Z

if u have done that, install again using npm

and also, did u modify your tsconfig? show me the file

TonkineseOP

2024-11-21T09:24:47.605Z

hmm npm install gives

npm install
npm error Cannot read properties of null (reading 'matches')
npm error A complete log of this run can be found in: /Users/user/.npm/_logs/2024-11-21T01_23_24_220Z-debug-0.log

let's see what the log says

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "strictNullChecks": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

@Tonkinese tsconfig.json: json { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "baseUrl": ".", "paths": { "@/*": ["./src/*"] }, "strictNullChecks": true }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] }

gin

2024-11-21T09:25:35.995Z

looks fine

@Tonkinese hmm `npm install` gives npm install npm error Cannot read properties of null (reading 'matches') npm error A complete log of this run can be found in: /Users/user/.npm/_logs/2024-11-21T01_23_24_220Z-debug-0.log let's see what the log says

gin

2024-11-21T09:25:45.569Z

delete npm cache

something is corrupted probably

TonkineseOP

2024-11-21T09:26:26.849Z

ok this is the log output: https://www.pastery.net/qphdkw/

not sure what 174 verbose stack TypeError: Cannot read properties of null (reading 'matches') refers to though

@gin something is corrupted probably

TonkineseOP

2024-11-21T09:27:18.696Z

a dependency you mean?

gin

2024-11-21T09:27:24.230Z

yeah

TonkineseOP

2024-11-21T09:27:27.135Z

ok will try deleting npm cache

gin

2024-11-21T09:27:34.506Z

TonkineseOP

2024-11-21T09:28:40.968Z

hmm ok so after running npm cache clean --force and npm install i'm still seeing npm error Cannot read properties of null (reading 'matches')

TonkineseOP

2024-11-21T09:34:37.180Z

i'll try removing node_modules too

lol no matter what I do i can't get that to go away

Brown bear

2024-11-21T09:39:43.785Z

If you're using pnpm, have you tried using resolutions/overrides? Could be the npm: prefix in the version range that's throwing Next off.
https://pnpm.io/package_json#pnpmoverrides

TonkineseOP

2024-11-21T09:40:20.324Z

yeah my package.json already contains the relevent overrides I think

"overrides": {
  "react": "$react",
  "react-dom": "$react-dom"
},

LET'S GO

figured it out, switched the version of @types/react to

`"@types/react": "npm:types-react@19.0.0-rc.1",
 "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",

that seemed to fix things

appreciate the hand guys 🙏

West African Lion

2024-11-21T09:50:57.763Z

So did you solve the problem?

TonkineseOP

2024-11-21T09:52:58.376Z

yeah switching to 19.0.0-rc.1 seemed to stop the continuous installation

West African Lion

2024-11-21T09:57:08.747Z

Sounds good, btw you can take a look in more detail with below link. 👇
https://react.dev/blog/2024/04/25/react-19-upgrade-guide

{
  "dependencies": {
    "@types/react": "npm:types-react@rc",
    "@types/react-dom": "npm:types-react-dom@rc"
  },
  "overrides": {
    "@types/react": "npm:types-react@rc",
    "@types/react-dom": "npm:types-react-dom@rc"
  }
}

@West African Lion Sounds good, btw you can take a look in more detail with below link. 👇 https://react.dev/blog/2024/04/25/react-19-upgrade-guide { "dependencies": { "@types/react": "npm:types-react@rc", "@types/react-dom": "npm:types-react-dom@rc" }, "overrides": { "@types/react": "npm:types-react@rc", "@types/react-dom": "npm:types-react-dom@rc" } }

TonkineseOP

2024-11-21T09:58:27.988Z

ah great thanks, will take a look