Resolving Yarn Install and TypeScript Issues in a NestJS Project

In the world of JavaScript and TypeScript development, setting up a new project can sometimes bring unexpected challenges. Recently, while initializing a new NestJS project using the nest n . command, I encountered a peculiar issue with Yarn's installation process and TypeScript integration in Visual Studio Code. This blog post details the problems I faced and the steps I took to overcome them, hopefully helping others who might find themselves in similar situations.

Yarn Install Failure and Solution

After generating a new NestJS project, the first order of business was to install dependencies using Yarn. However, executing yarn install --silent consistently failed, leaving me puzzled and without a clear path forward. After some trial and error, I discovered that the absence of a yarn.lock file within the project directory was the culprit. Here's how I resolved the issue:

1. Manually created a yarn.lock file in the root of the project directory.
2. Ran yarn install without the --silent flag.

This approach successfully installed all necessary dependencies. But then, I noticed something odd: the node_modules folder was missing.

Understanding Yarn PnP

A quick search revealed that Yarn, by default, uses a feature called Plug'n'Play (PnP) which eschews the traditional node_modules folder in favor of a more efficient module resolution strategy. PnP aims to address issues related to dependency management and performance by directly linking dependencies in a project. For more information on Yarn PnP, you can visit Yarn's official PnP documentation.

VSCode and TypeScript Integration Issue

With the dependencies installed, the next challenge was getting TypeScript to work correctly in Visual Studio Code. I noticed that VSCode could not recognize or properly import modules like @nestjs/common, indicating an issue with TypeScript's module resolution.

Resolving TypeScript Issues with Yarn PnP

Yarn PnP's unconventional approach to managing node_modules can lead to integration issues with IDEs that expect a traditional file structure. Fortunately, Yarn provides a solution through Editor SDKs designed to make PnP compatible with various editors. To fix the TypeScript issue in VSCode, I followed these steps, based on the guidance found in Yarn's Editor SDKs documentation:

1. Installed Yarn's Editor SDKs by running the appropriate command from the documentation.
2. Configured VSCode to use the installed SDKs, ensuring that TypeScript could correctly resolve modules under the PnP system.

These steps restored full TypeScript functionality in VSCode, allowing me to proceed with my NestJS project development without further issues.

Conclusion

While Yarn's PnP offers significant benefits in terms of performance and dependency management, it can introduce challenges, especially for those accustomed to traditional JavaScript project structures. However, with the right information and tools, these challenges can be effectively overcome. I hope sharing my experience can help others navigate similar issues more smoothly in their development journey.