codersrank-org / summary-widget

Integrate your CodersRank profile summary to your personal website
https://codersrank.io
MIT License
23 stars 13 forks source link

Failed to execute 'define' on 'CustomElementRegistry #4

Closed apsg closed 3 years ago

apsg commented 3 years ago

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

nolimits4web commented 3 years ago

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?

apsg commented 3 years ago

This:

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

gives following output:

image

all widgets work?

No, the skills widget doesn't show up

nolimits4web commented 3 years ago

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';
apsg commented 3 years ago

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