Error: module not found in yarn

In my yarn workspace, I have organized folders named public and server. While working with TypeScript in VS Code, I encounter an error message stating:

Cannot find module 'x'

Interestingly, even though the error persists, IntelliSense suggests x. I have included both x and @types/x in my project, yet installing @types/x does not seem to make a difference. Thank you.

Windows 1909 (Latest)
Visual Studio Code 1.43 (Latest)
TypeScript ^3.8.3 (Latest)
Yarn 2.0.0-rc.30 (Latest)

I have also attempted to locate type roots for yarn but haven't been successful so far. Could someone please provide me with information about the directory where the type root is located?

typescriptyarnpkgyarn-workspaces

Answer №1

According to information found in the documentation:

In order to enable features such as go-to-definition, it is necessary to use a plugin like ZipFS.

  1. To create a new directory named .yarn/sdks, run the following command:

    yarn dlx @yarnpkg/sdks vscode

  2. For security purposes, VSCode requires manual activation of the custom TS settings:

  3. Open a TypeScript file and press ctrl+shift+p

  4. Select "Select TypeScript Version"

  5. Choose "Use Workspace Version"

Answer №2

Check out the guidelines provided at this link: https://yarnpkg.com/getting-started/editor-sdks

Advanced Integrated Development Environments (IDEs) like VSCode or IntelliJ require specific setup for TypeScript functionality. This page serves as a database of configurations for various editors we've used - feel free to contribute!

For instance, if you are using a "vscode" IDE, run:

yarn dlx @yarnpkg/pnpify --sdk vscode

The command above will configure your vscode project to utilize yarn by adding the sdks directory within your .yarn settings and instructing your IDE to use it with additions to your settings.json:

"typescript.tsdk": ".yarn/sdks/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true

Pro Tip: Yarn stores its packages in zip archives. To be able to inspect the imports from your node_modules managed by yarn, consider installing the ZipFS extension

This extension enables VSCode to access files directly from zip archives, maintained as part of the Yarn toolset. By combining this extension with the Yarn SDK, you can seamlessly view and edit files from your cache.

Answer №3

Encountering a similar issue here. The error seems to be originating from the linter, which might be looking for the package lock file (but yarn uses yarn.lock).

To address this, make sure to review your VSCode user settings.json: 

"eslint.packageManager": "yarn",
"prettier.packageManager": "yarn",
"npm.packageManager": "yarn"

These adjustments have resolved the issue for me. Your experience may vary.

UPDATE: punctuation correction made.

Answer №4

After some extensive troubleshooting, the solution was finally found after about 30 minutes. Follow these steps:

  1. First, add the ZipFS extension to your VSCode for easy access to definitions.
  2. Next, execute yarn dlx @yarnpkg/sdks vscode to enable Yarn support in VSCode.
  3. Open the command palette using CTRL+SHIFT+P and select "Select TypeScript version".
  4. Choose the "Workspace Version" that begins with .yarn.
  5. In the terminal, run 
    yarn config set nodeLinker node-modules
    , followed by yarn.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to seamlessly integrate a CommonJS library into your ES Module project while maintaining TypeScript compatibility?

