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 , 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 . 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')".

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 (3)

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

Resolved. Building with webpack makes everything ESM compatible. \o/

Hi Karolis Sakavičius

Sorry for the delay. Glad that you have resolved it happy
I hope this issue can help others as well.

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  :(