question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Auto import from yarn workspaces using package's name in the package.json

See original GitHub issue

Issue Type: Bug I have a typescript project, that uses yarn workspaces in it. When I import any entity from a package, that is a workspace, using the auto import feature - the only option I have is to import it relative to the project’s root. Instead I want to also be able to import them in the same way I import any entity from a regular package from the node_modules. I have to manually refactor all the imports that vscode generates for me to keep up with the code style in the project, which is time consuming.

Steps to reproduce:

  1. clone this minimal demo https://github.com/Zver64/workspaces-test
  2. run yarn in the project root
  3. open the file packages/package-b/index.ts
  4. remove the import of the constant named PACKAGE_A_CONST
  5. try to add this import back using vscode’s context menu

Expected behavior: There is an option to add the import from the node_modules, that would result to this import:

import { PACKAGE_A_CONST } from "package-a-name"

since the package exists in the node_modules as a symlink to the workspace

Actual result: The only option in the context menu is: image Which leads to this import:

import { PACKAGE_A_CONST } from "packages/package-a";

VS Code version: Code - Insiders 1.67.0-insider (Universal) (27dd7b41b6a830d5ea8eb896d5b2bb9c4bcd95ee, 2022-04-12T18:42:30.490Z) OS version: Darwin x64 21.3.0 Restricted Mode: No

System Info
Item Value
CPUs Intel® Core™ i9-9980HK CPU @ 2.40GHz (16 x 2400)
GPU Status 2d_canvas: enabled
canvas_oop_rasterization: disabled_off
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
metal: disabled_off
multiple_raster_threads: enabled_on
oop_rasterization: enabled
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_renderer: enabled_on
video_decode: enabled
video_encode: enabled
webgl: enabled
webgl2: enabled
Load (avg) 2, 2, 2
Memory (System) 32.00GB (3.43GB free)
Process Argv –crash-reporter-id bc00bb11-be46-473c-958c-3aa4617dbf9e
Screen Reader no
VM 0%
Extensions (52)
Extension Author (truncated) Version
increment-selection alb 0.2.0
Bookmarks ale 13.2.4
clipboard-history Anj 1.0.7
vscode-zipfs arc 3.0.0
vscode-toggle-quotes Bri 0.3.6
better-toml bun 0.3.2
gitignore cod 0.7.0
postcss css 1.0.9
dart-code Dar 3.38.2
flutter Dar 3.38.1
vscode-markdownlint Dav 0.47.0
vscode-eslint dba 2.2.2
xslt-xpath del 1.2.3
xml Dot 2.5.1
eslint-disable-snippets drK 1.3.0
gitlens-insiders eam 2022.4.1302
prettier-vscode esb 9.5.0
copy-relative-path-and-line-numbers ezf 0.3.1
code-runner for 0.11.7
shell-format fox 7.2.2
gitlab-workflow Git 3.42.1
todo-tree Gru 0.0.215
debug-visualizer hed 2.3.1
vscode-drawio hed 1.6.4
openvpn idl 0.2.3
search-node-modules jas 1.3.0
ts-debug kak 0.0.6
vscode-status-bar-title kso 0.0.3
CamelCase Mar 1.0.5
markdown-shortcuts mdi 0.12.0
git-graph mhu 1.30.0
vscode-goto-node-modules mrl 1.2.1
vscode-docker ms- 1.21.0
jupyter ms- 2022.3.1000901801
remote-containers ms- 0.232.6
remote-wsl ms- 0.66.0
vscode-typescript-next ms- 4.7.20220408
color-highlight nau 2.5.0
copy-json-path nid 0.2.0
markdown-checkbox PKi 1.8.0
bracketeer pus 1.3.1
vscode-thunder-client ran 1.16.2
json-to-js-object sal 0.0.4
swapdiff sha 0.1.0
markdown-preview-enhanced shd 0.6.2
vscode-scss-formatter sib 2.4.2
vscode-fileutils sle 3.5.0
rewrap stk 1.16.3
non-breaking-space-highlighter vik 0.0.3
vscodeintellicode Vis 1.2.19
vscode-conventional-commits viv 1.24.0
vim vsc 1.22.2
A/B Experiments
vsliv695:30137379
vsins829:30139715
vsliv368cf:30146710
vsreu685:30147344
python383cf:30185419
vspor879:30202332
vspor708:30202333
vspor363:30204092
pythonvspyl392:30422396
pythontb:30258533
pythonptprofiler:30281269
vshan820:30294714
pythondataviewer:30285072
vscod805:30301674
pythonvspyt200:30323110
bridge0708:30335490
bridge0723:30353136
vsaa593:30376534
testflightcf:30433671
pythonvs932:30404738
wslgetstarted:30449409
pythonvspyt640:30438691
vscscmwlcmt:30465136
cppdebug:30466689
pynewfile477:30451556

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:1
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
IllusionMHcommented, Apr 15, 2022

You need either use paths which you commented out or use proper config with project references as packages should be treated independently https://github.com/RyanCavanaugh/project-references-demo/

0reactions
cbdevelopercommented, May 19, 2022

Hey, @RyanCavanaugh I have a weird issue that might be related to this.

I’m using yarn workspaces.

The name of the packages in their package.json are: @packages/admin , @packages/common, etc.

packages
  admin
    package.json // Has a dependency to @packages/common
  common
  user
package.json

When I’m working in the admin package files, I’d like to get auto import suggestions from the @packages/common files.

But the weird thing is that the auto import suggestion for the @packages/common are only working for types, and not for actual variables and constants.

Obs 1: If I write the import manually, it works fine. Obs 2: If there is already an import to @package/common in the file, it will suggest other variables from that import.

Any ideas on what is happening and how could I fix it?

Also: do I need a tsconfig.json in the root of my workspace? Currently I only have one per package.

Thanks


UPDATE

Not sure why I was having this issue, but now it’s gone.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Workspaces - Yarn
Workspaces are a new way to set up your package architecture that's available by default starting from Yarn 1.0. It allows you to...
Read more >
Typescript: Working with Paths, Packages and Yarn Workspaces
Advantages of using yarn workspaces​​ With yarn workspaces, all package dependencies are installed in one command — yarn install — from the root...
Read more >
Wrong import in projects with yarn workspaces when 'Use ...
Run yarn install . Monorepo will be automatically setup using Yarn Workspaces. Go to: ./packages/package-b/lib/package-b.js file.
Read more >
How to make VSCode auto import work in a lerna-yarn ...
I want to access interfaces declared in shared from the backend package. packages/shared/src/index.ts: export interface IPerson { name: string; ...
Read more >
Yarn Workspaces: Organize Your Project's Codebase Like A Pro
5. Using A Wildcard (*) To Import All Your Packages # ... Until now, for every new package we have added, we were...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found