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

[TimvdLippe]

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 parcel-bundler/parcel#5473, is implemented in Webpack 5 webpack/webpack#11075 and is scheduled for implementation in ESBuild evanw/esbuild#312 (comment)

This issue was originally filed at microsoft/vscode#121391

[TimvdLippe]

@RyanCavanaugh I would be happy to contribute a fix for this issue, but I am not sure where to start. Do you mind sharing some pointers to relevant code to get going?

[fregante]

I'd love to see this. I'm looking for a way to add file references and have them understood/updated by the IDE when moving files.

Possible candidates are, with various degrees of support and functionality:

• new URL("./file.js", import.meta.url) - Generally suggested by Parcel
• require.resolve("./file.js") - The right way in Node, but Error: require is not defined in webpack's bundle
• import.meta.resolve("./file.js") - The "standard" way, not supported by webpack
• import "./file.js" with {type: "url"} - Wishful thinking

[lgarron]

I wanted to look at what it would take to support import.meta.resolve(…), as this is the clear standard syntax for import references going forward¹ and support is important for libraries with portable web worker code.

I found it easiest to dive into the code and submit a draft PR at: #59945 (review)

I think I'm on the right track, but need help with a specific part of the code and would also appreciate general feedback on the approach!

Footnotes

1. Note that import.meta.resolve(…) was proposed and standardized for this purpose since this issue was originally created, supplanting the previous non-standard approaches with a semantically clear approach. I'm not against the other approaches, but I think import.meta.resolve(…) is most important one to support as of 2024. ↩