Use SurveyJS along with Nextjs

Question

As knows NextJS is using the server side rendering, I want to use SurveyJs with it but surveyJS is using some function that must be executed in client side. In my case I wanna use StylesManager.applyTheme but it throws an server error of ReferenceError: document is not defined

any possible way can I use to execute the applyTheme function in client side?

Answer 1

For better implementation, I solved the issue using dynamic imports from NextJs

Instead, I imported my SurveyComponent like this:

const SurveyComponent = dynamic(
  () => import("../../../../components/survey/PartOne"),
  {
    ssr: false,
  }
);

To make sure my SurveyComponent does not render on server-side.

Answer 2

You can achieve this creating a useEffect Hook that consumes an external function to apply this theme:

import {useEffect} from 'react'

useEffect(() => {
  const newSurveyCreator = new SurveyJSCreator.SurveyCreator('surveyCreatorContainer', surveyCreatorConfig);
  
  newSurveyCreator.saveSurveyFunc = function() {
    console.log(this);
    console.log(this && this.text);
  };
    
  updateSurveyCreator(newSurveyCreator);

}, []);