Most recent plasmic sync broke our Plasmic switches and checkboxes and dropdowns

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

CleanShot 2022-11-02 at 16.16.14.gif

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>)

:thinking_face: 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:

  1. Create blank project in plasmic
  2. Only create a select component without changing anything and dragging it into the homepage
  3. Use npx create-plasmic and specify the project
    Project is https://studio.plasmic.app/projects/qEFqj5BbAKmpuDyz6s6TBo
    I’ll attach the code in a minute

Here’s the code I’ve generated (excluding node_modules)

my-app.zip

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