This topic was automatically generated from Slack. You can find the original thread here.
Hey all, wondering if anyone is experiencing issues when bringing the /connect-react package into a Next JS 15 app.
There seem to be 2 problems we face:
• The polyfill that is included causes a document.querySelector is not a function - if we remove the polyfill the error goes away, however;
• Reactivity around the ComponentFormContainer seems to break when there is no polyfill (but could also be unrelated)
◦ We successfully auth and receive a list of accounts for Slack which are placed into the dropdown, when we select one of these accounts to use, we see the next dropdown attempt to load the data - the network log shows we get the correct data (in this case a list of channels from Slack) but they never get populated in the dropdown
When running the example provided it seems to work, when upgrading the Next version to ^15 / React to 19 we immediately get an issue with the polyfill import.
Attached video of behaviour - we see good response from the /configure endpoint but those options do not make their way into the relevant Select component within the ComponentFormContainer
I have created a brand new Next Js 15 app using create-next-app I have installed the Pipedream SDK and Connect packages, put the demo code in from the example repo and it works… At first, I can connect, get data back, dropdowns populate. Then as soon as I refresh the view we hit the document.querySelector is not a function error.
Hi thanks for coming back to us! We appreciate any help on this, for now to get round it, we have forked the package and commented out the polyfill to get rid of the main issue and unblock development. The reactivity seems to have been an issue on our implementation but could indeed be something that needs addressing when a modification to the polyfill is done. By our best estimation and short time pouring over the package we cannot really see why the polyfill is necessary, would be great to understand better.
We also have a couple of improvements that we would be happy to PR if you are open to that.
In the event someone is making a tweak or two, a potential easy improvement / fix would be to change the useEffect that checks the optional props to check if the optional prop has a value in the configurable props, and set them as enabled. If not - we will PR that one first
thanks so much for the feedback! we just cut connect-react@1.0.1 with the polyfill removed (as well as an accidental bundling of lodash) – please try it out and let us know if you see any issues or if you have any other feedback/suggestions
We also notice that the Component overrides do not allow for all the components as listed in the docs only the select ones and a few choice ones such as Label and Error. We have a need to override the actual input itself to inject some bits, How can we do this?
