We’ve recently upgraded to plasmicapp/react-web
and did a sync (codegen) again, but now all of our switches, checkboxes and dropdowns are broken. Clicking the switches of checkboxes causes a ghost checkbox to appear. Also, I’ve removed all custom code to ensure that it’s not our code interfering. Clicking the dropdown/select component however crashes the whole app resulting in the attached error. What’s going on here and how can I fix it? Weirdly enough the preview of the components in plasmic studio still works, just the generated code component does not
We’re using the following Plasmic deps versions:
"@plasmicapp/cli": "^0.1.187",
"@plasmicapp/host": "^1.0.81",
"@plasmicapp/react-web": "^0.2.116",
"@plasmicpkgs/plasmic-embed-css": "^0.1.65",
"@plasmicpkgs/react-awesome-reveal": "^3.8.81",
looking!
You should be able to update to the latest react-web (0.2.117) to fix the checkbox / switch. I haven’t been able to reproduce the dropdown/select error yet; could you point me to where you’re using it?
Hey @chungwu, thanks for fixing the checkbox! The project which now has the broken select ist fy8EtwtQpAAT9acsimSA62
. There we use it for example in the user icon at the top right to provide more options or in the form in “erfassung-full” (see attached video).
I quickly removed all the custom code from the select component to see if the issue still persists and it does…
The problem with the Select
still persists with latest react-web 0.2.119
Uncaught TypeError: Cannot set properties of undefined (setting 'nodeToRestore')
at FocusScope.tsx:510:1
at commitHookEffectListMount (react-dom.development.js:23049:1)
at invokeLayoutEffectMountInDEV (react-dom.development.js:25010:1)
at invokeEffectsInDev (react-dom.development.js:27304:1)
at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27280:1)
at flushPassiveEffectsImpl (react-dom.development.js:27007:1)
at flushPassiveEffects (react-dom.development.js:26935:1)
at commitRootImpl (react-dom.development.js:26886:1)
at commitRoot (react-dom.development.js:26638:1)
at performSyncWorkOnRoot (react-dom.development.js:26073:1)
(anonymous) @ FocusScope.tsx:510
commitHookEffectListMount @ react-dom.development.js:23049
invokeLayoutEffectMountInDEV @ react-dom.development.js:25010
invokeEffectsInDev @ react-dom.development.js:27304
commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27280
flushPassiveEffectsImpl @ react-dom.development.js:27007
flushPassiveEffects @ react-dom.development.js:26935
commitRootImpl @ react-dom.development.js:26886
commitRoot @ react-dom.development.js:26638
performSyncWorkOnRoot @ react-dom.development.js:26073
flushSyncCallbacks @ react-dom.development.js:12009
(anonymous) @ react-dom.development.js:25607
@chungwu I think there’s a problem with the Overlay
The above error occurred in the <$9bf71ea28793e738$export$20e40289641fbbb6> component:
at $9bf71ea28793e738$export$20e40289641fbbb6 (<http://localhost:3030/static/js/bundle.js:83273:15>)
at div
at div
at div
at func (<http://localhost:3030/static/js/bundle.js:52539:44>)
at Select__Overlay_ (<http://localhost:3030/static/js/bundle.js:5834:104>)
at div
at func (<http://localhost:3030/static/js/bundle.js:51602:44>)
at Select_ (<http://localhost:3030/static/js/bundle.js:5532:87>)
at Controller (<http://localhost:3030/static/js/bundle.js:182324:35>)
at WiredFormField (<http://localhost:3030/static/js/bundle.js:8032:5>)
at div
at div
at FlexStack_ (<http://localhost:3030/static/js/bundle.js:79173:18>)
if you started a project from scratch (using npx create-plasmic-app@latest
) do you still see the issue?
Do you happen to be using react-aria
in your own code?
We’re not using react-aria
in our own code.
And the issue indeed persists even when creating a project from scratch. I did the following:
- Create blank project in plasmic
- Only create a select component without changing anything and dragging it into the homepage
- Use npx create-plasmic and specify the project
Project is https://studio.plasmic.app/projects/qEFqj5BbAKmpuDyz6s6TBo
I’ll attach the code in a minute
It probably is related to the activated React strict mode because removing it fixes the issue
@chungwu Any news about this issue? It’s a showstopper over here… If you need further information do not hesitate to contact us?
ahh yes please deactivate React strict mode. There were some known issues with react-aria + react strict mode; taking a look