Face errors when working with Survey-React and SurveyJS-Widgets with GatsbyJS

[adityanagar10]

I was working with Gatsby and was trying to integrate SurveyJS into my application but I was facing the following issue:

and also SurveyJS-WIdgets gave the following error:

This issue came right after using npm develop after installing the packages : survey-react and surveyjs-widgets.

To reproduce the bug, just build the normal Gatbsy application, and create the following component

import 'survey-react/modern.min.css';
// import 'survey-react/survey.min.css';
import { Survey, StylesManager, Model } from 'survey-react';

StylesManager.applyTheme("modern");

const surveyJson = {
  elements: [{
    name: "FirstName",
    title: "Enter your first name:",
    type: "text"
  }, {
    name: "LastName",
    title: "Enter your last name:",
    type: "text"
  }]
};

function Testing() {
  const survey = new Model(surveyJson);
  const alertResults = useCallback((sender) => {
    const results = JSON.stringify(sender.data);
    alert(results);
  }, []);

  survey.onComplete.add(alertResults);

  return <Survey model={survey} />;
}

export default Testing;

I was able to work around this issue by lazy loading, please refer to this documentation: https://www.gatsbyjs.com/docs/debugging-html-builds/

Versions:

-survey-react: 1.9.5 -surveyjs-widgets: 1.9.5 -react: 17.0.2

[novikov82]

We are not experts in Gatsby framework and I'm affraid that nobody in our team can build such application in quick and correct way. Does GatsbyJS work in the Codesandbox? Can you create a live example with the error that you described?