cnschroter

cnschroter

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:

Marked As Solved

joaoevangelista

joaoevangelista

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'

Also Liked

DevotionGeo

DevotionGeo

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

cnschroter

cnschroter

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.

cnschroter

cnschroter

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 !

Where Next?

Popular in Questions Top

Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
sergio
In Ruby, I can go: User.find_by(email: "foobar@email.com").update(email: "hello@email.com") How can I do something similar in Elixir? ...
New
Tee
can someone please explain to me how Enum.reduce works with maps
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
itssasanka
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: https://hexdocs.pm/ecto/Ecto.Schema.html#module-...
New
logicmason
Hi there, I'm working through my first release with elixir/phoenix. I've built a release with distillery and found that it crashes when I...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? https://hexdocs.pm/ecto/Ecto.Repo.h...
New
Exadra37
Sometimes I want to check if the input into a function is not a blank string. My first approach: defmodule Example do def do_stuff(s...
New
jc00ke
Expanding on this topic: https://forum.elixirforum.net/t/map-typespec-question/19217 Let’s say I have a map with required and optional k...
New

Other popular topics Top

peerreynders
Manning 2016 Halloween weekend sale via Deal of the Day Friday, October 28 - Half off all MEAPs - code WM102816LT Saturday, October 29 ...
326 29600 154
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
itssasanka
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: https://hexdocs.pm/ecto/Ecto.Schema.html#module-...
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 35421 110
New
New
script
If I have a string “1000 cfu/ml” . I want to remove the characters and / and space . So the string is like this "1000" What is the ...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New

We're in Beta

About us Mission Statement