Suggested imports in a yarn monorepo are not being automatically added when selected

I've noticed that many people are asking similar questions, but my situation seems a bit unique as I haven't found anyone else with the same issue.

Currently, I'm working on a file in packages/frontend/client, specifically packages/frontend/client/src/components/NavBar.tsx, and I'm trying to import a component from packages/frontend/lib/src/components/LibButton/index.tsx.

When I type in the client component and press Ctrl+Space, I get a suggestion for LibButton @goe/lib. However, when I select this option with Enter or a click, the import is not inserted into the code. Additionally, nothing is actually added to the line of code, yet the changes indicator shows up next to the title, indicating there have been changes even though there aren't any.

Any ideas on what could be causing this?

UPDATE: While checking the window output for errors, I came across this:

2024-02-21 13:41:49.596 [error] <semantic> TypeScript Server Error (5.3.3-sdk)
Debug Failure.
Error: Debug Failure.
    at getAutoImportSymbolFromCompletionEntryData

It appears that TypeScript may not be handling yarn-2 monorepos properly, and unfortunately, I haven't found any information online about possible workarounds :/

I appreciate any help you can provide! Thanks!

typescriptvisual-studio-codehadoop-yarn

Answer №1

To resolve the issue, I implemented a solution involving two separate tsconfig files. The first is the default tsconfig.json used by vscode, where I included paths to other packages from which imports are needed. For example: 

"include": ["src", "../", "../../common/"]

However, this caused build errors. To address this, I made adjustments in the tsconfig.build.json file by adding an extra exclusion like so:

"exclude": [
    "**/*.test.ts*",
    "src/testing",
    "../../common/",
    "../lib",
    "../graphql"
  ]

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

Angular with Firebase: How to ignore a field in a query

I am curious to see if my current structure is compatible with Firebase, or if I need to make adjustments. Let's take a look at an example using the "/rooms" endpoint, which contains an array of Room objects: export class Room { id: number; p ...

javascriptangulartypescriptfirebase

Implement ExpressTS on vercel platform

I have recently developed an Express TypeScript project on GitHub and now I am attempting to deploy it to Vercel. The folder structure of the project is as follows, with 'dist' containing app.js and 'src' containing app.ts. dist dto mi ...

typescriptexpressbackendvercel

Improving the clarity of Jest snapshot test logs using styled from MUI

Currently, I am working with MUI v5 along with styled components and Jest snapshot testing. I am looking for a way to improve the logs generated when a snapshot test fails. Below is an example of the component I am dealing with: const styledProperties = n ...

typescriptmaterial-uistyled-components

Accessing collection values from referenced document IDs in Firestore---I have provided a unique version of the text

I have two fire store collections with the following reference images: . I am trying to retrieve the firstName and title from these collections. The signup_id is referenced from the document id of coll-signup. Below is the code snippet of what I have done ...

angulartypescriptfirebaseangularfire2google-cloud-firestore

Using ternary operator to set multiple variables in setState

Conditional Operator for Setting State in React I am wondering if there is a way to set the state with a variable that holds the correct state value using setState method. interface state { isfiltered: array<boolean> } this.setState({ ...

reactjstypescript

Issue: Angular is indicating that the 'feedbackFormDirective' member is implicitly assigned with type 'any'

I am encountering an error in my project while using Angular version 12. Despite extensive research, I have been unable to find a solution. Here is my .ts file: import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Feedba ...

javascriptangulartypescriptresetangular-forms

Changing a d3 event from JavaScript to Typescript in an Angular2 environment

I am a beginner in Typescript and Angular 2. My goal is to create an Angular2 component that incorporates a d3js tool click here. However, I am facing challenges when it comes to converting it to Typescript. For instance, I am unsure if this code rewrite ...

javascriptangulard3.jstypescript

Is there a way to maintain formdata between components in Angular?

With only the tools of @Input, @Output, routing, and activatedRoute at my disposal, I set out to create a dynamic application. In this project, there are two crucial components: addbook and showbook. The addbook component features a form with a submit bu ...

javascriptangulartypescript

User update function is not being triggered by Ionic 2 Express call

I am currently working on implementing a feature in my Ionic 2 program that updates a user field when triggered. The code snippet below is from my user-service.ts file: // Update a user update(user: User): Observable<User> { let url = `${this.u ...

javascriptnode.jsexpresstypescriptionic2

"Upon invoking the services provider in Ionic 2, an unexpected undefined value was

I encountered an issue while setting a value in the constructor of my page's constructor class. I made a call to the provider to fetch data. Within the service call, I was able to retrieve the data successfully. However, when I tried to access my vari ...

angulartypescriptionic2ionic3

Vuefire encountering an issue with Vue 3 and throwing a Vue.use error

After setting up a Vue app and importing Vue from the vue module, I encountered an issue: ERROR in src/main.ts:4:5 TS2339: Property 'use' does not exist on type 'typeof import("/data/data/com.termux/files/home/ishankbg.tech/node_modules/vue/ ...

javascripttypescriptvue.jsvuejs3vuefire

Unable to locate the module from my personal library in Typescript

The Query Why is my ng2-orm package not importing or being recognized by vscode when I try to import Config from 'ng2-orm'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser&a ...

angulartypescriptionic2

VSCode does not show errors in TSX files by default

As I develop my Next.js app with TypeScript, one major issue I encounter is the lack of immediate feedback on syntax errors in .tsx files. It's frustrating to only discover errors after opening each file or waiting for the project to break down. In a ...

reactjstypescriptnext.jstsx

Have I repeated myself in defining my class properties?

Currently, I'm enhancing my understanding of Typescript with the development of a discord.js bot. However, I have come across a piece of code and I am uncertain about its redundancy: import Discord from 'discord.js'; export default class B ...

typescript

What is the solution to resolving a Typescript error within an imported library?

I've encountered a Typescript error that I'm unable to resolve because it doesn't originate from my code. The issue arises when I import a NextJs/React module named next-seo and use it as instructed: <NextSeo config={seoConfig} /> The ...

typescriptnext.jsreact-typescript

Since integrating redux-persist, accessing the current state of the redux store has become a challenge

For the past two days, I've been searching for answers to my problem without any luck. It seems like no one else is experiencing the exact issue I'm having, so I must be missing something obvious. Ever since I added redux-persist, I can no longe ...

typescriptreduxredux-persist

What is the best way to locate an item within a Redux array when working with TypeScript?

Below is the content of my slice.ts file. interface iItem { Category: string; Id: string; } interface iDataState { Items: Array<iItem>; } const initialState: iDataState = { Items: [], }; reducers: { updateItem: (state, action: PayloadAc ...

reactjstypescriptreduxredux-toolkit

Is there a way to add an event listener to dynamically generated HTML using the v-html directive?

I have a string variable named log.htmlContent that contains some HTML content. This variable is passed into a div to be displayed using v-html. The particular div will only be displayed if log.htmlContent includes an img tag (http: will only be present in ...

typescriptvue.jsvue-cli

Consolidate multiple generic items into a single entry

In my current project, I am structuring the types for a complex javascript module. One of the requirements is to handle multiple types using generics, as shown in the snippet below: export interface ModelState< FetchListPayload, FetchListR ...

javascripttypescript

What is the best approach to dynamically update CSS using onChange in TypeScript?

I am facing an issue with 2 input fields on my website. I want to create a functionality where if a user enters data into one field, the CSS of the other field changes dynamically. For instance, I would like to change the class "changeAmount" to "display:n ...

reactjstypescript