Support Vite Rolldown

[cpojer]

Hello! When using npm:vite-rolldown@latest instead of Vite, Monaco and related tooling seem to fail to load. In the console, I see language-configuration.json and package.nls.json files from the monaco-languageclient package 404'ing. In the integration I'm currently using, the concrete issue is that syntax highlighting doesn't work, as it fails to load the corresponding definitions for it.

It's unclear to me if the issue is this repo, or if it's esbuild-import-meta-url-plugin, so it would be great to get some guidance on what might be wrong. Rolldown Vite does indeed not support esbuildOptions, and instead has a rolldownOptions field, and I'm not entirely sure if they are 100% compatible.

The repro should be replacing Vite with vite-rolldown.

[CGNonofr]

Hello

The main requirement is that the bundler should support the new URL('<path>', import.meta.url) syntax

Vite does in build mode, and we add the esbuild-import-meta-url-plugin for the dev mode, does rolldown support it?

[cpojer]

I didn't try a prod build, but in dev it doesn't seem to work.

[kaisalmen]

Hey @CGNonofr and @cpojer , I just did some tests with rolldown-vite as dev server in monaco-languageclient on this branch:
https://github.com/TypeFox/monaco-languageclient/tree/vite-next

I have commented all plugins (@codingame/esbuild-import-meta-url-plugin, @codingame/monaco-vscode-rollup-vsix-plugin and @vitejs/plugin-react) and that is the result:

npx vite --force
08:45:55 [vite] (client) Forced re-optimization of dependencies

  ROLLDOWN-VITE v7.1.14  ready in 494 ms

  ➜  Local:   http://localhost:20001/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

new URL("./resources/document-dark.svg", import.meta.url) doesn't exist at build time, it will remain unchanged to be resolved at runtime. If this is intended, you can use the /* @vite-ignore */ comment to suppress this warning.

new URL("./resources/document-light.svg", import.meta.url) doesn't exist at build time, it will remain unchanged to be resolved at runtime. If this is intended, you can use the /* @vite-ignore */ comment to suppress this warning.

new URL("./resources/folder-dark.svg", import.meta.url) doesn't exist at build time, it will remain unchanged to be resolved at runtime. If this is intended, you can use the /* @vite-ignore */ comment to suppress this warning.

new URL("./resources/folder-light.svg", import.meta.url) doesn't exist at build time, it will remain unchanged to be resolved at runtime. If this is intended, you can use the /* @vite-ignore */ comment to suppress this warning.

new URL("./resources/folder-open-dark.svg", import.meta.url) doesn't exist at build time, it will remain unchanged to be resolved at runtime. If this is intended, you can use the /* @vite-ignore */ comment to suppress this warning.

new URL("./resources/folder-open-light.svg", import.meta.url) doesn't exist at build time, it will remain unchanged to be resolved at runtime. If this is intended, you can use the /* @vite-ignore */ comment to suppress this warning.

new URL("./resources/root-folder-dark.svg", import.meta.url) doesn't exist at build time, it will remain unchanged to be resolved at runtime. If this is intended, you can use the /* @vite-ignore */ comment to suppress this warning.

new URL("./resources/root-folder-light.svg", import.meta.url) doesn't exist at build time, it will remain unchanged to be resolved at runtime. If this is intended, you can use the /* @vite-ignore */ comment to suppress this warning.

new URL("./resources/root-folder-open-dark.svg", import.meta.url) doesn't exist at build time, it will remain unchanged to be resolved at runtime. If this is intended, you can use the /* @vite-ignore */ comment to suppress this warning.

new URL("./resources/root-folder-open-light.svg", import.meta.url) doesn't exist at build time, it will remain unchanged to be resolved at runtime. If this is intended, you can use the /* @vite-ignore */ comment to suppress this warning.

@codingame/esbuild-import-meta-url-plugin uses the esbuild api and it does not work if configured.

The production build we use for GitHub Pages does no longer work. It did not need @codingame/esbuild-import-meta-url-plugin because rollup was used for production builds. It breaks after this:

