Failed to construct 'CustomElement' - NextJS

[manuelc2209]

I'm having trouble with the recommended method for customizing a library.

For example, I wanted to add a specific component to test bundling it locally.

Here's what I did:

I cloned the repository and added my component.
I tried both methods to include this customized library in a side project:

• Npm pack: I bundled the library into a tarball and installed it in my side project using npm i ../shoelace-tar. This works, but I encountered an error.
• Npm link: I used npm link . and npm link "package" in the other repository locally. This method did not work, regardless of what I tried.

Note: I ended up even removing the component I added, and the same error occurs

Issue with the Npm Pack Approach

The only problem I see with the npm pack approach is shown in the image below:

Specific Component Causing the Error

The strange part is that the error mentioned above only occurs when I use a Tab component, like in the example below:

Without the Tab component "sl-tab", everything is rendering fine!

Does anyone have any idea why this is happening ?

Reproduce steps:

• git clone git@github.com:shoelace-style/shoelace.git
• cd shoelace
• npm install
• npm run build
• npm pack
• go to your React project and drop the tarball on the root e.g.
• npm i ./name-of-tarball

[manuelc2209]

Update: This only happens on the branch next, does not happen on tag 2.15.1

@claviska @KonnorRogers seems like something has been introduced on the next branch that relates to attribs on Tab?

[KonnorRogers]

Found the problem.

class SlTab extends ShoelaceElement {
  tabIndex = 0
}

^ For some reason that blows everything up. Wrapping it in a @property() decorator fixes it.

[KonnorRogers]

Fix added as part of this PR:

#2051

[manuelc2209]

@KonnorRogers thanks Konnor, that's why i was having an weird behavior about it ! I just noticed yesterday that it was indeed a diff between next & 2.15.1!