Cannot find module 'next' or its corresponding type declarations

Question

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"
  ],
}

Answer 1

If you're using yarn 3, then you need to follow those 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 more

Answer 2

Maybe just restarting the TS server can work.

type: ctrl + shift + p

choose: > TypeScript: Restart TS server

Answer 3

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

0. Just reread @Vagnerlandio Nunes's answer, and it was spot on. Problem solved!

1. 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.

2. 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!

3. 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

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

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

to

...
"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. 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.

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

6. 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.

Answer 4

I tried solution suggested by Cuong Vu and many others and it didn't work. For me what worked was the following solution:

In Yarn 2/3, support for modules in the node_modules folder is removed because of PnP. Follow the steps below to resolve the issue.

1. Create a .yarnrc.yml file in the project root,
2. Insert in the file nodeLinker: node-modules .
3. Run the command yarn in the terminal to recreate the node_modules folder.

Following all 3 steps the problem will be solved.

Answer 5

Before attempting other solutions:

1. Double check you have a node_modules folder
2. If not, run yarn (or npm i ) to (re)install the modules

Accidentally deleting the node_modules folder is the simplest explanation for the TS2307 Cannot find module '' error.

It's also supported by OP comments

"i don't have node_module folder. Only.yarn and yarn.lock"

h/t @geisterfurz007's comments.

Answer 6

I added this to my tsconfig.json file I can see you have it already, but it was not part of my solution

"moduleResolution": "node",