Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

NextJS: Warnings are thrown when survey elements adapt to smaller screen sizes #8254

Closed
JaneSjs opened this issue May 8, 2024 · 2 comments · Fixed by #8282
Closed

NextJS: Warnings are thrown when survey elements adapt to smaller screen sizes #8254

JaneSjs opened this issue May 8, 2024 · 2 comments · Fixed by #8282
Assignees
@tsv2013
Labels
bug

Comments

@JaneSjs
Copy link
Contributor

JaneSjs commented May 8, 2024 •
edited

To reproduce the issue, run the surveyjs-nextjs demo and select Form Library. Warnings appear in a console.

image

app-index.js:33 Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
    at SurveyQuestionRatingDropdown (webpack-internal:///(app-pages-browser)/./node_modules/survey-react-ui/survey-react-ui.js:17273:35)
    at div
    at div
    at SurveyQuestion (webpack-internal:///(app-pages-browser)/./node_modules/survey-react-ui/survey-react-ui.js:17987:40)
    at div
    at SurveyRowElement (webpack-internal:///(app-pages-browser)/./node_modules/survey-react-ui/survey-react-ui.js:15850:40)
    at div
    at SurveyRow (webpack-internal:///(app-pages-browser)/./node_modules/survey-react-ui/survey-react-ui.js:22293:40)
    at div
    at SurveyPage (webpack-internal:///(app-pages-browser)/./node_modules/survey-react-ui/survey-react-ui.js:16583:35)
    at div
    at div
    at div
    at div
    at form
    at div
    at div
    at Survey (webpack-internal:///(app-pages-browser)/./node_modules/survey-react-ui/survey-react-ui.js:17528:40)
    at SurveyComponent
    at div
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:242:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:335:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:161:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:354:11)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:242:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:335:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:161:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:354:11)
    at main
    at body
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:84:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:307:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:181:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:114:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:161:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:536:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:129:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:145:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:84:9
@JaneSjs JaneSjs added the bug label May 8, 2024
@JaneSjs JaneSjs transferred this issue from surveyjs/surveyjs-nextjs May 8, 2024
@JaneSjs JaneSjs changed the title Console Warnings when running the Form Library demo NextJS - Console Warnings when running the Form Library demo May 8, 2024
@JaneSjs JaneSjs changed the title NextJS - Console Warnings when running the Form Library demo NextJS - Console Warnings when running the Form Library demo - Warning: Cannot update during an existing state transition (such as within render) May 8, 2024
@JaneSjs
Copy link
Contributor Author

JaneSjs commented May 8, 2024

I got the same warning when running the https://github.com/surveyjs/surveyjs-blazor demo.

image

console.js:273 Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
    at SurveyQuestionRatingDropdown (webpack://surveyjs-blazor/./node_modules/survey-react-ui/survey-react-ui.js?:16753:23)
    at div
    at div
    at SurveyQuestion (webpack://surveyjs-blazor/./node_modules/survey-react-ui/survey-react-ui.js?:17393:28)
    at div
    at SurveyRowElement (webpack://surveyjs-blazor/./node_modules/survey-react-ui/survey-react-ui.js?:15498:28)
    at div
    at SurveyRow (webpack://surveyjs-blazor/./node_modules/survey-react-ui/survey-react-ui.js?:21301:28)
    at div
    at SurveyPage (webpack://surveyjs-blazor/./node_modules/survey-react-ui/survey-react-ui.js?:16113:23)
    at div
    at div
    at div
    at div
    at form
    at div
    at div
    at Survey (webpack://surveyjs-blazor/./node_modules/survey-react-ui/survey-react-ui.js?:16991:28)
    at SurveyRunner (webpack://surveyjs-blazor/./ClientAssets/TypeScript/components/Survey.tsx?:20:72)

@andrewtelnov
Copy link
Member

Error happens on changing renderAs property from "default" to "dropdown" if the survey width is small.
There is no synchronization between our ResizeObserver and react rendering state.

Thank you,
Andrew

tsv2013 pushed a commit that referenced this issue May 15, 2024
Fixed #8254 - [React] Console Warnings when running the Form Library …
745c4fb 
…demo - Warning: Cannot update during an existing state transition (such as within render)
tsv2013 pushed a commit that referenced this issue May 15, 2024
Work for #8254 - Console Warnings when running the Form Library demo …
ba4a43f 
…- Warning: Cannot update during an existing state transition (such as within render) - refactoring - get rid of unnecessary code
@tsv2013 tsv2013 linked a pull request May 15, 2024 that will close this issue
Bug/8254 - Console Warnings when running the Form Library demo - Warning: Cannot update during an existing state transition (such as within render) #8282
Merged
tsv2013 pushed a commit that referenced this issue May 15, 2024
Work for #8254 - fixed tests
0161df2
tsv2013 added a commit that referenced this issue May 16, 2024
@tsv2013
Bug/8254 - Console Warnings when running the Form Library demo - Warn…
bc575e5 
…ing: Cannot update during an existing state transition (such as within render) (#8282)

* Fixed #8254 - [React] Console Warnings when running the Form Library demo - Warning: Cannot update during an existing state transition (such as within render)

* Work for #8254 - Console Warnings when running the Form Library demo - Warning: Cannot update during an existing state transition (such as within render) - refactoring - get rid of unnecessary code

* Work for #8254 - fixed tests

* Fixed lint

---------

Co-authored-by: tsv2013 <[email protected]>
@RomanTsukanov RomanTsukanov changed the title NextJS - Console Warnings when running the Form Library demo - Warning: Cannot update during an existing state transition (such as within render) NextJS: Warnings are thrown when survey elements adapt to smaller screen sizes May 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tsv2013 tsv2013

Labels
bug
Projects
None yet
Milestone
No milestone
3 participants
@tsv2013 @andrewtelnov @JaneSjs