search

apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.14k stars 1.29k forks source link

ERROR ReferenceError: window is not defined, Seems it is not yet supported with angular SSR. #4176

Open usmanmanii opened 7 months ago

usmanmanii commented 7 months ago

Description

I am getting window is not defined. Seems it is not yet supported with SSR. Is there a way out?

2:28:32 PM [vite] Error when evaluating SSR module /chunk-AUM4MOAP.mjs:
|- ReferenceError: window is not defined
    at node_modules/apexcharts/dist/apexcharts.common.js (eval at instantiateModule (file:///D:/I2l%20projects%20-%20new/myapp%20-%20project/myapp-fe/template/demo1/node_modules/@angular-devkit/build-angular/node_modules/vite/dist/node/chunks/dep-68d1a114.js:56049:28), <anonymous>:5703:5)
    at __require2 (eval at instantiateModule (file:///D:/I2l%20projects%20-%20new/myapp%20-%20project/myapp-fe/template/demo1/node_modules/@angular-devkit/build-angular/node_modules/vite/dist/node/chunks/dep-68d1a114.js:56049:28), <anonymous>:48:50)
    at eval (eval at instantiateModule (file:///D:/I2l%20projects%20-%20new/myapp%20-%20project/myapp-fe/template/demo1/node_modules/@angular-devkit/build-angular/node_modules/vite/dist/node/chunks/dep-68d1a114.js:56049:28), <anonymous>:8327:55)
    at async instantiateModule (file:///D:/I2l%20projects%20-%20new/myapp%20-%20project/myapp-fe/template/demo1/node_modules/@angular-devkit/build-angular/node_modules/vite/dist/node/chunks/dep-68d1a114.js:56052:9)

2:28:32 PM [vite] Error when evaluating SSR module /dashboard.module-6DZF3PUL.mjs: failed to import "/chunk-AUM4MOAP.mjs"
|- ReferenceError: window is not defined
    at node_modules/apexcharts/dist/apexcharts.common.js (eval at instantiateModule (file:///D:/I2l%20projects%20-%20new/myapp%20-%20project/myapp-fe/template/demo1/node_modules/@angular-devkit/build-angular/node_modules/vite/dist/node/chunks/dep-68d1a114.js:56049:28), <anonymous>:5703:5)
    at __require2 (eval at instantiateModule (file:///D:/I2l%20projects%20-%20new/myapp%20-%20project/myapp-fe/template/demo1/node_modules/@angular-devkit/build-angular/node_modules/vite/dist/node/chunks/dep-68d1a114.js:56049:28), <anonymous>:48:50)
    at eval (eval at instantiateModule (file:///D:/I2l%20projects%20-%20new/myapp%20-%20project/myapp-fe/template/demo1/node_modules/@angular-devkit/build-angular/node_modules/vite/dist/node/chunks/dep-68d1a114.js:56049:28), <anonymous>:8327:55)
    at async instantiateModule (file:///D:/I2l%20projects%20-%20new/myapp%20-%20project/myapp-fe/template/demo1/node_modules/@angular-devkit/build-angular/node_modules/vite/dist/node/chunks/dep-68d1a114.js:56052:9)

ERROR ReferenceError: window is not defined
    at node_modules/apexcharts/dist/apexcharts.common.js (eval at instantiateModule (file:///D:/I2l%20projects%20-%20new/myapp%20-%20project/myapp-fe/template/demo1/node_modules/@angular-devkit/build-angular/node_modules/vite/dist/node/chunks/dep-68d1a114.js:56049:28), <anonymous>:5703:5)
    at __require2 (eval at instantiateModule (file:///D:/I2l%20projects%20-%20new/myapp%20-%20project/myapp-fe/template/demo1/node_modules/@angular-devkit/build-angular/node_modules/vite/dist/node/chunks/dep-68d1a114.js:56049:28), <anonymous>:48:50)
    at eval (eval at instantiateModule (file:///D:/I2l%20projects%20-%20new/myapp%20-%20project/myapp-fe/template/demo1/node_modules/@angular-devkit/build-angular/node_modules/vite/dist/node/chunks/dep-68d1a114.js:56049:28), <anonymous>:8327:55)
    at async instantiateModule (file:///D:/I2l%20projects%20-%20new/myapp%20-%20project/myapp-fe/template/demo1/node_modules/@angular-devkit/build-angular/node_modules/vite/dist/node/chunks/dep-68d1a114.js:56052:9)

Steps to Reproduce

  1. Add SSR in angular project then try to use ng-apexcharts

@jackieleng Found same open thread here : https://github.com/apexcharts/ng-apexcharts/issues/112#issuecomment-1804853787

danvoyce commented 7 months ago

I'm also seeing this same error using NextJS and setting use client 🤔

Milly00 commented 3 months ago

In my case, since I am not using ssr, I disable server side rendering in angular.json file in build options:

"prerender": false, "ssr": false

Im using Angular v17

leminhosdev commented 2 months ago

Thank you, this solved my problem in Angular

ShekuMunu commented 1 month ago

For nextjs devs, a quick workaround is to sacrifice initial component loading You have to dynamically import it with next/dynamic import dynamic from next/dynamic; const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });