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

kaloyaqn · 2023-07-14T07:44:39Z

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

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

The text was updated successfully, but these errors were encountered:

Work for #6531: do not render icons if document is not defined

anburocky3 · 2024-05-01T12:42:44Z

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 · 2024-05-01T13:28:48Z

@anburocky3 You can check our react next template.

Thank you,
Andrew

guillaumejacquart · 2025-01-08T09:14:38Z

@kaloyaqn @anburocky3 I don't know if you still face the issue, but I think it's caused by the fact thatsome part of the component (don't sure what) is still computed on the server.
Workaround that I found to force render of the form only after first mount of the component:

"use client";

function OrderForm({ products }: { products: Product[] }) {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    setLoaded(true);
  }, []);

  const survey = new Model(jsonModel);
  
  // This is to force surveyjs to be fully client
  return loaded ? <Survey model={survey} /> : <></>;
}

export default OrderForm;

andrewtelnov assigned dmitry-kurmanov and dk981234 and unassigned dmitry-kurmanov Jul 14, 2023

andrewtelnov added bug user issue An issue or bug reported by users labels Jul 14, 2023

andrewtelnov added this to the v1.9.98 milestone Jul 14, 2023

dk981234 added a commit that referenced this issue Jul 17, 2023

Work for #6531: do not render icons if document is not defined

888c69d

dk981234 linked a pull request Jul 17, 2023 that will close this issue

Work for #6531: do not render icons if document is not defined #6540

Merged

andrewtelnov closed this as completed in #6540 Jul 17, 2023

andrewtelnov added a commit that referenced this issue Jul 17, 2023

Merge pull request #6540 from surveyjs/bug/6531

c3aaa7d

Work for #6531: do not render icons if document is not defined

JaneSjs reopened this Jan 9, 2025

JaneSjs unassigned dk981234 Jan 9, 2025

JaneSjs removed bug user issue An issue or bug reported by users labels Jan 9, 2025

JaneSjs removed this from the v1.9.98 milestone Jan 9, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kaloyaqn commented Jul 14, 2023

anburocky3 commented May 1, 2024 •

edited

Loading

andrewtelnov commented May 1, 2024

guillaumejacquart commented Jan 8, 2025

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

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

Comments

kaloyaqn commented Jul 14, 2023

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

What is the current behavior?

What is the expected behavior?

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

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

Specify your

anburocky3 commented May 1, 2024 • edited Loading

andrewtelnov commented May 1, 2024

guillaumejacquart commented Jan 8, 2025

anburocky3 commented May 1, 2024 •

edited

Loading