Jquery not loading in Phoenix 1.6 and esbuild

Try running npm install jquery --save inside the assets folder, then adding jquery to the app.js as import jquery from "jquery".

Thanks for your quick answer !

I did that and I managed to get jquery working if I comment the lines of the vendor files.

When I add the app.min vendor I get an error at the end of that file

“$(document).ready((function(){App.init()}));”

So by removing that final part of the file, the error on the console log disappears.

But by adding the other vendor file: vendor.min an other issue arises:

vendor.min.js:6 Uncaught ReferenceError: jQuery is not defined
at vendor.min.js:6:102430
at vendor/theme/js/vendor.min.js (vendor.min.js:6:102430)
at __require (app.js:27:46)
at app.js:35:8
at app.js:32:5

When I follow the error on the source files I get to this part of the code:

t(jQuery)}((function(t){“use strict”;t.ui=t.ui||{},t.ui.versio

Any idea of how I could make these vendor files work??

Now my app.js file looks like this:

import jQuery from “jquery”

window.jQuery = jQuery
window.$ = jQuery
$ = jQuery;

import “../vendor/theme/js/app.min”
import “../vendor/theme/js/vendor.min”

Thanks !

Ok. I made it work.

For other. If you have vendor files in your vendor folder, add the dependencies directly into these files at the top part.
After that, just add the main vendor files directly to app.js

Hope this helps some one.

oh the PITA of import, Js does not care about where you put your imports, they will always go up before any statement or assignment, so the window.$ = jQuery window.jQuery = jQuery part is always after all imports, breaking some plugins/dependencies. A clean hack, to not alter the vendor files, is to create a “setup jquery file” and import that before the vendors, making sure the assignments are executed as the file is imported.

//  myjquery.js
import jQuery form 'jquery';
window.jQuery = jQuery
window.$ = jQuery

// app.js

import './myjquery'
import '…/vendor/theme/js/app.min'
import '…/vendor/theme/js/vendor.min'

Hello, could you please paste your modify just_a_vendor.js here.
I think it will help alot

I got trouble import bootrap.js file.

In my app.js , I got

import "../vendor/js/my_jquery.js"
import "../vendor/js/bootstrap.js"

in my my_jquery.js, I got

import jquery from './jquery.min.js'
window.jQuery = window.$ = jquery;

Esbuild always complain about the jquery,

 [ERROR] Could not resolve "jquery"

    vendor/js/bootstrap.js:8:90:
      8 │ ...ined' ? factory(exports, require('jquery'), require('popper.js')) :
        ╵                                     ~~~~~~~~

  You can mark the path "jquery" as external to exclude it from the bundle, which will remove this error. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.

✘ [ERROR] Could not resolve "popper.js"

    vendor/js/bootstrap.js:8:109:
      8 │ ...ined' ? factory(exports, require('jquery'), require('popper.js')) :
        ╵                                                        ~~~~~~~~~~~

  You can mark the path "popper.js" as external to exclude it from the bundle, which will remove this error. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.

Please help me resolve this trouble.

Any luck with this? Do you mind sharing your solution for this.