search

surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.2k stars 812 forks source link

Can't build and deploy with Next.js #6531

Closed kaloyaqn closed 1 year ago

kaloyaqn commented 1 year ago

Hello, I'm trying to embed a survey.js quiz into my Next.js application. Seems to be working on localhost, but when I try to build it or deploy it it shows a TypeError: Cannot read properties of undefined (reading 'root);

This is the full console:

[10:31:37.183] Running build in Washington, D.C., USA (East) – iad1
[10:31:37.234] Cloning github.com/kaloyaqn/Dataplay (Branch: main, Commit: 007b127)
[10:31:37.781] Cloning completed: 547.346ms
[10:31:40.761] Restored build cache
[10:31:40.786] Running "vercel build"
[10:31:41.261] Vercel CLI 31.0.2
[10:31:41.517] Installing dependencies...
[10:31:42.716] 
[10:31:42.717] added 2 packages in 896ms
[10:31:42.717] 
[10:31:42.717] 129 packages are looking for funding
[10:31:42.717]   run `npm fund` for details
[10:31:42.726] Detected Next.js version: 13.4.7
[10:31:42.729] Detected `package-lock.json` generated by npm 7+...
[10:31:42.729] Running "npm run build"
[10:31:42.968] 
[10:31:42.968] > dataplay@0.1.0 build
[10:31:42.968] > next build
[10:31:42.968] 
[10:31:43.463] - info Creating an optimized production build...
[10:31:49.766] (node:139) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API
[10:31:49.766] (Use `node --trace-deprecation ...` to show where the warning was created)
[10:31:51.668] - info Compiled successfully
[10:31:51.676] - info Linting and checking validity of types...
[10:31:53.092] - info Collecting page data...
[10:32:02.330] - info Generating static pages (0/4)
[10:32:02.437] - info Generating static pages (1/4)
[10:32:02.610] - info Generating static pages (2/4)
[10:32:02.644] - info Generating static pages (3/4)
[10:32:02.722] TypeError: Cannot read properties of undefined (reading 'root')
[10:32:02.722]     at ./src/svgbundle.ts.SvgIconRegistry.renderIcons (/vercel/path0/.next/server/chunks/858.js:68743:77)
[10:32:02.722]     at ./src/react/reactSurvey.tsx.Survey.doRender (/vercel/path0/.next/server/chunks/858.js:76170:69)
[10:32:02.722]     at ./src/react/reactSurvey.tsx.Survey.renderElement (/vercel/path0/.next/server/chunks/858.js:76209:21)
[10:32:02.722]     at ./src/react/reactquestion_element.tsx.SurveyElementBase.render (/vercel/path0/.next/server/chunks/858.js:77888:24)
[10:32:02.722]     at He (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:119:30)
[10:32:02.723]     at Je (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:121:207)
[10:32:02.723]     at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:128:91)
[10:32:02.723]     at Ke (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:131:155)
[10:32:02.723]     at Je (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:122:215)
[10:32:02.724]     at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:128:91)
[10:32:02.746] 
[10:32:02.746] Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
[10:32:02.746] TypeError: Cannot read properties of undefined (reading 'root')
[10:32:02.746]     at ./src/svgbundle.ts.SvgIconRegistry.renderIcons (/vercel/path0/.next/server/chunks/858.js:68743:77)
[10:32:02.746]     at ./src/react/reactSurvey.tsx.Survey.doRender (/vercel/path0/.next/server/chunks/858.js:76170:69)
[10:32:02.747]     at ./src/react/reactSurvey.tsx.Survey.renderElement (/vercel/path0/.next/server/chunks/858.js:76209:21)
[10:32:02.747]     at ./src/react/reactquestion_element.tsx.SurveyElementBase.render (/vercel/path0/.next/server/chunks/858.js:77888:24)
[10:32:02.747]     at He (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:119:30)
[10:32:02.747]     at Je (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:121:207)
[10:32:02.748]     at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:128:91)
[10:32:02.748]     at Ke (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:131:155)
[10:32:02.748]     at Je (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:122:215)
[10:32:02.748]     at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:128:91)
[10:32:02.748] - info Generating static pages (4/4)
[10:32:02.751] 
[10:32:02.751] > Export encountered errors on following paths:
[10:32:02.751]  /page: /
[10:32:02.798] Error: Command "npm run build" exited with 1

I've provided you with my code also. I would appreciate it if you help me!

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

bug

What is the current behavior?

It doesn't work

What is the expected behavior?

To work

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

I don't know

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

Can't because It wont let me build Tested page URL:

Test code

"use client"
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/defaultV2.min.css";
import { json } from "./json";

