Create Custom Component - can't make it work?!

Ask us anything How do I?
1

Hi,

I’m trying to play with custom components and follow your documentation - but can’t get it to work.

  1. I’ve verified my Node.js installation is: v21.7.3. (with node --version in terminal) running on Mac OS.
  2. In a terminal performed: npm init @weweb/component
  3. When prompted entered a name for the component and selected “element”.
  4. Performed: npm install
  5. Performed: npm run serve
  6. Browsed: https://localhost:8080
    (you mention “Advanced Settings” nothing of that kind in that page:

image
image1096×602 19.4 KB

I guess that looks ok right?

  1. I launch weweb.io, from more-hamburger-menu I choose “Development”
  2. Then I click “Open dev editor”
  3. Dev editor opens, and I click “Dev” in the top menu
  4. I click the “+ Add Local element” button and get this:

image
image453×318 16.4 KB

  1. Expanding the drop-down shows the image below, not logical to me what to choose but I believe I should choose “Custom” so I do that.

image
image445×676 34.3 KB

  1. I give it a name and press “Save”

image
image452×361 20 KB

  1. The “this-explodes” element appears in the window and weweb restarts and gives this error:

image
image993×363 77.2 KB

I have tried it several times - but with the same result. I’ve read and read the documentation, I believe I’m doing it correctly, what am I missing here?

2

Check out the console. Answer is waiting for you there in form of an Error probably.

3

have you tried using node v20 or v22?

4

Ok, it seems to be a problem in the project I’m trying to add the custom component to. If choose an empty project no problem.

The console gives a it is an error loading a stylesheet - but where is that hiding (I’ve checked custom code).

image
image347×183 17 KB

5

So I found the solution. For some reason I’d for some weeks ago played around with the NPM plugin - and a upload component. Never got back to test this, but removing the NPM plugin solved my problem.

1 Like