search

surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.01k stars 782 forks source link

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

Closed JaneSjs closed 1 month ago

JaneSjs commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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