Migrating JS from sprockets to ViteJs

[dr-nyt]

So we have some really old javascript that gets compiled into a single file using sprockets. We can't use them directly wit ViteJs because we will need to add import {something} from './something';. Is there a way to make it bundle everything into a single file like sprockets?

[ElMassimo]

Hi Shehryar!

If you can't (or don't want) to migrate your code to ESM, it might be better to continue using sprockets.
There's no advantage to using Vite if your code is not using modules.

If you want to, you can combine sprockets and Vite Ruby in the same project, using Vite only for new JS/TS.

[dr-nyt]

I guess that would be the best thing to do. On another note, Is it possible to reference a javascript function compiled by ViteJs inside HTML?

// views/my.html.erb
<button onclick="myfunc()">Click Me</button>

// frontend/js/my.js
function myfunc() {
    console.log("OK!");
}

This does not work for me.

[ElMassimo]

It's possible, but since modules don't leak global references, you need to explicitly make it available:

// In the same file that defines the function
Object.assign(window, { myfunc })

[dr-nyt]

Thank you, that helps!

[jpriollaud]

@dr-nyt thank you for posting this. @ElMassimo maybe you should add this to the Sprockets migration docs.