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?

score 1 · Answer 1 · answered Dec 17 '20 at 12:45

1

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);

}, []);

answered Dec 17 '20 at 12:45

felipekm

2,820
5
32
42

1

I just executed the `StylesManager.applyTheme` function inside the `useEffect` hook and it worked. – AWIXOR Dec 17 '20 at 13:06

score 1 · Accepted Answer · answered Jan 02 '22 at 17:44

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.

Use SurveyJS along with Nextjs

2 Answers2