Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$
Light
Dark
System
Ask  Question

Esbuild bundle failed with dynamic require


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"


After that I bundled the imported app.js using the following Esbuild task args:

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"
]


However, I got the following error from the bundled result:

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
Can anyone help me to fix this? Should I check and fix every line inside the Metronic source file?

Thanks


user
Raymond Lagonda 1 year ago
5 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)

user
Faizal Author1 year ago

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


user
Faizal Author1 year ago

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


user
Raymond Lagonda 1 year ago

I think I'm making progress but still stumped. Here are my steps:

install node deps for jquery

yarn add jquery


initialize jquery since no export ESM
jquery.js

import jquery from "jquery";
window.jQuery = jquery;
window.$ = jquery;


import jquery.js
app.js

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: &fnof;, toArray: &fnof;, get: &fnof;, pushStack: &fnof;, &hellip;]
add
: 
&fnof; (selector, context)
addBack
...


but now I'm getting error that S2 doesn't have default opts

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");


I saw there's already Rails / Esbuild ready for Demo1
https://devs.keenthemes.com/metronic/rails/demo1/download

Is it possible to make standard inclusion for Esbuild regardless of the web framework? I'm using Demo21.
Thanks


user
Raymond Lagonda 1 year ago

Hi Faizal,

Thanks for your help. I removed the Esbuild external marking for the following

"--external:jquery",
"--external:datatables.net*",
"--external:@popperjs/*",
"--external:moment"


Esbuild can bundle it, however, I got another error in plugins.bundle.js for uncaught reference for Jquery

Uncaught ReferenceError: $ is not defined
 at theme/plugins/global/plugins.bundle.js (plugins.bundle.js:19803:1)


How to correctly include the Jquery dependency?


user
Faizal Author1 year ago

Hi Raymond,

The issue could be at this line. 


"--external:@popperjs/*",


Could you please remove it and find another to import it? Maybe try to import it in the app.js file;


import "@popperjs/core"


Thanks


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(