My project uses codegen with next.js (app dir). I updated the Select component from Plasmic Studio to change its styling, but didn’t change anything regarding its functionality or data. Whenever I try to render the Select component in my react project, I get this error:
Cannot update a component (`PlasmicSelect`) while rendering a different component (`$82d7e5349645de74$var$SelectInner`).
The error appears regardless of where I render it, or what props I pass.
Steps to reproduce:
- Open Command Prompt on Windows 10 and run $ npx create-plasmic-app@latest
- Use the default project name
- Choose next.js
- Choose Typescript
- Choose codegen
- Create a new Plasmic Studio project and choose the first blank template
- Hit the plus icon and drag in a new Select component
- Copy the url and right click inside the Command Prompt window to paste it when prompted
- Open the new project with VS Code
- Open a new terminal inside VS Code
- Run $ npm run dev
- Open the indicated localhost link in your browser
- Open the browser console to see the error
The error also prints if you render the Select component programmatically rather than through Studio.
The error does NOT print if you preview the current artboard instead of running a dev server.
The error only prints on first mount or page refresh, not on later mounts of the same component.
Looking this error up online, the only related results are completely separate from Plasmic, and it’s usually caused by trying to call setState from outside useEffect. As this error occurs even when I didn’t write any react code, these solutions didn’t help.
Through my own trial and error, I tried:
- Turning off strict mode
- (Through code) Passing every prop as undefined
- (Through code) Passing state values to value and onChange, and rendering MenuItems to the Items slot
- (Through code) Passing undefined to value and instead passing to defaultSelectedKey, and rendering MenuItems to the Items slot
- (Through Studio) Adding a new prop to Select of type text and dynamically assigning it to Initial Selected Item, then (through code) rendering a MenuItem with a matching value to the Items slot
- (Through code) Conditionally rendering the select component with state, and updating said state with useEffect to ensure everything is loaded before it
- (Through code) Passing no props
- Deleting node_modules and package-lock.json, then running $ npm install
Relevant links:
- Project - This leads to the component where I originally rendered the Select component.