Strange behaviour on DropDown

[WarfoX72]

Hello, i've just updated to last version 1.10.6 and got a strange behaviour on DropDown components.

Current behavior

Survey is generated and displayed correctly but on log i've got this:

⨯ Internal error: TypeError: Cannot read properties of undefined (reading 'root') at ./src/react/dropdown-base.tsx.SurveyQuestionDropdownBase.renderInput (./node_modules/survey-react-ui/survey-react-ui.js:15290:85) at ./src/react/dropdown-base.tsx.SurveyQuestionDropdownBase.renderSelect (./node_modules/survey-react-ui/survey-react-ui.js:15271:22) at ./src/react/reactquestion_dropdown.tsx.SurveyQuestionDropdown.renderElement (./node_modules/survey-react-ui/survey-react-ui.js:18574:27) at ./src/react/reactquestion_element.tsx.SurveyElementBase.render (./node_modules/survey-react-ui/survey-react-ui.js:18673:24) digest: "1477891737" GET / 500 in 54ms Code has been stripped down to the minimum but error happens anyway.

'use client'
import React from "react";

import{Model, SurveyModel} from 'survey-core';
import {Survey} from 'survey-react-ui';

import 'survey-core/defaultV2.min.css';

function Signin(props: any) {

  const model = {
    "title": "Light duty",
    "logoPosition": "right",
    "pages": [
     {
      "name": "page1",
      "elements": [
       {
        "type": "dropdown",
        "name": "question1",
        "choices": [
         "Item 1",
         "Item 2",
         "Item 3"
        ]
       }
      ]
     }
    ]
   }

const mySurvey = new SurveyModel(model);

  return (
    <Survey model={mySurvey} />
  );
}
export default Signin;

• browser: any
• browser version: latest
• surveyjs react on next.js
• surveyjs version: 1.10.6 (all components)
• nextjs version: 14.2.3

[JaneSjs]

Hello, I was unable to reproduce the issue on my end. Please refer to the following demo:
surveyjs-nextjs.zip

I notices that you initialize a survey using the SurveyModel class instance. Note that a survey model should be initialized using the Model class instance imported from survey-core.

'use client'

import { Model } from 'survey-core'
import { Survey } from 'survey-react-ui'
import 'survey-core/defaultV2.css'
import { json } from '../../data/survey_json.js'

export default function SurveyComponent() {
  const model = new Model(json);
  return (
    <Survey model={model}/>
  );
}

Please update your code and intialize a Model instance as follows:

'use client'
import React from "react";

import { Model } from 'survey-core';
import { Survey } from 'survey-react-ui';

import 'survey-core/defaultV2.min.css';

function Signin(props: any) {

  const model = {
    "title": "Light duty",
    "logoPosition": "right",
    "pages": [
     {
      "name": "page1",
      "elements": [
       {
        "type": "dropdown",
        "name": "question1",
        "choices": [
         "Item 1",
         "Item 2",
         "Item 3"
        ]
       }
      ]
     }
    ]
}

const mySurvey = new Model(model);

return (
    <Survey model={mySurvey} />
  );
}
export default Signin;

Let me know if it changes anything.

If you require further assistance, please feel free to update us and share a minimal reproducible demo for research.