In Visual Studio Code, the auto-import feature is limited to providing only absolute paths when using Lerna subpackages in TypeScript

Recently, I encountered a strange issue with my Visual Studio Code where it started suggesting only absolute imports from the sub-package level in my Lerna packages. For instance:

https://i.sstatic.net/fr7FW.png

The auto import is recommending the path @package/server/src/database instead of just ../database, even though the file being edited is within the same package and one folder below the file containing the database variable I need to use.

Could this be a bug or a configuration problem?

I've tried changing the Import Module Specifier setting for TypeScript in Visual Studio Code to all three options (auto, relative, and absolute), but none of them seem to resolve the issue.

typescriptvisual-studio-codeauto-import

Answer №1

When using Visual Studio Code, navigate to the File menu followed by Preferences, then Settings, and finally User Settings.

"typescript.preferences.importModuleSpecifier": "relative"

This configuration has been working well for me. It now allows imports like:

import { RegistrationComponent } from '../../abc-modules/registration/registration.component';

instead of:

import { RegistrationComponent } from 'app/abc-modules/registration/registration.component';

Answer №2

When using Visual Studio Code, navigate to File -> Preferences -> Settings -> User Settings

Look for the option importModuleSpecifier

Answer №3

I was facing an issue where I had specified the baseUrl setting in my tsconfig.json configuration file.

{
  "compilerOptions": {
    "baseUrl": ".", // remove
  },
}

Once I removed this setting, VSCode immediately started importing using relative paths. The advantage of this approach is that you can still utilize the VSCode option importModuleSpecifier with a value of shortest, and relative path imports will continue to function correctly.

Answer №4

After landing here via a Google search, I encountered the complete opposite issue. Despite being from a different Lerna package, my Visual Studio Code instance consistently imported the relative path.

Eventually, I realized that the reason for this was simply because I had forgotten to include the correct package in my consuming package's package.json file.

Thankfully, now everything is functioning as intended.

Answer №5

If you're facing import issues, consider using a mix of the baseUrl and paths configurations.

Your tsconfig.json file:
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "holograph/src/*": ["src/*"]
    },
  }
Adjust your VSCode settings:
"typescript.preferences.importModuleSpecifier": "non-relative" // or "shortest"

In my project structure, when I'm in the apps/app directory, automatic imports work fine in VSCode using from 'holograph/src/ui/...'. However, within the packages/holograph folder, imports default to src/ui, causing build errors. Manually importing from hologrpah/src/ui solved this issue for me by re-mapping the paths as described above.

node_modules
apps (next.js applications)
 ├── app
 |   └── pages
 ├── operator
 ├── storybook
packages (shared components & libraries)
 ├── holograph
 |   └── src
 |       └── ui
 ├── tsconfig
 ├── eslint-config-holograph
...

Note: Another solution that seemed to work involved adjusting the baseUrl to one level higher. 🤷‍♂️

  "compilerOptions": {
    "baseUrl": "../",
    },
  }

Answer №6

If you're searching for a way to use relative paths within a project, consider incorporating an option in settings.json

"typescript.preferences.importModuleSpecifier": "project-relative"

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

Error message in TypeScript with Puppeteer library: "Element not found"

Incorporating puppeteer-core as a dependency in my TypeScript project within Visual Studio 2019 has caused an issue during the build process. The error message displayed is shown by a red squiggly line under Element: https://i.stack.imgur.com/HfJCu.png ...

typescriptpuppeteer

Manually close the AntD Menu without using any shortcuts

I'm facing a unique situation with my table implemented using antd. Each row has a dropdown menu that opens a modal upon clicking. To ensure the dropdown menu doesn't trigger the row click event, I used stopPropagation on the menu item click. Eve ...

javascriptreactjstypescriptantd

When a user clicks on empty space in Angular 2, the page will automatically redirect

When I receive a response from the server, I want to redirect to another page. However, this process takes around 60 seconds, so in the meantime, I want to display a spinner. Once the response is received, I should be redirected to the new page. Sounds sim ...

angulartypescriptangular2-routingangular7angular-routing

What is the keyboard shortcut in VSCode for creating a new local variable and assigning the result of an expression to it?

When working in Eclipse, there is a useful shortcut (default CTRL + 2 + L) that can create a new local variable to store the result of a selected expression. For example... this.doSomeCalculation(); If you position the cursor over the line above and use ...

typescriptkeyboard-shortcutsvisual-studio-code

Can you provide guidance on implementing Material-UI's `withStyles` decorator in a practical scenario?

I'm currently solving the challenge of annotating the types for the different styles in my code. After converting from plain JavaScript to TypeScript, I am now adding type annotations. Here is a snippet of the code: import * as React from 'react ...

typescriptmaterial-ui