const surveyCss = {
  root: "custom_surveyjs_root",
  body: "sd-body custom_body",
  progressBar: "sd-progress__bar custom_progress_bar",
  progress: "sd-progress sd-body__progress custom_progress",
  title: "sd-title custom_page_title",
  description: "sd-description custom_page_description",
  row: "sd-row sd-clearfix custom_row",
  page: {
    root: "sd-page sd-body__page custom_page_root"
  },
  question: {
    mainRoot: "sd-element sd-question sd-row__question custom_question_root",
    number: "sd-element__num custom_question_number",
    requiredText: "sd-question__required-text custom_question_req_text",
    title:
      "sd-title sd-element__title sd-question__title custom_question_title",
    header: "sd-question__header sd-element__header custom_question_header"
  },
  actionBar: {
    root: "sd-action-bar custom_actionbar_root"
  },
  imagepicker: {
    mainRoot: "sd-element sd-question sd-row__question custom_imagepicker_root"
  },
  navigation: {
    complete: "sd-btn--action sd-navigation__complete-btn custom_btn",
    prev: "sd-navigation__prev-btn custom_btn",
    next: "sd-navigation__next-btn custom_btn",
    start: "sd-navigation__start-btn custom_btn",
    preview: "sd-navigation__preview-btn custom_btn"
  },
  radiogroup: {
    item: "sd-item sd-radio sd-selectbase__item custom_radio_item",
    itemChecked: "sd-item--checked sd-radio--checked custom_radio_item_checked",
    itemHover: "sd-item--allowhover sd-radio--allowhover custom_radio_hover",
    itemDecorator: "sd-item__svg sd-radio__svg",
    materialDecorator:
      "sd-item__decorator sd-radio__decorator custom_radio_decorator",
    label: "sd-selectbase__label custom_radio_label"
  }
};

function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    return (
      <div className="d-flex align-items-center justify-content-center">
        <div className="col-md-10 col-12">
          <Survey model={survey} css={surveyCss}/>
        </div>
      </div>
    );
}

export default SurveyComponent;

Specify your

anburocky3 commented 6 months ago

Hello i face the same problem: I'm using "survey-react-ui": "^1.10.2",

λ npm run build

> personal-review@0.1.0 build
> next build

   ▲ Next.js 14.1.4
   - Environments: .env.local

   Creating an optimized production build ...
(node:33616) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
   Generating static pages (0/8)  [=   ]TypeError: Cannot read properties of undefined (reading 'root')
    at t.renderInput (S:\git-projects\personal-review\.next\server\app\reviews\events\page.js:504:3311)
    at t.renderSelect (S:\git-projects\personal-review\.next\server\app\reviews\events\page.js:504:2593)
    at t.renderElement (S:\git-projects\personal-review\.next\server\app\reviews\events\page.js:552:1002)
    at t.render (S:\git-projects\personal-review\.next\server\app\reviews\events\page.js:554:2180)
    at nO (S:\git-projects\personal-review\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:46144)
    at nM (S:\git-projects\personal-review\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:47238)
    at nL (S:\git-projects\personal-review\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:64677)
    at nB (S:\git-projects\personal-review\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:67660)
    at nF (S:\git-projects\personal-review\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:66827)
    at nL (S:\git-projects\personal-review\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:64993)

Error occurred prerendering page "/reviews/events". Read more: https://nextjs.org/docs/messages/prerender-error

TypeError: Cannot read properties of undefined (reading 'root')
    at t.renderInput (S:\git-projects\personal-review\.next\server\app\reviews\events\page.js:504:3311)
    at t.renderSelect (S:\git-projects\personal-review\.next\server\app\reviews\events\page.js:504:2593)
    at t.renderElement (S:\git-projects\personal-review\.next\server\app\reviews\events\page.js:552:1002)
    at t.render (S:\git-projects\personal-review\.next\server\app\reviews\events\page.js:554:2180)
    at nO (S:\git-projects\personal-review\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:46144)
    at nM (S:\git-projects\personal-review\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:47238)
    at nL (S:\git-projects\personal-review\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:64677)
    at nB (S:\git-projects\personal-review\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:67660)
    at nF (S:\git-projects\personal-review\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:66827)
    at nL (S:\git-projects\personal-review\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:64993)
 ✓ Generating static pages (8/8)

> Export encountered errors on following paths:
        /reviews/events/page: /reviews/events

The build is failing when i have dropdown like this.

const surveyJson = {
  pages: [
    {
      elements: [
        {
          type: "dropdown",
          name: "institution",
          title: "Institution",
          isRequired: true,
          choices: ["Value here"],
        },
        ...
       ],
}, ], }
andrewtelnov commented 6 months ago

@anburocky3 You can check our react next template.

Thank you, Andrew