Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
86
rated 0 times [  87] [ 1]  / answers: 1 / hits: 14118  / 3 Years ago, tue, june 1, 2021, 12:00:00

Problem


My Next.js/React/Node app crashes when I import Chart from "react-apexcharts" in any file. Attempting to visit the app results in the following error:
Server Error
ReferenceError: window is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
(see call stack below).
This happens regardless if the imported <Chart/> is rendered in the page or just left unused. Interesting thing is, if I save a file and initiate a Next.js quick refresh, my app begins working as normal (sometimes). But, when I just launch the app and attempt to visit it, or when I manually refresh with f5, the aforementioned error occurs. Basically, it only works after a Next.js quick refresh (and sometimes, presumably randomly, it doesn't work in this scenario either, throwing the same error as before).


Environment


Node.js (14.16.0), React (17.0.2), Express (4.17.1), Next.js (10.2.0), react-apexcharts (1.3.9), apexcharts (3.26.3), Edge Browser, Win10.

Next.js server is integrated together with Express server.


Logging


ReferenceError: window is not defined
at Object.<anonymous> (C:UsersgeorgDocumentsdevelopmentwebprojectsAngelina-Websitenode_modulesapexchartsdistapexcharts.common.js:6:345884)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:UsersgeorgDocumentsdevelopmentwebprojectsAngelina-Websitenode_modulesreact-apexchartsdistreact-apexcharts.min.js:1:722)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.react-apexcharts (C:UsersgeorgDocumentsdevelopmentwebprojectsAngelina-Website.nextserverpagespartnerdashboard.js:4973:18)
at __webpack_require__ (C:UsersgeorgDocumentsdevelopmentwebprojectsAngelina-Website.nextserverwebpack-runtime.js:25:42)

More From » reactjs

 Answers
7

You should import it using this :


import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
() => import('yourcomponent using react apex-charts'),
{ ssr: false }
)

because of the use of window it's not working with the ssr mode enabled


[#1296] Sunday, May 23, 2021, 3 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
bradleymoisesy

Total Points: 121
Total Questions: 105
Total Answers: 95

Location: Nepal
Member since Mon, Jan 4, 2021
3 Years ago
bradleymoisesy questions
Wed, Dec 22, 21, 00:00, 2 Years ago
Thu, Jun 11, 20, 00:00, 4 Years ago
Thu, Jan 16, 20, 00:00, 4 Years ago
;