1

I have an application with nuxt.js as a framework and it's running well in development mode. However, when I deployed to the server for production, it's show "window is not defined".

I think it's because highcharts-vue.min.js module not loaded in components so shows this error but I'm not sure about that. I attach some code and screen shoot results after deploying on the server

screen shoot results after deployed to server

<template>
  <highcharts class="hc" :options="chartOptions" ref="chart"> 
  </highcharts>
</template>

<script>
import {Chart} from 'highcharts-vue'
export default {
    name:"ForecastCuaca",
    components: {
        highcharts: Chart 
    },
    data() {
        return {
            data_cuaca:[],
            chartOptions: {
                chart: {
                    type: 'spline',
                    backgroundColor: 'transparent',
                    marginTop:100
                },
                title: {
                    text: 'Prakiraan Cuaca Kota Kupang',
                    style:{
                        "color": "#ebeefd",
                        "fontSize": "22px"
                    }
                },
                subtitle: {
                    text: 'Source: openweathermap.org',
                    style:{
                        "color": "#ebeefd",
                    }
                },
                xAxis: {
                    categories: ['Tanggal'],
                    labels:{
                        style:{
                            color:"#ebeefd"
                        }
                    }
                },
                yAxis: {
                    title: {
                        text: 'Suhu'
                    },
                    labels: {
                        formatter: function () {
                            return this.value + '°';
                        },
                        style:{
                            color:"#ebeefd"
                        }
                    },
                    style:{
                        "color": "#ebeefd",
                    }
                },
                tooltip: {
                    formatter: function () {
                        return 'Suhu : ' + this.y + '° C<br /><b>' + this.x + '</b>';
                    }
                },
                plotOptions: {
                    spline: {
                        marker: {
                            radius: 4,
                            lineColor: '#666666',
                            lineWidth: 1
                        }
                    }
                },
                series: [{
                    name: 'Kota Kupang',
                    marker: {
                        symbol: 'square'
                    },
                    data: [
                        10
                    ],
                    style:{
                        "color": "#ebeefd",
                    }
                }
                ],
                credits:{
                    enabled:false
                }
            },
            title: '',
        }
    },
    methods:{
        generate_data(datax){
            const self = this;
            self.data_cuaca = datax

            self.chartOptions.xAxis.categories = []
            self.chartOptions.series[0].data = []
            
            let ganjil = 0;

            for (let index = 0; index < self.data_cuaca.length; index++) {
                ganjil++;
                const element = self.data_cuaca[index];
                self.chartOptions.xAxis.categories.push(element.waktu_indonesia)

                if (ganjil % 2 == 1) {
                    const iconx = element.weather[0].icon+'.png';
                    const data_series = {
                        y:element.main.temp,
                        marker: {
                            symbol: "url(http://openweathermap.org/img/w/"+iconx+")"
                        }
                    }
                    self.chartOptions.series[0].data.push(data_series)
                }else{
                    self.chartOptions.series[0].data.push(element.main.temp)
                }
            }
        }
    }
}
</script>
kissu
  • 40,416
  • 14
  • 65
  • 133
Kenny Wks
  • 11
  • 3
  • 1
    Hi, did you make a search before posting? Check [that one](https://stackoverflow.com/a/67751550/8816585). Also, try to build (or generate) locally, you should have the same error. – kissu Dec 20 '22 at 07:28
  • Hi @Kenny Wks, Have you checked the official example with NuxtJS? Docs: https://github.com/highcharts/highcharts-vue Example: https://codesandbox.io/s/z8jovxx04 – ppotaczek Dec 20 '22 at 11:00
  • I have got the same issue , no fix found :( – Elias Mar 11 '23 at 02:40
  • @Elias my comment is pretty much all about it. – kissu Mar 11 '23 at 03:26

0 Answers0