Cannot render custom widget bootstrap-slider in Next JS

jsw commented 3 years ago

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

Question

What is the current behavior?

Custom widget bootstrap-slider is not rendering. I'm not a surveyjs or NextJS expert, so hopefully it is something obvious to someone else that I am missing.

What is the expected behavior?

boostrap-slider renders.

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

Provide the test code and the tested page URL (if applicable)

Tested page URL:

Test code

pages/survey.tsx

import * as Survey from 'survey-react';
import Head from 'next/head';

export default function SurveyOnePage({survey}) {
  if (typeof window !== 'undefined') {
    Survey.StylesManager.applyTheme('bootstrap');
  }
  const model = {
    questions: [
       {
         name: 'q1',
         type: 'text',
         title: 'Question 1',
      },
      {
        name: 'bootstrapslider-widget',
        type: 'bootstrapslider',
        step: 50,
        rangeMin: 0,
        rangeMax: 100,
      },
      { 
        name: 'q3',
        type: 'text',
        title: 'Question 3'
      },
    ]
  };
  const json = JSON.stringify(model);
  console.log(json);
  return (
    <>
    <Head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/css/bootstrap-slider.css" rel="stylesheet"/>
    <script src="https://unpkg.com/surveyjs-widgets@1.8.56/surveyjs-widgets.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/css/bootstrap-slider.css" rel="stylesheet"/>
    </Head>
    <Survey.Survey json={json}/>
    </>
  )
}

_app.tsx

import 'bootstrap/dist/css/bootstrap.min.css';

export default function MyApp({ Component, pageProps }) {
  return (
      <Component {...pageProps} />
  );
}

Specify your

browser:
browser version:
surveyjs platform (angular or react or jquery or knockout or vue):
surveyjs version:

Firefox 89.0.2 (mac) survey-react 1.8.47 surveyjs-widgets 1.8.56

andrewtelnov commented 3 years ago

@jsw I am afraid custom rendering, and as result all custom (third-party) widgets, will not work in Next JS.

Thank you, Andrew

jsw commented 3 years ago

@andrewtelnov Could you elaborate a bit on why it is not expected to work? I also tried NextJS dynamic import which is supposed to cause everything to render on the client. Any idea why this workaround also doesn't work? And any other aspects besides custom rendering/widgets that are not expected to work?

const DynamicSurvey = dynamic(import('./survey'), {
     ssr: false
});

export default function Survey() {
  return <DynamicSurvey/>;
}

carl0zen commented 2 years ago

Hi @andrewtelnov , I found a way to make it work thanks to this article you need to basically extract the survey component into its own file and then import it as a NoSSR component, works perfectly.

surveyjs / survey-library