javascript - cannot find module 'nextrouter' or its corresponding type declarations - Stack Overflow

Currently having some problems with my NextJS app.

I get the error below. Which is really weird, because my code runs perfectly with no errors.

import { useRouter } from 'next/router';
// Cannot find module 'next/router' or its corresponding type declarations.

However, I get the error above in my IDE, this error is stopping my turbo build and yarn build mands to run, causing me to be unable to be able to push to production.

I have restarted my ts server, uninstalled next, updated to latest version and ran yarn to install everything again.

I've made an example repository on GitHub.

This is happening for all my next imports. Cannot find module 'next/router' or its corresponding type declarations.ts(2307) Cannot find module 'next/link' or its corresponding type declarations.ts(2307) Cannot find module 'next/image' or its corresponding type declarations.ts(2307)

Package.json

I have tried using moduleResolution node, as well as node16

node results in my local package cachetesting to not be found, so it is unable to be imported. And node16 results in nextjs import errors.

Currently having some problems with my NextJS app.

I get the error below. Which is really weird, because my code runs perfectly with no errors.

import { useRouter } from 'next/router';
// Cannot find module 'next/router' or its corresponding type declarations.

However, I get the error above in my IDE, this error is stopping my turbo build and yarn build mands to run, causing me to be unable to be able to push to production.

I have restarted my ts server, uninstalled next, updated to latest version and ran yarn to install everything again.

I've made an example repository on GitHub. https://github./MonkeeMan1/test

This is happening for all my next imports. Cannot find module 'next/router' or its corresponding type declarations.ts(2307) Cannot find module 'next/link' or its corresponding type declarations.ts(2307) Cannot find module 'next/image' or its corresponding type declarations.ts(2307)

Package.json https://hatebin./ylujtdhtht

I have tried using moduleResolution node, as well as node16

node results in my local package cachetesting to not be found, so it is unable to be imported. And node16 results in nextjs import errors.

• javascript
• typescript
• next.js

Share Improve this question Follow asked Apr 14, 2023 at 1:48 kamzakamza 10522 silver badges99 bronze badges 4

• it should be 'next/navigation', import { useRouter } from 'next/navigation'; – Tom Fan Commented Apr 14, 2023 at 1:58
• Hi Tom Fan. Thank you for the response. But this unfortunately results in the same problem. Every import from Next results in the same Cannot find module 'next/navigation' or its corresponding type declarations.. I believe it may be an issue with ESM. – kamza Commented Apr 14, 2023 at 2:03
• Have you checked that all dependencies are installed by using npm install check-dependencies --save-dev in the root directory of the repo? -- The example works fine and and import { useRouter } from "next/router"; doesn't produce an error when used inside apps/pages/index.tsx. – Christopher Commented Apr 14, 2023 at 2:15
• Hi @Christopher The example on my Github does error for me. I have definitely installed all dependencies as my code successfully runs. It only fails when using turbo build. However, I still do get the issue of the red text on my imports, which my intelisense shows me before building. I have tried your suggestion with running npm install check-dep... however the issue still persists. I use yarn and turbo dev to start/install the project dependencies. Sometimes the IDE doesn't update the intelisense so I would remend restarting the ts server once done. – kamza Commented Apr 14, 2023 at 2:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

The issue is your tsconfig.json. The configuration isn't correct for a Next/React TS project.

Replace with this => https://github./vercel/next.js/blob/canary/examples/hello-world/tsconfig.json

==Solution==

After reading your ments I understand what you are trying to do better.

Here is how I got it to work.

Step 1: Fix path of nextjs.json

apps/web/tsconfig.json

"extends": "../../packages/tsconfig/nextjs.json",

---

Step 2: Fix module and moduleResolution in nextjs.json

packages/tsconfig/nextjs.json

"module": "esnext",
"moduleResolution": "node",

---

Step 3: Fix cache: * to match package name

apps/web/package.json

"cachetesting": "*",

---

Step 4: Add main to package.json for cache

packages/cache/package.json

"main": "dist/index.js",

Not sure if you have seen this link, but this helped me debug

Make sure you're using the correct module for your version of Next.js.

Next.js went from pages to app from version 12 to version 13.

'next/router' is only for use in /pages, whereas 'next/navigation' is for use in /app

Source: https://nextjs/docs/pages/building-your-application/routing/linking-and-navigating