Upgrading from Webpacker to Shakapacker - Functions defined later

[adeeb1]

I've recently upgraded from Webpacker 5.4.4 to Shakapacker 7.2.2, and I have defined some functions in my app/javascript/packs/application.ts to be used in JavaScript in my Rails views (app/views). Here's an example:

app/javascript/packs/application.ts

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. However, I noticed that the function is defined when the page finishes loading by typing the name in the browser's developer tools console.

Previously with Webpacker, this wasn't an issue: the function was defined. What could be different with Shakapacker that would cause this issue?

For reference, my app/views/layouts/application.html.erb file contains the Shakapacker assets:

<%# Sprockets assets %>
<%= stylesheet_link_tag    'application', media: 'all' %>
<%= javascript_include_tag 'application' %>

<%# Shakapacker assets %>
<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>

[adeeb1]

Update: I found that nesting these in an "on document loaded" function (like below) solves the issue. I don't think this will be an issue on production since assets will have been precompiled, but on development it would be annoying to wrap all of them in one.

$(document).on("ready", function() {
  ...
});

[adeeb1]

Update #2: Found that passing defer: false to javascript_pack_tag gets the behavior I had before. Here's the source from the troubleshooting doc. I'm still looking to see if there are any issues with this approach.

app/views/layouts/application.html.erb

<%# Sprockets assets %>
<%= stylesheet_link_tag    'application', media: 'all' %>
<%= javascript_include_tag 'application' %>

<%# Shakapacker assets %>
<%= javascript_pack_tag 'application', defer: false %>
<%= stylesheet_pack_tag 'application' %>

[ahangarha]

Thanks for sharing the solution.

[adeeb1]

Unfortunately my answer worked one time, but it stopped working for some reason, and I couldn't get it working again. To summarize the above, I'm having a couple of issues that I didn't have with Webpacker 5.x on my development environment:

1. As described above, functions defined in my app/javascript/packs/application.ts are not yet defined in the <script> tags in my .html.erb files, causing errors with components not rendering. This was not an issue before.
2. Script files in vendor/assets/javascripts don't seem to be loading. This was not an issue before.

I've dug through the change logs on Webpacker and compared the old and the new Webpack config for my project, but I could not find the issue. I'd appreciate any help.