bug: TypeError: Cannot set property observedAttributes

[dwirz]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.4.0

Current Behavior

I'm getting the following error when running my compiled components in an Next.js app.

 ⨯ node_modules/@stencil/core/internal/client/index.js (2401:0) @ proxyComponent
 ⨯ TypeError: Cannot set property observedAttributes of class HTMLElement extends _interface_element_js__WEBPACK_IMPORTED_MODULE_3__.Element {

I'm aware that there are other problems with rendering web components in Next.js/React environment. But with some quirks and by using Object.defineProperty(Cstr, 'observedAttributes', ... instead of directly assign the value with Cstr.observedAttributes = ... I got it working. (PR incoming)

Expected Behavior

No TypeError when running server side in Next.js app instead of browser.

System Info

System: node 20.8.0
    Platform: darwin (22.5.0)
   CPU Model: Apple M2 (8 cpus)
    Compiler: /Users/dwirz/projects/migros/poc-mdx-nextjs/node_modules/@stencil/core/compiler/stencil.js
       Build: 1696258196
     Stencil: 4.4.0 🍫
  TypeScript: 5.2.2
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.20.0

Next.js: v13.5.4
react: 18.2.0

Steps to Reproduce

Unfortunately this is not possible at the moment since i'm depending on several work in progress dependencies/PRs which i atm all patch manually to get everything working. 🙊

Code Reproduction URL

https://github.com/ionic-team/stenci

Additional Information

No response

[rwaskiewicz]

Hey @dwirz 👋

Thanks for the bug report + PR!

We'd like a little more information here. From our side, we don't quite understand why this change is necessary based on the information provided. We'd love the have the ability to reproduce the issue that you're seeing so that we can verify the fix works as intended. This is important for the long term maintenance of the code, so that we can understand why a change was made and to avoid regressions.

Can you do me a favor and provide a minimal reproduction case for the error you're seeing? From there, we can move forward with your PR.

Thanks

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[dwirz]

Hi @rwaskiewicz

I created a repo with a minimal reproduction description here.

Cheers

[rwaskiewicz]

Hey @dwirz 👋

Looking through your description of the problem (emphasis mine):

Now run npm run app:clean and restart the app with npm run app:start. This problem is gone. Yay... But now we get a TypeError: Cannot set property observedAttributes..., which is probably caused of the implementation of linkedom which we use as a shim for window server-side. So we patch (#4915) this by running

I'm not sure this is necessarily a Stencil issue either. It's rather difficult for us to account for other assumptions other libraries may make - I don't think it would be wise for us to change Stencil just for the purposes of this particular use case/technology stack, as maintaining this long term would be difficult. As a result, I'm going to close this out. Thanks again for the issue/reproduction case, we really appreciate it 💙

[dwirz]

Hey @rwaskiewicz

Thanks for the feedback.

I'll had another look at it and you're right I found a way to handle it on our side. 🙂 smartive/stencil-nextjs-example #21

Cheers