prevwong / craft.js

🚀 A React Framework for building extensible drag and drop page editors
https://craft.js.org
MIT License
7.62k stars 743 forks source link

Cannot update a component (`LayerContextProvider`) while rendering a different component (`Frame`) #668

Open addlistener opened 4 months ago

addlistener commented 4 months ago

Describe the bug

next-dev.js:20 Warning: Cannot update a component (`LayerContextProvider`) while rendering a different component (`Frame`). To locate the bad setState() call inside `Frame`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at Frame (webpack-internal:///../../packages/core/dist/esm/index.js:510:18)
    at div
    at Content (webpack-internal:///../../node_modules/react-frame-component/lib/Content.js:30:5)
    at iframe
    at Frame (webpack-internal:///../../node_modules/react-frame-component/lib/Frame.js:46:5)
    at div
    at div
    at div
    at Viewport (webpack-internal:///./components/editor/Viewport/index.tsx:26:11)
    at Events (webpack-internal:///../../packages/core/dist/esm/index.js:2345:19)
    at Editor (webpack-internal:///../../packages/core/dist/esm/index.js:2436:19)

To Reproduce Adding a react-frame-component just ouside the <Frame />

      <Viewport>
        <ReactFrameComponent>
          <Frame>
            ...

Running yarn start in example/landing

I briefly checked the code and found that https://github.com/prevwong/craft.js/blob/46eb68ef54a036f06c9433ee74b2359a8f38c610/packages/core/src/render/Frame.tsx#L39-L60

these lines should be updated in a useEffect instead of render?

Expected behavior No warning

Your environment

Software Version(s)
craft.js 46eb68e
React 18.2.0
TypeScript typescript@4.9.5
Browser Version 126.0.6478.127 (Official Build) (x86_64)
npm/Yarn 3.6.3
Operating System Darwin 23.0.0 Darwin Kernel Version 23.0.0: Fri Sep 15 14:42:42 PDT 2023; root:xnu-10002.1.13~1/RELEASE_X86_64 x86_64
Traveller23 commented 2 months ago

The changes in feat: SSR support also led to another problem being exposed:

https://github.com/prevwong/craft.js/issues/693