microsoft / microsoft/TypeScript

Support automatically updating URL import references when using `new URL(<file>, import.meta.url)`

Open
#43,759 3 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Experience Enhancement Help Wanted Suggestion
Dominant language
Go
Stars
111k
Forks
14.3k
Avg merge
2d 4h
Merged PRs (30d)
132

Description

Bug Report

🔎 Search Terms

import.meta.url

🕗 Version & Regression Information
  • This is the behavior in every version I tried, and I reviewed the FAQ for entries about 4.3.0
⏯ Playground Link

Workbench repo

💻 Code

Given the following files:

folder/file1.ts

console.log('file1');

export const foo = 42;

different-folder/file2.ts

new URL('../folder/file1.js', import.meta.url);
import('../folder/file1.js');

export const bar = 5;
  1. Create a new directory sub-folder/ in root
  2. Move different-folder/ into sub-folder/ so that the layout becomes sub-folder/different-folder/file2.ts
  3. When prompted for "Update imports for 'different-folder'?" click "Yes"
🙁 Actual behavior

sub-folder/different-folder/file2.ts

new URL('../folder/file1.js', import.meta.url);
import('../../folder/file1.js');

export const bar = 5;

The same is true if folder/file1.js is moved to a different location.

🙂 Expected behavior

Similar to the dynamic import, a file reference based on import.meta.url that points to a different TypeScript file should correctly be renamed accordingly.

sub-folder/different-folder/file2.ts

new URL('../../folder/file1.js', import.meta.url);
import('../../folder/file1.js');

export const bar = 5;

VS Code supports the standard dynamic import to handle file renaming. Since import.meta.url and URL are a standard way of resolving files, I would expect VS Code to natively support it as well. For example, Parcel compatibility is implemented in https://github.com/parcel-bundler/parcel/issues/5473, is implemented in Webpack 5 https://github.com/webpack/webpack/pull/11075 and is scheduled for implementation in ESBuild https://github.com/evanw/esbuild/issues/312#issuecomment-800730525

This issue was originally filed at https://github.com/microsoft/vscode/issues/121391

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Workbench reproduction using new URL(<file>, import.meta.url) and compare it with the existing dynamic-import update behavior described in the report. Trace the VS Code import-renaming path that handles the move operation. Done means moving either referenced file updates the relative URL reference to the same target, matching dynamic imports.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, vscode
Domain
developer-experience, tooling
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.