app.js:4168 Uncaught TypeError: Cannot read property 'prototype' of undefined

[Ahsan-zaman]

I'm trying to use Organization module in my vue app. But this error is showing up ERROR

app.js:4168 Uncaught TypeError: Cannot read property 'prototype' of undefined
    at app.js:4168
    at e (app.js:4167)
    at app.js:4167
    at Module../resources/js/app.js (app.js:129574)
    at __webpack_require__ (app.js:64)
    at Object.0 (app.js:130320)
    at __webpack_require__ (app.js:64)
    at app.js:199
    at app.js:202

My App.js

import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'
import Highcharts from 'highcharts'
import exportingInit from 'highcharts/modules/exporting'
import OrganizationInit from 'highcharts/modules/organization'

exportingInit(Highcharts)
OrganizationInit(Highcharts)

Vue.use(HighchartsVue)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

In the component :

<template>
<div>
 <highcharts class="chart" :options="chartOptions"></highcharts>
</div>
</template>
<script>
  export default {
    data: () => ({
        chartOptions: {
            chart: {
                height: 600,
                inverted: true
            },

            title: {
                text: 'Highcharts Org Chart'
            },

            series: [{
                type: 'organization',
                name: 'Highsoft',
                keys: ['from', 'to'],
                data: [
                    ['Shareholders', 'Board'],
                    ['Board', 'CEO'],
                    ['CEO', 'CTO'],
                    ['CEO', 'CPO'],
                    ['CEO', 'CSO'],
                    ['CEO', 'CMO'],
                    ['CEO', 'HR'],
                    ['CTO', 'Product'],
                    ['CTO', 'Web'],
                    ['CSO', 'Sales'],
                    ['CMO', 'Market']
                ],
                levels: [{
                        level: 0,
                        color: 'silver',
                        dataLabels: {
                            color: 'black'
                        },
                        height: 25
                    }, {
                        level: 1,
                        color: 'silver',
                        dataLabels: {
                            color: 'black'
                        },
                        height: 25
                    }, {
                        level: 2,
                        color: '#980104'
                    }, {
                        level: 4,
                        color: '#359154'
                }],
                nodes: [{
                    id: 'Shareholders'
                    }, {
                        id: 'Board'
                    }, {
                        id: 'CEO',
                        title: 'CEO',
                        name: 'Grethe Hjetland',
                        image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132317/Grethe.jpg'
                    }, {
                        id: 'HR',
                        title: 'HR/CFO',
                        name: 'Anne Jorunn Fjærestad',
                        color: '#007ad0',
                        image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132314/AnneJorunn.jpg',
                        column: 3,
                        offset: '75%'
                    }, {
                        id: 'CTO',
                        title: 'CTO',
                        name: 'Christer Vasseng',
                        column: 4,
                        image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12140620/Christer.jpg',
                        layout: 'hanging'
                    }, {
                        id: 'CPO',
                        title: 'CPO',
                        name: 'Torstein Hønsi',
                        column: 4,
                        image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12131849/Torstein1.jpg'
                    }, {
                        id: 'CSO',
                        title: 'CSO',
                        name: 'Anita Nesse',
                        column: 4,
                        image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132313/Anita.jpg',
                        layout: 'hanging'
                    }, {
                        id: 'CMO',
                        title: 'CMO',
                        name: 'Vidar Brekke',
                        column: 4,
                        image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/13105551/Vidar.jpg',
                        layout: 'hanging'
                    }, {
                        id: 'Product',
                        name: 'Product developers'
                    }, {
                        id: 'Web',
                        name: 'General tech',
                        description: 'Web developers, sys admin'
                    }, {
                        id: 'Sales',
                        name: 'Sales team'
                    }, {
                        id: 'Market',
                        name: 'Marketing team'
                }],
                colorByPoint: false,
                color: '#007ad0',
                dataLabels: {
                    color: 'white'
                },
                borderColor: 'white',
                nodeWidth: 65
            }],
                tooltip: {
                    outside: true
                },
                exporting: {
                    allowHTML: true,
                    sourceWidth: 800,
                    sourceHeight: 600
                }
        },
    }),
  }
</script>

Versions using :

"vue": "^2.6.10",
"highcharts": "^7.2.1",
"highcharts-vue": "^1.3.5"

[Ahsan-zaman]

I solved the issue....the problem was I had to also import Sankey Module [ "Which is not mentioned in the docs"]. Imports :

import Highcharts from 'highcharts'
import Exporting from 'highcharts/modules/exporting';
import Sankey from 'highcharts/modules/sankey'
import Organization from 'highcharts/modules/organization'

Init in mounted hook :

mounted(){        
    Exporting(Highcharts)
    Sankey(Highcharts)
    Organization(Highcharts)
    Highcharts.chart('conatiner',{
        chart: {
                inverted: true
            },

            title: {
                text: 'Nexo HR Organization Chart'
            },

            series: [{
                type: 'organization',
                name: 'Highsoft',
                keys: ['from', 'to'],
                data: [
                ['Shareholders', 'Board'],
                ['Board', 'CEO'],
                ['CTO', 'Web'],
                ['CSO', 'Sales'],
                ['CMO', 'Market']
                ],
                levels: [{
                level: 0,
                color: 'silver',
                dataLabels: {
                    color: 'black'
                },
                height: 25
                }, {
                level: 1,
                color: 'silver',
                dataLabels: {
                    color: 'black'
                },
                height: 25
                }, {
                level: 2,
                color: '#980104'
                }, {
                level: 4,
                color: '#359154'
                }],
                nodes: [{
                id: 'Shareholders'
                }, {
                id: 'Board'
                }, {
                id: 'CEO',
                title: 'CEO',
                name: 'Grethe Hjetland',
                image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132317/Grethe.jpg'
                }, {
                id: 'HR',
                title: 'HR/CFO',
                name: 'Anne Jorunn Fjærestad',
                color: '#007ad0',
                image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132314/AnneJorunn.jpg',
                column: 3,
                offset: '75%'
                }, {
                id: 'Sales',
                name: 'Sales team'
                }, {
                id: 'Market',
                name: 'Marketing team'
                }],
                colorByPoint: false,
                color: '#007ad0',
                dataLabels: {
                color: 'white'
                },
                borderColor: 'white',
                nodeWidth: 65
            }],
            tooltip: {
                outside: true
            },
            exporting: {
                allowHTML: true,
                sourceWidth: 800,
                sourceHeight: 600
            }
    })
    }

[snowsnow-snow]

Thanks! Your post helped me a lot, thanks again!