Failed to execute 'define' on 'CustomElementRegistry

[Szymon Gackowski]

When I try to use any CodersRank widget in app with js built by webpack, I get following error:

app.js:5132 Uncaught TypeError: Failed to execute 'define' on 'CustomElementRegistry': parameter 2 is not of type 'Function'.
    at Module../resources/js/app.js (app.js:5132)
    at __webpack_require__ (app.js:52999)
    ....

Surprisingly, widgets (mostly) work, but due to code errors caused by this other stuff (like Vue components) doesn't work.

How can I get around it?

Full code can be seen here:
https://github.com/apsg/gackowski.edu.pl/blob/main/resources/js/app.js

[Vladimir Kharlampidi]

parameter 2 is not of type 'Function'

wondering what is it then? Can you do the console.log for imported classes?

widgets (mostly) work

all widgets work?

[Szymon Gackowski]

This:

import CodersrankWorkExperience from '@codersrank/work-experience';
import CodersrankEducation from '@codersrank/education';
console.log(CodersrankWorkExperience, CodersrankEducation);

gives following output:

all widgets work?

No, the skills widget doesn't show up

[Vladimir Kharlampidi]

Not sure why imports are broken in your case but try to import file directly like so:

import CodersrankWorkExperience from '@codersrank/work-experience/esm/codersrank-work-experience.js';

[Szymon Gackowski]

@nolimits4web works like a charm. It even made the skills widget work. Thanks!