version 1.4.0 errors out due to `window` error

[JohnMica]

using is as a plugin with Nuxtjs ( "nuxt": "2.15.7", )

works well with 1.3.5

breaks when upgrading to 1.4.0

are the any migration guides to the latest 1.4.0 ? I cannot seem to find these instructions

environment:

node 14.15.5 docker / local build error is

ERROR window is not defined
at Object.<anonymous> (node_modules/highcharts-vue/dist/highcharts-vue.min.js:1:378)
at Module.o._compile (node_modules/jiti/dist/v8cache.js:2:2778)
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 node_modules/vue-server-renderer/build.prod.js:1:77882
at Object.<anonymous> (webpack:/external "highcharts-vue":1:0)
at __webpack_require__ (webpack/bootstrap:25:0)
at Module.<anonymous> (server.js:7608:32)
at __webpack_require__ (webpack/bootstrap:25:0)
at Object.<anonymous> (server.js:3439:18)
at __webpack_require__ (webpack/bootstrap:25:0)
at server.js:118:18
at Object.<anonymous> (server.js:121:10)

[Denyllon]

Hi @JohnMica ,

Thanks for your report.

are the any migration guides to the latest 1.4.0 ? I cannot seem to find these instructions

We did not take into account there could be any problem with migrating from v1.3.5 to v1.4.0, as we had really big intentions to keep the latest version backwardly compatible.

I guess, there is the problem with your Nuxt's configuration itself though. Have you tried to register the highcharts-vue as NuxtJS plugin? I mean (following their documentation), creating a separate plugin file with all Vue related stuff, and then just including this plugin within your config? Here is the docs: https://nuxtjs.org/docs/2.x/directory-structure/plugins#vue-plugins

Please let me know as soon as you can.

Kind regards!

[JohnMica]

i am loading the highcharts as a plugin with nuxt but perhaps i need to load if with mode: 'client'

i am loading the charts only using client-only which should translate to browser only

[JohnMica]

seems that addind the mode: 'client' on the plugin eliminates this issue with window error so happy to close

[muhammedjenos]

further to the same issue as above, how can I load the chart in a component only? using it as a plugin in nuxt load the entire library in the main bundle. I just want to load highcharts in spacific pages and I am getting a window error.

` import { Chart } from "highcharts-vue"; import Highcharts from "highcharts"; import stockInit from "highcharts/modules/stock";

//Avoid double loading of module both in server and client in Nuxt if (typeof Highcharts === "object") { stockInit(Highcharts); }

export default { components: { Highcharts: Chart, } } `

[Denyllon]

@muhammedjenos Could you provide me with a minimal example of the project, where we would be able to see the package has been bundled? Then would be much easier for us to find out what's happening.

[lwansbrough]

Any usage of the window global will fail in Node.js contexts, in our case this latest version breaks our SSR (not Nuxt based.) Looks like your dist package defines the module with a window usage. Minimal reproduction should be just import HIghchartsVue from 'highcharts-vue' in any Nodejs project.

[muhammedjenos]

switched back to 1.3.5 and it works as expected.

[paulcwatts]

I created a repo that reproduces this error, with a couple workarounds: https://github.com/paulcwatts/highcharts-nuxt-ssr/blob/main/components/MyChart.vue

The crux of the bug is that if you add this line to a component:

import { Chart } from "highcharts-vue";

Then the generate command will cause an error ReferenceError: window is not defined. You don't even have to use that component.

The two workarounds:

1. Include the component as a global component in a client-only plugin:

// plugins/highcharts.js
import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'

Vue.use(HighchartsVue)

2. You can also dynamically import the component only in the client:

<!-- components/MyChart.vue -->
<template>
  <div>
     <client-only>
       <Chart :options="chartOptions" />
     </client-only>
   </div>
</template>
<script>
export default {
  components: {
    Chart: process.client ? require("highcharts-vue").Chart : undefined
  },
  computed: {
    chartOptions: () => ({
       ...
    })
  }
};

[TimGuendel]

I created a repo that reproduces this error, with a couple workarounds: https://github.com/paulcwatts/highcharts-nuxt-ssr/blob/main/components/MyChart.vue

The crux of the bug is that if you add this line to a component:

import { Chart } from "highcharts-vue";

Then the generate command will cause an error ReferenceError: window is not defined. You don't even have to use that component.

The two workarounds:

1. Include the component as a global component in a client-only plugin:

// plugins/highcharts.js
import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'

Vue.use(HighchartsVue)

2. You can also dynamically import the component only in the client:

<!-- components/MyChart.vue -->
<template>
  <div>
     <client-only>
       <Chart :options="chartOptions" />
     </client-only>
   </div>
</template>
<script>
export default {
  components: {
    Chart: process.client ? require("highcharts-vue").Chart : undefined
  },
  computed: {
    chartOptions: () => ({
       ...
    })
  }
};

Does this work with Nuxt3 & Composition API? 👀

[paulcwatts]

@TimGuendel Unfortunately I won't be able to tell you, as I no longer use Nuxt, nor SSR, nor highcharts-vue 🤷