antfu-collective / vitesse

🏕 Opinionated Vite + Vue Starter Template

Home Page:https://vitesse.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

"ReferenceError: window is not defined" with ApexCharts on vitesse

HelloWorldPage opened this issue · comments

commented

Describe the bug

Hi, after days of testing and a dolphin therapy i need help.
I just grab the Vitesse-repo an installed Apexchart as recommended (https://www.npmjs.com/package/vue3-apexcharts) everything works fine - in DEV but i want to build the PROD i have some errors(see below).
What did i do (of course i could write this in setup, but that was the original example)?--> I just put a new Page "apex.vue" in the pages folder:
`<script>
// you can import in a particular component and register the component like below
import VueApexCharts from 'vue3-apexcharts'
export default {
components: {
Apexchart: VueApexCharts,
},
data() {
return {
chartOptions: {
chart: {
id: 'vuechart-example',
},
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
},
},
series: [
{
name: 'series-1',
data: [30, 40, 35, 50, 49, 60, 70, 91],
},
],
}
},
}
</script>

<style lang="scss" scoped> </style>`

[vite-ssg] Critical CSS generation enabled via critters
[Vue Router warn]: uncaught error during route navigation:
ReferenceError: window is not defined
at Object. (/Users/.../charttest/node_modules/.pnpm/apexcharts@3.37.0/node_modules/apexcharts/dist/apexcharts.common.js:6:371062)
at Module._compile (node:internal/modules/cjs/loader:1218:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
at Module.load (node:internal/modules/cjs/loader:1081:32)
at Module._load (node:internal/modules/cjs/loader:922:12)
at Module.require (node:internal/modules/cjs/loader:1105:19)
at require (node:internal/modules/cjs/helpers:103:18)
at 95e6 (/Users/.../charttest/node_modules/.pnpm/vue3-apexcharts@1.4.1_ykaca5m3n6rsst35dvppqgdbhu/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:185:18)
at webpack_require (/Users/.../charttest/node_modules/.pnpm/vue3-apexcharts@1.4.1_ykaca5m3n6rsst35dvppqgdbhu/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:21:30)
at Module.fb15 (/Users/.../charttest/node_modules/.pnpm/vue3-apexcharts@1.4.1_ykaca5m3n6rsst35dvppqgdbhu/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:224:74)
at webpack_require (/Users/.../charttest/node_modules/.pnpm/vue3-apexcharts@1.4.1_ykaca5m3n6rsst35dvppqgdbhu/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:21:30)
at /Users/.../charttest/node_modules/.pnpm/vue3-apexcharts@1.4.1_ykaca5m3n6rsst35dvppqgdbhu/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:85:18
at Object. (/Users/.../charttest/node_modules/.pnpm/vue3-apexcharts@1.4.1_ykaca5m3n6rsst35dvppqgdbhu/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:88:10)
at Module._compile (node:internal/modules/cjs/loader:1218:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
at Module.load (node:internal/modules/cjs/loader:1081:32)
at Module._load (node:internal/modules/cjs/loader:922:12)
at ModuleWrap. (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
node:internal/process/promises:288
triggerUncaughtException(err, true /* fromPromise */);
^

ReferenceError: window is not defined
at Object. (/Users/.../charttest/node_modules/.pnpm/apexcharts@3.37.0/node_modules/apexcharts/dist/apexcharts.common.js:6:371062)
at Module._compile (node:internal/modules/cjs/loader:1218:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
at Module.load (node:internal/modules/cjs/loader:1081:32)
at Module._load (node:internal/modules/cjs/loader:922:12)
at Module.require (node:internal/modules/cjs/loader:1105:19)
at require (node:internal/modules/cjs/helpers:103:18)
at 95e6 (/Users/.../charttest/node_modules/.pnpm/vue3-apexcharts@1.4.1_ykaca5m3n6rsst35dvppqgdbhu/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:185:18)
at webpack_require (/Users/.../charttest/node_modules/.pnpm/vue3-apexcharts@1.4.1_ykaca5m3n6rsst35dvppqgdbhu/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:21:30)
at Module.fb15 (/Users/.../charttest/node_modules/.pnpm/vue3-apexcharts@1.4.1_ykaca5m3n6rsst35dvppqgdbhu/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:224:74)
at webpack_require (/Users/.../charttest/node_modules/.pnpm/vue3-apexcharts@1.4.1_ykaca5m3n6rsst35dvppqgdbhu/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:21:30)
at /Users/.../charttest/node_modules/.pnpm/vue3-apexcharts@1.4.1_ykaca5m3n6rsst35dvppqgdbhu/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:85:18
at Object. (/Users/.../charttest/node_modules/.pnpm/vue3-apexcharts@1.4.1_ykaca5m3n6rsst35dvppqgdbhu/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:88:10)
at Module._compile (node:internal/modules/cjs/loader:1218:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
at Module.load (node:internal/modules/cjs/loader:1081:32)
at Module._load (node:internal/modules/cjs/loader:922:12)
at ModuleWrap. (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Node.js v18.13.0
 ELIFECYCLE  Command failed with exit code 1.

 This error occurs also with Chartjs (only if i use the zoomPlugin - without plugin it is working)
 Thanks in advance

Reproduction

https://github.com/alesiano/apexcharts

System Info

System:
    OS: macOS 11.7.3
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 80.75 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    npm: 9.4.1 - ~/.nvm/versions/node/v18.13.0/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Safari: 16.3

Used Package Manager

pnpm

Validations

  • Follow our Code of Conduct
  • Read the Contributing Guide.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided reproduction is a minimal reproducible of the bug.
commented

FYI: that this is a "pnpm build" thing (what is "vite**-ssg** build"). "pnpm vite build" works.

It's because the package you used is not compactible with SSR. It's not related to Vitesse.