lazy load from node_modules in Rails 7 with ESBuild

Question

Is there a way to expose the /node_modules/intel-tel-input/build/js/utils.js script in a rails 7 app with esbuild?

The intl-tel-input plugin recommends lazy loading utils.js like so:

import intlTelInput from 'intl-tel-input';

const input = document.querySelector("#phone");
intlTelInput(input, {
    utilsScript: "path/to/utils.js"
});

My problem is I don't know what the "path/to/utils.js" is. I have tried /node_modules/intl-tel-input/build/js/utils.js /intl-tel-input/build/js/utils.js, /intl-tel-input/js/utils.js but nothing in the node_modules directory is exposed to the browser.

Is there a way to expose utils.js using esbuild or rails asset path?

Answer 1

Have you tried to use asset helper to generate the path to utils.js

asset('intl-tel-input/build/js/utils.js')

in addition, you can try to precompile to check for any errors while loading the js files.

rails assets:precompile

you might also add an event listener. Wost case scenario download the source code here and add it to public folder intl-tel-input-19.5.6/build/js/utlis.js

here is the example in public folder

    <script src="/intl-tel-input-19.5.6/build/js/utils.js"></script>

I know it is not a common rails practice but it's a workaround for packages.