bug: react-output-target >=0.7.0: form data payload not populated by form associated components if built with lerna

[maxrrv]

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

0.26.0

Stencil Framework Output Target

React

Stencil Framework Output Target Version

. >=0.7.0

Current Behavior

When submitting a form containing a form associated component that is consumed via the react-output-target wrapper, the request payload is empty.
If the component is consumed directly via the core package, the form data is properly populating the request payload.

This occurs on the working example built with lerna. It is following the stenciljs documentation for building react-wrapper components.

There is a second example built with nx, where the issue doesn't occur. I will attach both working examples to this ticket.

Expected Behavior

The form data should be present in the request payload, regardless whether it is consumed via a wrapper, directly from core, built with lerna or nx.

Steps to Reproduce

Lerna Environment

These are the steps to reproduce the bug in the lerna built environment:

Checkout https://github.com/maxrrv/stencil-playground, follow installation and run steps.

on root directory, run

npm install
npm run build

go to packages/playground-consumer, run

npm run dev

Go to http://localhost:5173

Open devtools > network

enter something into the form field and submit

search for something

the request payload should be empty.

nx environment

Here are the steps to reproduce on the nx built environment:

Checkout https://github.com/maxrrv/nx-stencil/tree/form-missing-face-component-values

make sure you are on the branch form-missing-face-component-values

Run npm ci.

Build the stencil core library by running npx nx run core-react:build (this will build the stencil core library and the react output target).

Run the react-demo app by running npx nx run react-demo:serve.

Open the browser and go to http://localhost:4200/.

Open devtools > network

Fill out the form and submit.

You should see the payload in the network tab (search for something).

Code Reproduction URL

https://github.com/maxrrv/stencil-playground

Additional Information

Please try both environments built with nx and lerna.

[maxrrv]

Should we take a look into this on our own?

[christian-bromann]

Should we take a look into this on our own?

That would be much appreciated. To set clear expectations: Stencil has become an open governed project which means that everyone can and should participate in the development of the project. The current IP holder OutSystems maintains its own internal roadmap with items we would like to see implemented. Our goal is to build a development community around the project and eventually contribute its IP to a larger Open Source foundation. There is a blog post planned with more information that we will release soon.