apexcharts / vue3-apexcharts

📊 Vue-3 component for ApexCharts
MIT License
314 stars 35 forks source link

[SSR, Quasar2] ReferenceError: window is not defined #38

Closed ebuster closed 2 years ago

ebuster commented 2 years ago

Unable to use this plugin inside the Quasar 2 (Vue 3) App with enabled SSR mode. Tried different methods to install it, how it was with Quasar 1 (with Vue 2 on board) but it doesn't work.

I use the following approach:

// boot/apex-charts.ts
import { boot } from 'quasar/wrappers';

export default boot(({ app }) => {
  app.use(() => import('vue3-apexcharts')); // dynamically load, like it was with Vue 2
});

And got the following error in app console:

[Quasar Dev Webserver] / -> request took: 128ms
(node:22769) UnhandledPromiseRejectionWarning: ReferenceError: window is not defined
    at Object.<anonymous> (/Users/ebuster/Developer/dashboard/ui3/node_modules/apexcharts/dist/apexcharts.common.js:6:355061)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.95e6 (/Users/ebuster/Developer/dashboard/ui3/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:185:18)
    at __webpack_require__ (/Users/ebuster/Developer/dashboard/ui3/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:21:30)
    at Module.fb15 (/Users/ebuster/Developer/dashboard/ui3/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:224:74)
(node:22769) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)

App started by typical command: quasar dev -m ssr Dependencies:

    "quasar": "^2.0.0",
    //...
    "apexcharts": "^3.30.0",
    "vue3-apexcharts": "^1.4.1",
   //...
    "vue": "^3.2.24",
  },
mr-kenikh commented 2 years ago

When building a SSR app, you should boot apexcharts only on the client. Edit your boot file (/src/boot):

- boot: ['apex-charts'],
+ boot: [{ path: 'apex-charts', server: false }],
ebuster commented 2 years ago

@mr-kenikh thank you!