new URL("../../../resources/clangd/workspace.zip", import.meta.url) doesn't exist at build time, it will remain unchanged to be resolved at runtime. If this is intended, you can use the /* @vite-ignore */ comment to suppress this warning.

Update: The error can be circumvented if you comment the line with /* @vite-ignore */, but I don't know if that makes the app work as intended.

So, it seems a new rolldown plugin is required for rolldown-vite that works in any case.

[kaisalmen]

So, it seems a new rolldown plugin is required for rolldown-vite that works in any case.

@CGNonofr For the production build it is sufficient to add /* @vite-ignore */ and comment the build target in the vite config. The clamgd example and all other examples work as expected. So, maybe we no longer need a plugin, but just the comments in the code for the dev server?

The speed improvement is really significant. Locally 6.22s (rolldown-vite) 1m 5s (vite using rollup). 🤯

[CGNonofr]

So, it seems a new rolldown plugin is required for rolldown-vite that works in any case.

@CGNonofr For the production build it is sufficient to add /* @vite-ignore */ and comment the build target in the vite config. The clamgd example and all other examples work as expected. So, maybe we no longer need a plugin, but just the comments in the code for the dev server?

The speed improvement is really significant. Locally 6.22s (rolldown-vite) 1m 5s (vite using rollup). 🤯

It's very surprising though, the bundler needs to bundle those files, and it says it can't find it, how can it work? are the assets event in the dist?

[kaisalmen]

It's very surprising though, the bundler needs to bundle those files, and it says it can't find it, how can it work? are the assets event in the dist?

You have to make them statically available. For example ../../../resources/clangd/workspace.zip must be available at resources/clangd/workspace.zip. That works. What I initially wrote was wrong, because the zip is not used by default.

Interestingly, the json and svg assets from monaco-vscode-api get transformed correctly in production and the theming works correctly. But they are not treated correctly in dev mode (e.g. theming is still broken like with vite without @codingame/esbuild-import-meta-url-plugin), although it should be done by rolldown-vite in both cases now. 🤷‍♂️

[sapphi-red]

Actually, rolldown-vite supports esbuild plugins in optimizeDeps.esbuildOptions.plugins (only as best effort though). I've added one minor change to make @codingame/esbuild-import-meta-url-plugin work with that compat layer. It's released in rolldown-vite 7.2.0-beta.1.

For the proper fix, it is tracked at vitejs/rolldown-vite#362.

[cpojer]

Thanks @sapphi-red! I tried using rolldown-vite 7.2.0-beta.2 and unfortunately it is not working for me. When I start Vite, it now prints:

[plugin: import.meta.url]
Error: not implemented

and it blames to PluginContextImpl inside of rolldown-vite.

I switched it to rolldownOptions instead (which I assume is not working for this plugin). The error went away, but it failed loading additional modules in monaco-vscode-api's file service override.

[sapphi-red]

@cpojer Hmm, I found one bug (vitejs/rolldown-vite#482), but that doesn't sound like the same.

it blames to PluginContextImpl inside of rolldown-vite.

PluginContextImpl doesn't exist in rolldown-vite. It exists in rolldown.

If pkg.pr.new in vitejs/rolldown-vite#482 doesn't work, would you create a reproduction?

[cpojer]

Oh sorry, the pnpm path was confusing in that stack and it's on another system so I couldn't copy it over 🙇‍♂️ The code I'm working with is internal so it might take a while for me to create a clean repro.

[kaisalmen]

Hi @sapphi-red and @cpojer I can confirm that @codingame/esbuild-import-meta-url-plugin works again with rolldown-vite@7.2.0-beta.2. It seem the compatibility layer will be removed again in the future: https://vite.dev/guide/rolldown#compatibility-layer-for-esbuild-options So, mid-term we need to find a solution.

[sapphi-red]

Before removing the compat layer, we'll resolve vitejs/rolldown-vite#362 for sure (which would allow you to remove the import-meta esbuild plugin), so no worries on that point.

[kaisalmen]

@sapphi-red thank you, that sounds good. @CGNonofr let's hope that will just work in the future.

[cpojer]

Ok, I fixed one issue with the compat layer but still trying to repo the second issue that fails to load files.

vitejs/rolldown-vite#516