How to add a JS node_module into a Laravel 10 + Inertia + Vue 3 project

I have an established and mature Laravel application. When I load a blade view from the Laravel portion of the site I get no errors in my chrome dev tools. NOTE: I use Mix, and there are no MIX warnings.

However, when I load a basic test Inertia + Vue 3 component inside this app I get my 'hello World', but my dev tools are filled with error messages:

jquery.js:4059 Uncaught TypeError: $(...).autocomplete is not a function

ok - so autocomplete is a feature within jquery-ui, which I have loaded inside the node_modules. Clearly it is not being picked up when I load a Vue 3 component.

There is no autocomplete inside the Inertia + Vue side. So somehow, this is being picked up inside the Inertia + Vue 3 component.

NOTE: All the bade views with autocomplete belong to the Laravel side of the app do not give any dev tools errors.

I have spent the last 2 hours with every AI going, and everyone of their suggestions fails. Loading a node_module should be a piece of cake.

dis-mleering

2 years ago

Level 1

If I understand correctly, jQuery works fine system wide. jQuery UI (which includes autocomplete) works but only from within a blade context, and not from within a Vue context.

How are you incorporating jQuery UI into your system? Via CDN? Local install + require() call?

I haven't used jQuery in quite some time now, and I haven't run into this specific issue. I have however, encountered similar issues where some of my dependencies were accessible via blade, but not from within my Vue components.

What ended up solving it for me was to ensure that when requiring the 3rd party library, that it gets assigned as a top level variable (directly into the window). Using the Axios dependency as an Example:

window.axios = require('axios');

^^ would go in app.js/bootstrap.js (wherever you normally require your dependencies)

Not sure if this helps, but I'm hoping it gets you pointed in the right direction at least.

1 like

vincej

2 years ago

Level 15

many thanks- i will check that out when I have a chance, I gave up on this, and now just load via cdn

Snapey

2 years ago

Level 122

I had a similar issue;

https://laracasts.com/discuss/channels/javascript/understanding-webpack-modules

Please or to participate in this conversation.