I am interested in creating a project with Typescript. The project is built on top of the Typescript compiler, so I am utilizing Typescript as a library, which I believe is a CommonJS library. Although the project is designed to run on Node (not in the bro ...

node.jstypescriptes6-modulescommonjs

Merging an assortment of items based on specific criteria

I have the following TypeScript code snippet: interface Stop { code: string } interface FareZone { name: string; stops: Stop[]; } const outbound: FareZone[] = [{name: 'Zone A', stops: [{ code: 'C00'}] }, {name: 'Zone B ...

javascripttypescript

Can you use TypeScript to define generic React functional components?

I am looking to add annotations to a generic in a React functional component like the following: import React, {useEffect, useState} from "react"; interface PaginatedTableProps{ dataFetcher: (pageNumber: number) => Promise<any>, columnNames: ...

javascriptreactjstypescripttypescript-genericsreact-typescript

Unexpected behavior with onKeyPress in React-Native Windows resulting in missing key press events

Currently, I am working on a Windows app using react-native version 0.54.0. For one of the functionalities, I have incorporated a TextInput element and would like to use onKeyPress. Here is my code snippet: <TextInput ref = { this.setTextInputRef } on ...

typescriptreact-native

Applying a setvalidator to a FormControl doesn't automatically mark the form as invalid

HTML code <div> <label for="" >No additional information flag:</label> <rca-checkbox formControlName="noAdditionalInfoCheckbox" (checkboxChecked)="onCheckboxChecked($event)"></rca-chec ...

angulartypescriptcheckboxangular-reactive-forms

Learn how to set up browser targeting using differential loading in Angular 10, specifically for es2016 or newer versions

Seeking advice on JS target output for compiled Angular when utilizing differential loading. By default, Angular compiles TypeScript down to ES5 and ES2015, with browsers using either depending on their capabilities. In order to stay current, I've b ...

angulartypescript

The specified 'contactId' property cannot be found within the data type of 'any[]'

I am attempting to filter an array of objects named 'notes'. However, when I attempt this, I encounter the following error: Property 'contactId' does not exist on type 'any[]'. notes: Array < any > [] = []; currentNot ...

arraysangulartypescriptangular6

Guide on deactivating the div in angular using ngClass based on a boolean value

displayData = [ { status: 'CLOSED', ack: false }, { status: 'ESCALATED', ack: false }, { status: 'ACK', ack: false }, { status: 'ACK', ack: true }, { status: 'NEW', ack ...

javascriptangulartypescript

Tips for utilizing ngIf based on the value of a variable

Here is the code from my file.html: <button ion-button item-right> <ion-icon name="md-add-circle" (click)="save();"></ion-icon> </button> The content of file.ts is: editmode = false; I am trying to achieve the foll ...

angulartypescriptangular2-template

Exploring Angular data iteration with Tab and its contentLearn how to loop through Tab elements

Upon receiving a response from the API, this is what I get: const myObj = [ { 'tabName': 'Tab1', 'otherDetails': [ { 'formType': 'Continuous' }, { 'formType& ...

javascriptjqueryangulartypescriptangular8

Tips for customizing the legend color in Angular-chart.js

In the angular-chart.js documentation, there is a pie/polar chart example with a colored legend in the very last section. While this seems like the solution I need, I encountered an issue: My frontend code mirrors the code from the documentation: <can ...

angularjschartstypescriptchart.js

What advantages could learning ReactJS first give me before diving into NextJS?

Just mastered TS and now faced with the decision of choosing a framework. I'm curious why it's recommended to learn ReactJS before NextJS. I've read countless articles advising this, but no one seems to delve into the reasons behind it. Ca ...

javascriptreactjstypescriptuser-interfacenext.js

Navigate to the parent element in the DOM

Looking to add some unique styling to just one of the many Mat dialog components in my project. It seems like modifying the parent element based on the child is trickier than expected, with attempts to access the DOM through the <mat-dialog-container> ...

htmlcssangulartypescriptdom

Prevent Click Event on Angular Mat-Button

One of the challenges I'm facing involves a column with buttons within a mat-table. These buttons need to be enabled or disabled based on a value, which is working as intended. However, a new issue arises when a user clicks on a disabled button, resul ...

javascripthtmlangulartypescriptangular-material

When attempting to utilize the dispatch function in a class-based component, an invalid hook call error may

I am a beginner with react-redux. I currently have this code that uses react, redux, and TypeScript. The code utilizes a class-based component and I am attempting to use dispatch to trigger an action to increment the value of counter. However, I encountere ...

reactjstypescriptreduxreact-redux

Transform ECMAScript Observable / Zen Observable into RXJS Observable

I currently have an ECMAScript Observable that is compliant with specifications, specifically sourced from the wonka library. I am facing challenges in converting this type of observable to an rxjs 6 observable. It appears that this conversion was possibl ...

typescriptrxjsobservableurql

Simulating a PubSub publish functionality

I have been trying to follow the instructions provided in this guide on mocking new Function() with Jest to mock PubSub, but unfortunately I am facing some issues. jest.mock('@google-cloud/pubsub', () => jest.fn()) ... const topic = jest.fn( ...

javascriptnode.jstypescriptgoogle-cloud-platformjestjs

How to pass props to customize styles in MUI5 using TypeScript

Currently, I'm in the process of migrating my MUI4 code to MUI5. In my MUI4 implementation, I have: import { createStyles, makeStyles } from '@material-ui/core'; import { Theme } from '@material-ui/core/styles/createMuiTheme'; ty ...

reactjstypescriptnext.jsmaterial-ui

Expanding a JSON type in Typescript to accommodate interfaces

Expanding on discussions about passing interfaces to functions expecting JSON types in Typescript, this question delves into the complexities surrounding JSON TypeScript type. The scenario involves a JSONValue type that encompasses various data types like ...

jsontypescripttypesinterfacecasting

Incorporating a module with the '@' symbol in a Node, Express, and Typescript environment

I recently started using Node and Typescript together. I came across a file where another module is imported like this import { IS_PRODUCTION } from '@/config/config';. I'm confused about how the import works with the @ symbol. I could real ...

node.jstypescriptexpress