I had to clone my repo locally on a new machine. It is a nuxt.js platform and when I npm run dev and pull up the local site I get
window not defined
and this
node_modules/highcharts-vue/dist/highcharts-vue.min.js
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("highcharts"),require("vue")):"function"==typeof define&&define.amd?define(["highcharts","vue"],e):"object"==typeof exports?exports.HighchartsVue=e(require("highcharts"),require("vue")):t.HighchartsVue=e(t.Highcharts,t.Vue)}(window,function(r,n){return c={},o.m=i=[function(t,e){t.exports=r},function(t,e){t.exports=n},function(t,e,r){"use strict";r.r(e),r.d(e,"Chart",function(){return l}),r.d(e,"default",function(){return h});var e=r(0),c=r.n(e);function n(t,e){return function r(n,o,i){function t(t,e){!c.a.isObject(t,!i)||c.a.isClass(t)||c.a.isDOMElement(t)?n[e]=o[e]:n[e]=r(n[e]||c.a.isArray(t)?[]:{},t,i)}return c.a.isArray(o)?o.forEach(t):c.a.objectEach(o,t),n}({},t,e)}var o=r(1);function i(t){return function(t){if(Array.isArray(t))return a(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return a(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(r="Object"===r&&t.constructor?t.constructor.name:r)||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function u(e,t){var r,n=Object.keys(e);return Object.getOwnPropertySymbols&&(r=Object.getOwnPropertySymbols(e),t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)),n}function s(n){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?u(Object(o),!0).forEach(function(t){var e,r;e=n,t=o[r=t],r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(o)):u(Object(o)).forEach(function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(o,t))})}return n}function f(){this.chart&&this.chart.destroy()}var p=function(e,t){t=t.split(".")[0]<3?{render:function(t){return t("div",{ref:"chart"})},beforeDestroy:f}:{render:function(){return Object(o.h)("div",{ref:"chart"})},beforeUnmount:f};return s({template:'<div ref="chart"></div>',props:{constructorType:{type:String,default:"chart"},options:{type:Object,required:!0},callback:Function,updateArgs:{type:Array,default:function(){return[!0,!0]}},highcharts:{type:Object},deepCopyOnUpdate:{type:Boolean,default:!0}},watch:{options:{handler:function(t){var e;(e=this.chart).update.apply(e,[n(t,this.deepCopyOnUpdate)].concat(i(this.updateArgs)))},deep:!0}},mounted:function(){var t=this.highcharts||e;this.options&&t[this.constructorType]?this.chart=t[this.constructorType](this.$refs.chart,n(this.options,!0),this.callback||null):this.options?console.warn("'".concat(this.constructorType,"' constructor-type is incorrect. Sometimes this error is caused by the fact, that the corresponding module wasn't imported.")):console.warn('The "options" parameter was not passed.')}},t)},l=p(c.a,o.version||r.n(o).a.version);function h(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};t.component(e.tagName||"highcharts",p(e.highcharts||c.a,t.version))}}],o.c=c,o.d=function(t,e,r){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)o.d(r,n,function(t){return e[t]}.bind(null,n));return r},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=2);function o(t){if(c[t])return c[t].exports;var e=c[t]={i:t,l:!1,exports:{}};return i[t].call(e.exports,e,e.exports,o),e.l=!0,e.exports}var i,c});
The component in the framework
<template>
<div>
<div class="container">
<div
class="highcharts-container"
:style="component.cssStyleSheet.highchartsContainer"
>
<client-only>
<highcharts
ref="chart"
class="hc"
:constructor-type="'stockChart'"
:options="chartOptions"
/>
</client-only>
<div
v-if="component.footerText"
class="disclaimer"
:style="component.cssStyleSheet.footerText"
>
{{ component.footerText }}
</div>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import Highcharts from 'highcharts';
import HighchartsVue from 'highcharts-vue';
import stockInit from 'highcharts/modules/stock';
if (typeof Highcharts === 'object') {
stockInit(Highcharts);
}
Vue.use(HighchartsVue);
import component from '../mixins/component';
export default {
name: 'HighchartsComponent',
mixins: [component],
data() {
return {
chartOptions: {
chart: {
height: '',
type: 'spline', //spline was default - gives it curve appeal
},
title: {
text: '',
align: '',
style: '',
},
tooltip: {
/* {point.y} will show the actual plot int. Place between the <b></b> tags */
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b></b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true,
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
},
},
plotLines: [{
value: 0,
width: 2,
color: '',
}],
},
plotOptions: {
series: {
compare: 'value',
showInNavigator: true,
},
},
xAxis: {
type: 'datetime',
lineWidth: 1,
lineColor: '',
},
series: [
{
data: [],
color: '',
name: '',
compare: 'percent',
},
{
data: [],
color: '',
name: '',
compare: 'percent',
},
{
data: [],
color: '',
name: '',
compare: 'percent',
},
{
data: [],
color: '',
name: '',
compare: 'percent',
},
],
},
};
},
mounted() {
if (process.client) {
this.chartOptions.title.style = this.component.cssStyleSheet.title;
this.chartOptions.title.text = this.component.chartTitle;
this.chartOptions.chart.height = this.component.height;
this.chartOptions.title.align = this.component.cssStyleSheet.title_align.align
this.chartOptions.xAxis.lineColor = this.component.xAxisLineColor;
this.chartOptions.yAxis.plotLines[0].color = this.component.plotLineColor;
let lnn = this.component.gData ? this.component.gData.length : 0;
for (let i = 0; i < lnn; i++) {
this.chartOptions.series[i].name = this.component.gData[i].lineLabel;
this.chartOptions.series[i].color = this.component.gData[i].lineColor;
this.chartOptions.series[i].data = this.component.gData[i].plots;
}
}
},
};
</script>
I feel like I'm missing an install library since it worked on my other machine.
This works on my production site.
Is there a way to see what is installed on production and not on my development env?