Issue with recognizing baseUrl and paths in tsconfig.json in Visual Studio 2017 for Typescript files

Currently, I am utilizing Visual Studio 2017 ASP.NET Core with Angular. However, I am facing an issue where Visual Studio does not seem to recognize the shortcuts when I attempt to set baseUrl/paths. I am unsure if this is a result of misconfiguration on ...

angularvisual-studiotypescriptasp.net-corevisual-studio-2017

Bespoke Socket.io NodeJS chamber

I am currently developing an application involving sockets where the requirement is to broadcast information only to individuals within a specific room. Below is a snippet of the code from my server.ts file: // Dependencies import express from 'expre ...

node.jstypescriptexpresssocket.io

Invoke a TypeScript function within JavaScript code

As a result of the limitations of IE10 and earlier versions, I find myself in need to reimplement the Import/Upload functionality that I had initially created since FileReader is not supported. After some consideration, I have opted to utilize an iFrame in ...

javascriptjqueryangularjsasp.net-mvctypescript

React TypeScript: The type 'Boolean' does not have any callable properties

I am dealing with a boolean value stored in state and my goal is to toggle the display of certain parts of the DOM based on the true or false value of myBoolean. const { global } = useContext(globalContext); ... return ( {global.myBoolean ? ( <p> ...

reactjstypescript

The offline functionality of the Angular Progressive Web App(PWA) is experiencing difficulties

As per the official guidelines, I attempted to create a PWA that functions in offline mode using pure PWA without angular-cli. However, despite following the official instructions, I was unable to make it work offline. The document in question can be foun ...

angulartypescriptangular-cliprogressive-web-apps

Can you explain the meaning behind the exclamation mark in Angular syntax?

I've noticed this popping up in a few spots lately, but I haven't been able to find any information about it. I'm intrigued by the use of the '!' symbol in Angular syntax. Can anyone explain what it does? https://i.sstatic.net/sj ...

javascriptangulartypescript

Eliminate the loading screen in Ionic 2

Within my app, there is a button that triggers the opening of WhatsApp and sends a sound. Attached to this button is a method that creates an Ionic loading component when clicked. The issue I am facing lies with the "loading.dismiss()" function. I want the ...

androidangulartypescriptionic2

Transmitting image data (blob) from the frontend to the backend using Next.js and tRPC (T3 stack)

I'm currently facing a challenge in sending a leaflet map image from the backend to the frontend using the leaflet-simple-map-screenshoter library for capturing the image. The library returns a blob, which I need to transmit back to the backend and sa ...

typescriptnext.jszodtrpct3

Issue with child component EventEmitter functionality not functioning as expected

I am working on a CreateProjectComponent, which is a child component. My goal is to close a div in the parent component when the closeModal function is triggered. Here is the template (html) code: <div (click)="closeModal(true)"></div> And ...

angulartypescriptangular2-directivesangular2-services

Organize and eliminate unnecessary imports in tsx and ts files using Visual Studio

Despite the trend among my colleagues to switch to Visual Studio Code for front end development, I stand by my preference for using Visual Studio as my single IDE. One feature that I really miss is Visual Studio Code Organize imports. How can I remove unu ...

c#reactjstypescriptvisual-studiovisual-studio-2019

Karma Test Requirement: make sure to incorporate either "BrowserAnimationsModule" or "NoopAnimationsModule" when using the synthetic property @transitionMessages within your application

TEST FILE import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { BrowserAnimationsModule } from '@angular/platform- browser/animations'; import { ManagePageComponent } from './manage-page.component& ...

javascriptangulartypescriptangular-clikarma-jasmine

How can I access a file uploaded using dxFileUploader?

I am facing an issue with retrieving a file from dxFileUploader (DevExpress) and not being able to read it in the code behind. The file is only appearing as an object. Here is My FileUploader : { location: "before", ...

typescriptdevexpressdevextreme

When testing my POST request online, it functions properly. However, I am facing difficulties in getting it to work in next.js as I keep receiving a 405

I am currently working on establishing a connection to Zoho Creator in order to retrieve some data. After successfully testing the request on and receiving the correct response, I encountered an issue while trying to implement it within a next.js applicat ...

typescriptpostnext.jszohoapp-router

The import component functions correctly when it is located in the app folder, but does not work when it is installed as

I have a situation with an angular 2 component. When I place it in app-name/src/app/component-folder/component.ts and import it as import {Component} from './component-folder/component', everything works perfectly fine. However, if I install the ...

angulartypescript

A TypeScript function that converts a value into an array if it is not already an array, ensuring the correct type is output

I'm attempting to develop a function that wraps a value in an array if it is not already an array. export function asArray<T extends Array<any>>(value: T): T export function asArray<T>(value: T): T[] export function asArray(value: a ...

typescript