Keen 3 does not seem to be compatible with ES modules
Hello, folks!
I've been using Keen 2 for a while and when I updated my Rails version from 6 to 7, I decided to move from webpack to importmaps. JavaScript there is written in a modular way and was written like that for a long time.
When I did that with Keen 2, there were no problems. The application.js would just import the global necessary bundles of Keen 2 like this:
import "plugins/global/plugins.bundle"
import "plugins/custom/prismjs/prismjs.bundle"
import "js/scripts.bundle"Locations of those bundles are defined in import map and they get preloaded nicely.
But with the 3rd version, I face a problem. If I do everything in the same manner, I get a console error from `plugins.bundle`:
Uncaught TypeError: Cannot set properties of undefined (setting 'moment')
(it comes from Boostrap 5.2 initialization)
I tried to work around the problem by putting those scripts inside of a <body>, like in an example but then I get another error:
Uncaught TypeError: searchObject.on is not a function
from scripts.bundle this time.
(I would not want to continue with this path though, unless there absolutely is no other option, I'd rather use new paradigms rather than cluttering the global scope)
Error disappears if I remove the import maps shim (polyfill to make import maps work in browsers that do not support it yet), errors disappear.
So I am basically stuck now - I can't use Keen 3 with importmaps/ES modules and I can't define these scripts globally because of the shim.
Are there any other options here? And why the new version does not work while in JS module?
Repro steps without rails:
1. Open index.html from demo1.
2. Move script tag with `plugins/global/plugins.bundle` to <head>. Add type="module" to it.
3. Remove scripts.bundle, as that would fail earlier due to hoisting now.
4. You should receive "TypeError: Cannot set properties of undefined (setting 'moment')".
Replies (3)
Hi Karolis SakaviÄius
Sorry for the delay. Glad that you have resolved it 
I hope this issue can help others as well.
Thanks
Resolved. Building with webpack makes everything ESM compatible. \o/
I can't edit a message for some reason but
"I tried to work around the problem by putting those scripts inside of a , like in an example but then I get another error:"
is
"I tried to work around the problem by putting those scripts inside of a body tag, like in an example but then I get another error:"
