Jquery not loading in Phoenix 1.6 and esbuild

Hello,

this is my first post looking for help with esbuild and jquery.

I’m creating a new project using phoenix 1.6 with a vendor theme that I bought in wrapbootstrap.

I was able to add the css, js, images and fonts but keep getting an error with jquery.

This is my current app.js file

// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
import "phoenix_html"
// Establish Phoenix Socket and LiveView configuration.
import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view"
import topbar from "../vendor/topbar"
import jquery from "../vendor/theme/plugins/jquery/dist/jquery"

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

import "../vendor/theme/js/app.min"
import "../vendor/theme/js/vendor.min"

error:

app.min.js:1 Uncaught ReferenceError: $ is not defined
at app.min.js:1:56904
at app.js:58:21

Any help would be appreciable

Thanks :slight_smile:

1 Like

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

2 Likes

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 !

1 Like

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.

2 Likes

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'
5 Likes

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.