Spreadjs throws error while running the project

Posted by: datta on 12 September 2023, 7:50 pm EST

datta

Post Options:
Link
Copy

Posted 12 September 2023, 7:50 pm EST

Hi we have a nextjs project and I install spreadjs designer into it. below is my package.json

{
  "name": "rebound",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "NODE_OPTIONS=--max_old_space_size=4096 next",
    "lint": "next lint",
    "export": "next export"
  },
  "dependencies": {
    "@ant-design/icons": "^5.0.1",
    "@azure/msal-browser": "^2.33.0",
    "@azure/msal-react": "^1.5.3",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@fontsource/roboto": "^4.5.8",
    "@grapecity/spread-excelio": "^16.2.2",
    "@grapecity/spread-sheets": "^16.2.2",
    "@grapecity/spread-sheets-barcode": "^16.2.2",
    "@grapecity/spread-sheets-charts": "^16.2.2",
    "@grapecity/spread-sheets-designer": "^16.2.2",
    "@grapecity/spread-sheets-designer-react": "^16.2.2",
    "@grapecity/spread-sheets-designer-resources-en": "^16.2.2",
    "@grapecity/spread-sheets-io": "^16.1.0",
    "@grapecity/spread-sheets-languagepackages": "^16.2.2",
    "@grapecity/spread-sheets-pdf": "^16.2.2",
    "@grapecity/spread-sheets-pivot-addon": "^16.2.2",
    "@grapecity/spread-sheets-print": "^16.2.2",
    "@grapecity/spread-sheets-react": "^16.2.2",
    "@grapecity/spread-sheets-resources-ja": "^16.1.0",
    "@grapecity/spread-sheets-resources-ko": "^16.1.0",
    "@grapecity/spread-sheets-resources-zh": "^16.1.0",
    "@grapecity/spread-sheets-shapes": "^16.2.2",
    "@grapecity/spread-sheets-slicers": "^16.1.0",
    "@grapecity/spread-sheets-tablesheet": "^16.1.0",
    "@headlessui/react": "^1.7.11",
    "@mui/material": "^5.11.10",
    "@next/font": "13.1.6",
    "@reduxjs/toolkit": "^1.9.3",
    "@zeit/next-less": "^1.0.1",
    "antd": "^5.3.1",
    "axios": "^1.3.4",
    "bootstrap": "^5.2.3",
    "d3-3.5.17": "^1.0.0",
    "echarts": "^5.4.1",
    "echarts-for-react": "^3.0.2",
    "eslint": "8.34.0",
    "eslint-config-next": "13.1.6",
    "group-by-with-sum": "^2.0.0",
    "jspdf": "^2.5.1",
    "jspdf-autotable": "^3.5.28",
    "less": "^2.7.3",
    "next": "13.1.6",
    "primeicons": "^6.0.1",
    "primereact": "^9.1.1",
    "react": "18.2.0",
    "react-bootstrap": "^2.7.2",
    "react-circular-progressbar": "^2.1.0",
    "react-csv-downloader": "^2.9.0",
    "react-dom": "18.2.0",
    "react-equal-height": "^1.2.2",
    "react-icons": "^4.8.0",
    "react-pivottable": "^0.11.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.8.1",
    "react-select": "^5.7.0",
    "react-slick": "^0.29.0",
    "react-to-print": "^2.14.12",
    "react-toastify": "^9.1.1",
    "reactjs-localstorage": "^1.0.1",
    "slick-carousel": "^1.8.1",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7"
  }
}

But when I start the project with command npm run dev I am getting below error.

