Next 13/14 throws an error due as window is not defined within PopupDropdownViewModel.updateOnHiding

[vpanichkin]

Are you requesting a feature, reporting a bug or asking a question?

Bug

What is the current behavior?

⨯ node_modules/survey-core/survey.core.js (23699:0) @ ./src/popup-dropdown-view-model.ts.PopupDropdownViewModel.updateOnHiding
⨯ Internal error: ReferenceError: window is not defined
    at ./src/popup-dropdown-view-model.ts.PopupDropdownViewModel.updateOnHiding (./node_modules/survey-core/survey.core.js:23694:9)
    at onIsVisibleChangedHandler (./node_modules/survey-core/survey.core.js:24364:23)
    at ./src/popup-view-model.ts.PopupBaseViewModel.setupModel (./node_modules/survey-core/survey.core.js:24369:9)
    at PopupDropdownViewModel.set (./node_modules/survey-core/survey.core.js:24376:18)
    at PopupDropdownViewModel.PopupBaseViewModel [as constructor] (./node_modules/survey-core/survey.core.js:24295:21)
    at new PopupDropdownViewModel (./node_modules/survey-core/survey.core.js:23521:28)
    at createPopupViewModel (./node_modules/survey-core/survey.core.js:24234:16)
    at ./src/react/components/popup/popup.tsx.Popup.createModel (./node_modules/survey-react-ui/survey-react-ui.js:11885:94)
    at new Popup (./node_modules/survey-react-ui/survey-react-ui.js:11871:15)
    at app-page.runtime.dev.js:35:9134
null

What is the expected behavior?

No exception is thrown

How would you reproduce the current behavior (if this is a bug)?

1. Clone repo: https://github.com/vpanichkin/surveyjs-next13-bug-example
2. Run: yarn dev
3. Visit page: http://localhost:3000/
4. Check the server build console

Specify your

• browser: Chrome
• browser version: 119.0.6045.105
• surveyjs platform (angular or react or jquery or knockout or vue): React
• surveyjs version: 1.9.115
• node: 18
• next: 13 and 14

Suggestion to fix

1. Within the code, check if `typeof window !== "undefined"

[JaneSjs]

Hello @vpanichkin, We researched this issue. It appears that regardless of the 'use client' directive, the NextJS v14.0 application does not render the page entirely on the client. It still renders a component on the server side. You can use either of the options available in the official NextJS documentation: Text content does not match server-rendered HTML.

We used [Solution 1: Using useEffect to run on the client only](https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only) and updated your demo: surveyjs-next13-demo.zip.

I also submitted a corresponding PR with required changes: https://github.com/vpanichkin/surveyjs-next13-bug-example/pull/1.

Additionally, I imported survey styles. Here is the resultant page.tsx component's code:

'use client'
import { useEffect, useState } from 'react'
import { Model } from 'survey-core'
import { Survey } from 'survey-react-ui'
import 'survey-core/defaultV2.min.css';

export default function Home(){
  const surveyJson = {
    pages: [
      {
        elements: [
          {
            type: 'radiogroup',
            name: 'some-radiogroup',
            choices: ['a', 'b', 'c'],
          },
        ],
      },
    ],
  }
    const survey = new Model(surveyJson)
    const [isClient, setIsClient] = useState(false)
    useEffect(() => {
      setIsClient(true)
    }, [])

    return isClient ? <Survey model={survey} /> : null
}

A survey appears as follows:

Please let us know if you have any further questions.

Thanks

[vpanichkin]

Hey, @JaneSjs . Thanks for the commenting . I also solved the issue in this way

export default dynamic(() => Promise.resolve(Page), {
  ssr: false,
})