fix: transform import.meta.url in optimized deps (fix #8427)

[CGNonofr]

fix #8427

Description

In dev mode, deps are optimized using esbuild so multiple files end up in the same bundle. If one of those file contains the new URL('any/path', import.meta.url) syntax, it will be kept as-is and it will not work as the given relative path will be wrong relative to the bundled file

Note that it already works in build mode

Additional context

Since there is no other esbuild plugin, I'm not sure where to put it so I've just inlined it

Note that it uses import.meta.resolve which requires the --experimental-import-meta-resolve option (NODE_OPTIONS=--experimental-import-meta-resolve vite ...)

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the PR Title Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[CGNonofr]

Is there anything I can do to help moving forward on this?

I have no idea why the pipeline are failing and the errors don't seem to be related at all to my change

[bluwy]

Note that it uses import.meta.resolve which requires the --experimental-import-meta-resolve option (NODE_OPTIONS=--experimental-import-meta-resolve vite ...)

This is causing the CI to fail.

I'm also not sure if this is the best solution. It will resolved to a path, but that path likely isn't valid either. It can't be import-ed to be used because the URL doesn't exist in the browser. It might be most accurate if import.meta.url is swapped to something like new URL('/node_modules/the-dependency/the/file/that/has/the/code.js', location.href), so you get new URL('...', new URL('...', location.href)). But then you'd also have to consider it works for optimizing in build and SSR, sourcemaps, etc.

There's a lot of edge cases to get this right, and we need tests for it too.

[CGNonofr]

Sorry, I've missed your answer!

Do you acknowledge the issue?

I'm also not sure if this is the best solution. It will resolved to a path, but that path likely isn't valid either. It can't be import-ed to be used because the URL doesn't exist in the browser.

I'm not sure what you mean, why isn't the path likely valid? Why doesn't the URL exist in the browser?

It might be most accurate if import.meta.url is swapped to something like new URL('/node_modules/the-dependency/the/file/that/has/the/code.js', location.href), so you get new URL('...', new URL('...', location.href))

Is there a way to know the final path of the bundle? It's required to implement that alternative way

But then you'd also have to consider it works for optimizing in build and SSR, sourcemaps, etc.

I'm not sure how to test that, but the code is just replaced by something that can already be done by the developer and should work so I'm not sure how it can introduce issues

There's a lot of edge cases to get this right, and we need tests for it too.

Sure it needs test. I was just waiting for some feedback to save me from doing it if it was rejected

[tien]

Any progress on getting this merged? Vite is the only modern bundler with this issue as far as I'm aware.