WebComponent (ESM)

Help / Discuss
1

Hi there … hope you’re doing fine! I have a question regarding WebComponents …

I have created a web-component named kmap-solvee. The component can be used locally from npm and or as a bundle, loaded from jsdelivr or skypack. The following works in a simple html-file:

<script type="module">
  import {KmapSolvee} from 'https://cdn.jsdelivr.net/npm/kmap-solvee/+esm'
  window.customElements.define('kmap-solvee', KmapSolvee);
</script>
<kmap-solvee operations="polynomial" strategy="polynomial">1/22(x+2)(x+1)^2x=0</kmap-solvee>

It does not work in inside a xwiki page:

{{html}}
<script type="module">
  import {KmapSolvee} from 'https://cdn.jsdelivr.net/npm/kmap-solvee/+esm'
  window.customElements.define('kmap-solvee', KmapSolvee);
</script>
<kmap-solvee operations="polynomial" strategy="trigonometrical">1/22(x+2)(x+1)^2x=0</kmap-solvee>
{{/html}}

It spits out two errors in the console:

compute-engine.min.esm.js:50 Uncaught TypeError: Cannot read properties of undefined (reading 'I')
    at new e (compute-engine.min.esm.js:50:59073)
    at model.ts:5:19
e @ compute-engine.min.esm.js:50
(anonymous) @ model.ts:5
require.min.js?r=1:5 Uncaught Error: Mismatched anonymous define() module: function(){return o}
https://requirejs.org/docs/errors.html#mismatch
    at makeError (require.min.js?r=1:5:1795)
    at T (require.min.js?r=1:5:8677)
    at Object.s [as require] (require.min.js?r=1:5:15042)
    at requirejs (require.min.js?r=1:5:2335)
    at Object.add (xwiki.js:1066:9)
    at klass.registerShortcuts (modalPopup.js:217:16)
    at klass.initialize (modalPopup.js:54:10)
    at klass.<anonymous> (prototype.js?r=1:120:50)
    at klass.initialize (xwiki.bundle.min.js?cache-version=1719321170000&defer=false&language=de:76:256)
    at klass.initialize (prototype.js?r=1:447:22)

How come? What is the difference here? Any ideas?

Thanks in advance for and advice!

Holger

2

Have you tried with {{html clean="false"}}? HTML cleaning is on by default and it may remove some HTML elements / attributes (such as the script tag).

3

Hi Marius,

thanks for your response!

It actually does load the component, but it fails executing its code …

Nevertheless, I tried it. Adding clean="false" didn’t help :-/

Greets Holger

4

Then the problem may be that the JavaScript code / library / module you’re trying to use has support for RequireJS (AMD) and it detects that RequireJS is present and thus tries to define itself and load its dependencies through RequireJS, which fails because of Common Errors .