bug: Client-side error with formAssociated web component generated with @stencil/react-output-target in Next.js leads to: Uncaught RangeError: Maximum call stack size exceeded

[baumgm94]

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.22.2

Current Behavior

Using a Stencil Web Component (the formAssociated flag set to true) wrapped by @stencil/react-output-target within a form in a Next.js App, leads to an client-side error Uncaught RangeError: Maximum call stack size exceeded

Expected Behavior

The Stencil web component, generated as a React component via @stencil/react-output-target and used within an HTML form in a Next.js application, should function without errors. Specifically, setting formAssociated: true on the component should not result in any client-side errors, and no Uncaught RangeError: Maximum call stack size exceeded error should be thrown.

System Info

No response

Steps to Reproduce

1. Clone Repository
2. Install dependencies: npm ci
3. Build web-components: npm run build:web-components
4. Start development server: npm run dev:app
5. Open browser: http://localhost:3000
6. Open dev-tools and reload page, you should see: Uncaught RangeError: Maximum call stack size exceeded

Code Reproduction URL

https://github.com/baumgm94/nextjs-stenciljs-example

Additional Information

No response

[matheusviriato]

This error unfortunately happens to me. I'm trying to use components with formAssociated in a vite+react SPA application and I'm having the same error. I've used my component with and without the @AttachInternals() decorator and the error still persists. It only stops when I remove the formAssociated property :(

It seems that the error is in this internal function getHostRef. I don't know if in the generation of dist-custom-elements there is some reference loop because of the element internals...

[christian-bromann]

@baumgm94 thanks for reporting and providing a reproducible example. Our team is working on a lot of competing efforts and can't take a look at this immediately. Any contributions are welcome.

[dwirz]

Hello @christian-bromann,

I’ve opened a PR to address the issue which is discussed here. Could you, or someone from the Ionic team, take a quick look at it? Resolving this would mean a lot to us, as it’s currently a blocker for our customer’s component library.

Thanks in advance, and a big thank you to the team for the fantastic work on Stencil! 🤗

[baumgm94]

Thanks to everyone who contributed to this PR—it’s greatly appreciated!

@christian-bromann, does your team already have a planned date for the next release?

[christian-bromann]

This has been released in https://github.com/ionic-team/stencil/releases/tag/v4.22.3