How to define functions on the window object?

[adeeb1]

I have defined some functions in my app/javascript/entrypoints/application.ts to be used in JavaScript in my Rails views (app/views). Here's an example:

import { renderChSwiper } from '../src/shared_components/ch_swiper';

(window as any).renderChSwiper = renderChSwiper;

In my view, I use this function within a script tag, as follows:

<script>
  var result = renderChSwiper({ test: true });
</script>

On my development environment, when I load the page, I am getting Uncaught ReferenceError: renderChSwiper is not defined. When the page finishes loading, I also don't see the function defined on the window object when I go into the browser's developer tools console and type window.renderChSwiper. In Webpacker, this worked without an issue, and it seems Vite is doing something differently with regards to the window object.

I understand this is not best practice, but I am converting a decent-sized application from Webpacker, and this pattern is used a lot.

How can I define functions on the window object?

[ElMassimo]

You are using a non-module script, so it would always execute before the entrypoint does (Vite scripts are always module).

The best way to prevent loading issues is to leverage ES modules. If you export renderChSwiper and import it in your script (you could inline the import path using vite_asset_path), then the browser would take care of loading that script first.

[adeeb1]

Thank you @ElMassimo! I've just gotten to working on this. Can you provide a quick example of this please?

[adeeb1]

Update: I got this working. It turns out there were other JavaScript errors that prevented the entrypoint from loading entirely. My code snippets above work, with the only caveat that I need to wrap my window object function calls in a document ready event, like so:

<script>
  $(document).on('ready', function() {
    var result = renderChSwiper({ test: true });
  });
</script>