Reputation: 572

Cannot find module 'next' or its corresponding type declarations

Getting Cannot find module '' or its corresponding type declarations. when importing in Next.js project.

This happens on every single import. Preview

Yarn version : 3.1.0-rc.2
Next version: 11.1.2

tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "importHelpers": true,
    "jsx": "preserve",
    // "baseUrl": "src"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],
}

Upvotes: 36

Answers (13)

Marc Loeb

Reputation: 555

just to add, for me none of the suggested solutions worked on MacOS 15.1.1, but

rm -rf node_modules && npm install

inside the project did the trick.

Upvotes: 0

Rakshit Shinde

Reputation: 11

I faced the same issue, and none of the above solutions worked for me.

Eventually, I discovered that the next-themes library was not installed properly.

Running npm install next-themes resolved the problem.

Hope this helps!

Upvotes: 0

Novastorm

Reputation: 1458

What worked for me was changing what TypeScript version my VSCode editor was using.

The lower-right corner of the screen shows the version. In my case it was using the TS version which came with my VSCode (this was a bit outdated and produced the cannot find module errors). Clicking on the version number and changing it to Use workspace version resolved the errors.

Upvotes: 1

Poorva

Reputation: 11

In my case, the module I was trying to use was in node_modules/.

For example - /next/font/google

The fix was to add the relative path to paths in tsconfig.json

    "paths": {
        "@/*": ["./*"],
        "/*": ["./node_modules/*"]
    }

Upvotes: 1

Brandon Smith

Reputation: 11

For my solution, simply a user error. I had made new aliases, but they require the star on the key.

So this:

"paths": {
      ...,
      "@lib/": ["./app/lib/*"],
    },

Becomes this:

"paths": {
  ...,
  "@lib/*": ["./app/lib/*"],
},

Upvotes: 0

Sangay Thinley

Reputation: 81

In my case below step worked(MacOs & VSCode)

Step 1. command + shift + p and

Step 2. Search > TypeScript: Restart TS server and press enter

Upvotes: 4

Sean Burlington

Reputation: 930

based on the above answers I tried configuring my editor as per https://yarnpkg.com/getting-started/editor-sdks

I restarted and still had the problem

In the end I have downgraded yarn which resolves my issue

yarn set version classic && yarn install

Now I have node_modules and vscode is happy

I also prefer to have the source code available to browse - apparently vscode should be able to access the source code but this was also not working for me (and I like having the raw files to search)

Upvotes: 0

Erick Willian

Reputation: 4329

Maybe just restarting the TS server can work.

VsCode - Windows

type: ctrl + shift + p

choose: > TypeScript: Restart TS server

VsCode - Macbook:

type: ⇧ + ⌘ + P or F1

choose: > TypeScript: Restart TS server

Upvotes: 104

Cuong Vu

Reputation: 3723

If you're using yarn 3 and VSCode, then you need to follow these steps to set up your editor:

Run yarn dlx @yarnpkg/sdks vscode
Open any TypeScript file
Press ctrl+shift+p
Choose "Select TypeScript Version"
Pick "Use Workspace Version"

Read here for other editors

Upvotes: 63

yoyoyojoe

Reputation: 133

I wanted to provide more context and additional notes for others who might appreciate them.

Just reread @Vagnerlandio Nunes's answer, and it was spot on. Problem solved!
Recap/Solution #2: I was simply bootstrapping a new project using npx create-next-app, following the Next.js' documentation with npx create-next-app@latest --typescript (using yarn) or ran yarn create next-app --typescript. I got errors relating to ts(2307): Cannot find module 'next/app' or its corresponding type declarations.
With @warfield's answer, I noticed I did not have a node_modules folder for some reason, and it was not created even after I ran yarn. I had to run npm i to create the node_modules folder, even though I planned to use yarn.

This is the log I got when I ran yarn.

% yarn
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: Done with warnings in 0s 244ms

This is the log I got when I ran npm i.

% npm i  

added 235 packages, and audited 236 packages in 10s

78 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Now the problem is solved, and the error messages have gone away!

But out of curiosity, I ran yarn again, and this is the resulting output.

% yarn
➤ YN0070: Migrating from Yarn 1; automatically enabling the compatibility node-modules linker 👍

➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 3s 864ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ word-wrap@npm:1.2.3 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ wrappy@npm:1.0.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yallist@npm:4.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yocto-queue@npm:0.1.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0019: │ ms-npm-2.1.3-81ff3cfac1-aa92de6080.zip appears to be unused - removing
➤ YN0000: └ Completed in 0s 303ms
➤ YN0000: ┌ Link step
➤ YN0007: │ core-js-pure@npm:3.25.5 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 4s 288ms
➤ YN0000: Done in 8s 486ms

In addition, if you're like me, you tried to modify your tsconfig.json file from

...
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
...

...
"include": [
    "next-env.d.ts",
    "pages/**/*",
    "src/**/*",
],
...

because you thought it was going to help based on this GitHub comment. You would now be seeing a new error message ts(2686): 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.. This is not necessary if you simply did the above step. So I just changed it back.

Changing your tsconfig.json's "compilerOptions": { ... } from "jsx": "preserve" to "jsx": "react-jsx" is also not necessary (reference to another attempted solution).

At any point if you want to make sure that the changes you've made (in regards to tsconfig) has gone into effect, try command + shift + p and enter > TypeScript: Restart TS server, and you should see some refreshing going on.

Upvotes: 7