Fix "Cannot find module ..." TypeScript errors in VS Code
Tags: typescript, vscode, howtofix, webdev
Published: 2024-01-13 15:00:00

As a developer, I'm all too familiar with things not working as planned, and bugs popping up anywhere and everywhere. I'm also all too familiar with the frustration that comes with it.

But finding / creating bugs while coding is just par for the course, so it's nothing new. It's just part of the job. And I've learned to accept it.

What really frustrates me though, is when I bootstrap a new project, and there are errors right from the get-go! 😡

## The Project

Enter this new project I started. I'm using NextJS and Yarn 3, and I bootstrapped it using Next's `create-next-app` with Yarn, as such:

```bash
yarn create next-app

✔ Would you like to use TypeScript? … [Yes]
✔ Would you like to use ESLint? … [Yes]
✔ Would you like to use Tailwind CSS? … [Yes]
✔ Would you like to use `src/` directory? … [No]
✔ Would you like to use App Router? (recommended) … [No]
✔ Would you like to customize the default import alias (@/*)? … [No]
```

Pretty straight forward and simple no?

- TypeScript ... check
- ESLint ... check
- Tailwind CSS ... check

Certainly, nothing really out of the ordinary here. That said, I am using Yarn 3 (Yarn Berry), which uses it's "Zero Installs" plug and play system, and means that there's no `node_modules` folder. As I've experienced before, the missing `node_modules` folder can cause issues sometimes.

## The Problem

So I opened Visual Studio Code and checked out the `tailwind.config.js` file, and I was greeted with this succulent error:

> Cannot find module 'tailwindcss' or its corresponding type declarations

![Cannot find module error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/psinoost09i3p3q2r3r7.jpg)

I thought it seemed strange, because I selected Tailwind in the `create-next-app` options. Create-next-app surely would have installed what was needed right? So I checked my `package.json` and sure enough, the ***tailwindcss*** dependency was there, along with the React dependencies and types.

```json
"dependencies": {
  "next": "14.0.2",
  "react": "^18",
  "react-dom": "^18"
},
"devDependencies": {
  "@types/node": "^20",
  "@types/react": "^18",
  "@types/react-dom": "^18",
  "autoprefixer": "^10.0.1",
  "eslint": "^8",
  "eslint-config-next": "14.0.2",
  "postcss": "^8",
  "tailwindcss": "^3.3.0",
  "typescript": "^5"
}
```

In any case, I decided to check the `index.tsx` file, and it was even worse, spitting out '**... Cannot find module ...**' and '**... no interface exists ...**' errors all over the file! 😱

> Cannot find module 'next/image' or its corresponding type declarations.

> JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

![Cannot find module error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xu31p6i16tsgyhkysy57.jpg)

## First Attempts to Fix the Issue

Being relatively new to TypeScript and working with it, I vaguely remembered having issues with TypeScript imports before in Visual Studio Code, but thought I had taken care of the issue globally previously. Apparently not. 🤨

### VS Code SDK & TypeScript Version

So I ran the steps I thought I did [last time this happened](https://wheresbaldo.dev/tech/monorepos/update-turborepo-to-use-yarn-berry#update-yarn-berry), which was to install the **VS Code SDK** package from the CLI ...

```bash
yarn dlx @yarnpkg/sdks vscode
```

and then select the workspace TypeScript version, and finally restart the TypeScript server.

But ... it didn't work this time. I was still getting the same damn errors. 😒

So, I rolled up my sleeves, prayed to the Google-fu gods, and started searching for a solution.

### Opting Out of Yarn PnP

I found a few posts on Stack Overflow, but most of the "solutions" were to simply opt-out of Yarn PnP, which was exactly what I wanted to avoid. [This post on Stack Overflow](https://stackoverflow.com/questions/69238794/cannot-find-module-next-or-its-corresponding-type-declarations) for example had several people talking about setting the Yarn version to ***classic*** or adding the **nodeLinker: node-modules** option in `.yarnrc.yml` to downgrade Yarn and create the `node_modules` folder.

Uhh, no thanks... I'm not going back to the old `node_modules` mess!

### Installing the Dependencies with npm

Others in the same thread suggested to use npm to install the dependencies, and then re-run Yarn. But, that's completely pointless, and ... then why use Yarn at all in the first place? 🤔

### Explicitly Installing Types

I figured I might as well try installing the types explicitly, despite assuming they'd already be there (not in `package.json`, but in the main code), so I ran:

```bash
yarn add -D @types/next @types/tailwindcss
```

But that also did nothing as I figured, and it should also be noted that these packages have been deprecated per npmjs.org:

![Deprecated package warning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bny7ltc403g2nz1io3pl.jpg)

So, time to put on my thinking cap and figure this out the right way...

## The Actual Solution

I went back over what I did last time, and noticed I had also explicitly set the Yarn version to ***berry*** last time, which I hadn't done this time.

So I tried that again, and thankfully, finally, it got things working! 🎉

I had originally mistakenly assumed that because I bootstrapped the project with Yarn Berry, that it would have already been set to ***berry*** by default, but it seems that isn't the case.

Explicitly setting it to ***berry*** added a ***"packageManager": "yarn@4.0.1"*** to `package.json`, and then running yarn again after caused Yarn to pull in any updated dependencies, including those for TypeScript.

#### Step-by-Step Instructions

So here's what I had to do to fix the issue while keeping Yarn PnP, step-by-step:

1. From the CLI:

    ```bash
    yarn set version berry && yarn
    yarn dlx @yarnpkg/sdks vscode
    ```

2. Then in Visual Studio Code:
   1. Set the TypeScript version to the workspace version:
      1. Open a TypeScript file, and open the command palette:
         - on a Mac, press <kbd>&#8984;</kbd> + <kbd>Shift</kbd> + <kbd>p</kbd>
         - on a PC, press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>p</kbd>
      2. Choose ***Select TypeScript Version***.
      3. And then select ***Use Workspace Version***.
   2. Restart the TypeScript server:
      1. Go back into the command palette:
         - on a Mac, press <kbd>&#8984;</kbd> + <kbd>Shift</kbd> + <kbd>p</kbd>
         - on a PC, press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>p</kbd>
      2. Choose ***TypeScript: Restart TS server***.

> **Note:** [Yarn also recommends installing the *ZipFS* extension](https://yarnpkg.com/getting-started/editor-sdks) for VS Code, so you may need to get that as well if you don't already have it installed.

---

And that's it - super simple!

The errors disappeared in all of the files, and I was able to get back to work without having to resort to downgrading Yarn and opting out of PnP.

So if you're experiencing any issues like I was, whether:

> Cannot find module '...' or its corresponding type declarations

Or 

> JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

... and you don't want to revert back to the old `node_modules` mess, then try the steps above to see if they fix your issue(s).

Did this help you out? Let me know in the comments below!