apexcharts / vue3-apexcharts

đź“Š Vue-3 component for ApexCharts
MIT License
314 stars 35 forks source link

windows is not defined in initial Nuxt 3 SSR load. #80

Closed BlackoutGG closed 1 year ago

BlackoutGG commented 1 year ago

I keep getting this error on the initial SSR load while using Nuxt 3:

ReferenceError: window is not defined                                                                                                                                                                                                                  10:59:39 a.m.
    at Object.<anonymous> (/home/blackout/Projects/workplaces/nuxtApps/nuxt-bko/node_modules/apexcharts/dist/apexcharts.common.js:6:379434)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.95e6 (/home/blackout/Projects/workplaces/nuxtApps/nuxt-bko/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:185:18)
    at __webpack_require__ (/home/blackout/Projects/workplaces/nuxtApps/nuxt-bko/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:21:30)
    at Module.fb15 (/home/blackout/Projects/workplaces/nuxtApps/nuxt-bko/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:224:74)

I have my ApexCharts component wrapped within a ClientOnly tag like suggested:

<ClientOnly>
                    <VueApexCharts
                      :series="chart.series"
                      :options="chart.options"
                      :type="chart.options.chart.type"
                      :height="500"
                    />
                  </ClientOnly>

Here's how I have my plugin setup (apexcharts.client.ts):

import VueApexCharts from "vue3-apexcharts";
import ApexCharts from "apexcharts";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueApexCharts);
});

declare module "@vue/runtime-core" {
  interface ComponentCustomProperties {
    $apexcharts: typeof ApexCharts;
  }
}

I'm using Nuxt 3.6.1 with vue 3.3.x