Hi,
I'm using Elixir Phoenix stack (v1.14.1) and trying to integrate Metronic (v8.1.15) into the app.js using Esbuild.
After I bundled Metronic using Gulp, I imported the required js files using index.html as an example of the following:
app.js
// Vendor
import "../theme/plugins/global/plugins.bundle.js"
import "../theme/js/scripts.bundle.js"
import "../theme/plugins/custom/fullcalendar/fullcalendar.bundle.js"
import "https://cdn.amcharts.com/lib/5/index.js"
import "https://cdn.amcharts.com/lib/5/xy.js"
import "https://cdn.amcharts.com/lib/5/percent.js"
import "https://cdn.amcharts.com/lib/5/radar.js"
import "https://cdn.amcharts.com/lib/5/themes/Animated.js"
import "https://cdn.amcharts.com/lib/5/map.js"
import "https://cdn.amcharts.com/lib/5/geodata/worldLow.js"
import "https://cdn.amcharts.com/lib/5/geodata/continentsLow.js"
import "https://cdn.amcharts.com/lib/5/geodata/usaLow.js"
import "https://cdn.amcharts.com/lib/5/geodata/worldTimeZonesLow.js"
import "https://cdn.amcharts.com/lib/5/geodata/worldTimeZoneAreasLow.js"
import "../theme/plugins/custom/datatables/datatables.bundle.js"
import "../theme/js/widgets.bundle.js"
import "../theme/js/custom/widgets.js"
import "../theme/js/custom/apps/chat/chat.js"
import "../theme/js/custom/utilities/modals/users-search.js"
args: [
"js/app.js",
"--bundle",
"--target=es2017",
"--loader:.woff=file",
"--loader:.woff2=file",
"--loader:.svg=file",
"--loader:.ttf=file",
"--loader:.eot=file",
"--outdir=../priv/static/assets",
"--external:/fonts/*",
"--external:/images/*",
"--external:jquery",
"--external:datatables.net*",
"--external:@popperjs/*",
"--external:moment"
]
msgport.js:70 {"notify":"init_tab"}
app.js:30 Uncaught Error: Dynamic require of "@popperjs/core" is not supported
at app.js:30:11
at plugins.bundle.js:12886:86
at theme/plugins/global/plugins.bundle.js (plugins.bundle.js:12886:255)
at __require2 (app.js:33:52)
at app.js:31:8
at app.js:77:21
DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND
Uncaught Error: Dynamic require of "@popperjs/core" is not supported
Hi Raymond,
We have no experience in Elixir Phoenix build tools. But would suggest using webpack because seems both build tools are quite similar.
In the webpack, there is an option to expose the plugin globally called ProvidePlugin. So jquery and $ will be globally available.
<a href=""https://webpack.js.org/plugins/provide-plugin/#usage-jquery>https://webpack.js.org/plugins/provide-plugin/#usage-jquery</a>
I'm not sure if Elixir Phoenix esbuild tool has this option. Could you please verify that?
Thanks
Regarding the Rails build tool, it uses its assets pipeline. We just import the assets using bundle js files only. Eg. plugins.bundle.js, scripts.bundle.js, etc.
Thanks
I think I'm making progress but still stumped. Here are my steps:
install node deps for jquery
yarn add jquery
import jquery from "jquery";
window.jQuery = jquery;
window.$ = jquery;
import "./jquery.js"
import "../theme/plugins/global/plugins.bundle.js"
import "../theme/js/scripts.bundle.js"
console.log($.fn)
Object [jquery: "3.6.0", constructor: ƒ, toArray: ƒ, get: ƒ, pushStack: ƒ, …]
add
:
ƒ (selector, context)
addBack
...
Uncaught TypeError: Cannot read properties of undefined (reading "defaults")
at theme/plugins/global/plugins.bundle.js (plugins.bundle.js:19803:14)
$.fn.select2.defaults.set("theme", "bootstrap5");
Hi Faizal,
Thanks for your help. I removed the Esbuild external marking for the following
"--external:jquery",
"--external:datatables.net*",
"--external:@popperjs/*",
"--external:moment"
Uncaught ReferenceError: $ is not defined
at theme/plugins/global/plugins.bundle.js (plugins.bundle.js:19803:1)
Hi Raymond,
The issue could be at this line.
"--external:@popperjs/*",
import "@popperjs/core"