event - compiled client and server successfully in 117.5s (5358 modules)
error - ReferenceError: navigator is not defined
    at ./src/calc.common.ts (C:\Users\Dattathreya\red-ui\DistributionBusiness\node_modules\@grapecity\spread-sheets\dist\gc.spread.sheets.all.min.js:13:3190072)
    at r (C:\Users\Dattathreya\red-ui\DistributionBusiness\node_modules\@grapecity\spread-sheets\dist\gc.spread.sheets.all.min.js:13:3125370)
    at ./src/Parser.ts (C:\Users\Dattathreya\red-ui\DistributionBusiness\node_modules\@grapecity\spread-sheets\dist\gc.spread.sheets.all.min.js:13:3128927)
    at r (C:\Users\Dattathreya\red-ui\DistributionBusiness\node_modules\@grapecity\spread-sheets\dist\gc.spread.sheets.all.min.js:13:3125370)
    at ./src/calc.entry.ts (C:\Users\Dattathreya\red-ui\DistributionBusiness\node_modules\@grapecity\spread-sheets\dist\gc.spread.sheets.all.min.js:13:3191347)
    at r (C:\Users\Dattathreya\red-ui\DistributionBusiness\node_modules\@grapecity\spread-sheets\dist\gc.spread.sheets.all.min.js:13:3125370)
    at C:\Users\Dattathreya\red-ui\DistributionBusiness\node_modules\@grapecity\spread-sheets\dist\gc.spread.sheets.all.min.js:13:3396904
    at ./node_modules_local/@grapecity/js-calc/dist/gc.spread.calcengine.js (C:\Users\Dattathreya\red-ui\DistributionBusiness\node_modules\@grapecity\spread-sheets\dist\gc.spread.sheets.all.min.js:13:3396971)
    at r (C:\Users\Dattathreya\red-ui\DistributionBusiness\node_modules\@grapecity\spread-sheets\dist\gc.spread.sheets.all.min.js:13:104)
    at ./node_modules_local/@grapecity/js-calc/index.js (C:\Users\Dattathreya\red-ui\DistributionBusiness\node_modules\@grapecity\spread-sheets\dist\gc.spread.sheets.all.min.js:13:3397082)
    at r (C:\Users\Dattathreya\red-ui\DistributionBusiness\node_modules\@grapecity\spread-sheets\dist\gc.spread.sheets.all.min.js:13:104)
    at ./all.entry.js (C:\Users\Dattathreya\red-ui\DistributionBusiness\node_modules\@grapecity\spread-sheets\dist\gc.spread.sheets.all.min.js:13:308)
    at r (C:\Users\Dattathreya\red-ui\DistributionBusiness\node_modules\@grapecity\spread-sheets\dist\gc.spread.sheets.all.min.js:13:104)
    at C:\Users\Dattathreya\red-ui\DistributionBusiness\node_modules\@grapecity\spread-sheets\dist\gc.spread.sheets.all.min.js:13:3905923
    at Object.<anonymous> (C:\Users\Dattathreya\red-ui\DistributionBusiness\node_modules\@grapecity\spread-sheets\dist\gc.spread.sheets.all.min.js:13:3905975)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:121:18)
    at Object.<anonymous> (C:\Users\Dattathreya\red-ui\DistributionBusiness\node_modules\@grapecity\spread-sheets\index.js:1:18)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:121:18)
    at @grapecity/spread-sheets (C:\Users\Dattathreya\red-ui\DistributionBusiness\.next\server\pages\index.js:1796:18)
    at __webpack_require__ (C:\Users\Dattathreya\red-ui\DistributionBusiness\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/components/SpreadsheetView.jsx:11:82)
    at ./src/components/SpreadsheetView.jsx (C:\Users\Dattathreya\red-ui\DistributionBusiness\.next\server\pages\index.js:396:1)
    at __webpack_require__ (C:\Users\Dattathreya\red-ui\DistributionBusiness\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/components/popups/backlog/bussinessunit/index.js:35:86)
    at __webpack_require__.a (C:\Users\Dattathreya\red-ui\DistributionBusiness\.next\server\webpack-runtime.js:97:13)
    at eval (webpack-internal:///./src/components/popups/backlog/bussinessunit/index.js:1:21)
    at ./src/components/popups/backlog/bussinessunit/index.js (C:\Users\Dattathreya\red-ui\DistributionBusiness\.next\server\pages\index.js:726:1)
    at __webpack_require__ (C:\Users\Dattathreya\red-ui\DistributionBusiness\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/components/popups/backlog/index.js:16:72)
    at __webpack_require__.a (C:\Users\Dattathreya\red-ui\DistributionBusiness\.next\server\webpack-runtime.js:97:13)
    at eval (webpack-internal:///./src/components/popups/backlog/index.js:1:21)
    at ./src/components/popups/backlog/index.js (C:\Users\Dattathreya\red-ui\DistributionBusiness\.next\server\pages\index.js:737:1)
    at __webpack_require__ (C:\Users\Dattathreya\red-ui\DistributionBusiness\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/components/layout/top.js:22:85)
    at __webpack_require__.a (C:\Users\Dattathreya\red-ui\DistributionBusiness\.next\server\webpack-runtime.js:97:13)
    at eval (webpack-internal:///./src/components/layout/top.js:1:21)
    at ./src/components/layout/top.js (C:\Users\Dattathreya\red-ui\DistributionBusiness\.next\server\pages\index.js:649:1)
    at __webpack_require__ (C:\Users\Dattathreya\red-ui\DistributionBusiness\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/components/layout/layout.js:8:62)
    at __webpack_require__.a (C:\Users\Dattathreya\red-ui\DistributionBusiness\.next\server\webpack-runtime.js:97:13) {
  page: '/'
}

Can you please help me with this issue. I am using node version 18.17.1

chandan.rawat
- Post Options:
- Link
  Copy
Posted 13 September 2023, 9:45 pm EST - Updated 13 September 2023, 9:54 pm EST

Hi,

Looking at the error message, it seems the error is caused because of the SSR(Server Side Rendering) in NextJS. Since SpreadJS is a web application that requires a browser environment to run and render its content. That is why, when it is run on the server side in NextJS(where the browser environment is not available), it throws an error.

You can disable the SSR for a component when importing the component using the dynamic() method in NextJS. You may refer to https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering to learn more about SSR in NextJS.

Also, please refer to the below NextJS sample which uses SpreadJS and the attached image.

sample: nextjs-with-spreadjs.zip

Please use the commands “npm i” and “npm run dev” to install dependencies and run the sample.

As I can see in the code snippet shared by you, you are using different versions for different SpreadJS packages/modules. Please note that the version for all the SpreadJS packages should be the same in a project otherwise it might cause some issues.

Regards,

Chandan
datta
- Post Options:
- Link
  Copy
Posted 7 October 2023, 3:16 am EST

Hi The solution you suggested did work after using dynamic import with ssr:false. But the initial loading of designer is too slow as lot of designer library files need to be downloaded. Is there any way to improve this . Currently it is taking around 20 seconds to load
chandan.rawat
- Post Options:
- Link
  Copy
Posted 8 October 2023, 5:24 pm EST

Hi,

Could you please provide us with a minimal working sample that replicates? It will be really helpful in the investigation of the issue. Without a sample replicating the issue on our end, it will be difficult to pinpoint the actual cause of the issue. You may modify the sample(that we have previously shared with you) to replicate the issue and share it with us.

Also, the cause of the issue might be the building/dev server process of the NextJS. However, it is just a guess and we are not sure about that. So, kindly provide us with a sample so that we thoroughly investigate the issue.

Regards

Please login to reply to thread

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

ComponentOne

Forums for all current editions of the ComponentOne .NET UI control product line, including ComponentOne Studio and ComponentOne Studio for Xamarin.
ActiveReports

Forums for all versions of ActiveReports and ActiveReports Server
Spread

Forums for all current versions of Spread .NET spreadsheets, SpreadJS JavaScript spreadsheets, and SpreadCOM spreadsheets.
Wijmo

Forums for all Wijmo products, including Wijmo Core, FinancialChart, FlexSheet, MultiRow, OLAP, and ReportViewer
- General Discussion
Document Solutions

Forums for all Document Solutions products, including Document Solutions for PDF, Word, Excel (.NET and Java), and Imaging.

Spreadjs throws error while running the project

Need extra support?

Forum Channels

ComponentOne

ActiveReports

Spread

Wijmo

Document Solutions