rachelyang
Posts: 3
Joined: Tue Sep 06, 2022 7:49 pm

Cannot read property 'hasOwnProperty' of undefined

I installed highcharts by npm install highcharts --save
I required highcharts and export as instructed in the js script:
var Highcharts = require('highcharts');
require('highcharts/modules/exporting')(Highcharts);
Highcharts.chart('container', {
chart: {
type: 'areaspline'
},
title: {
text: 'Bandwidth by ID'
},

xAxis: {
type: 'datetime'
},
series:[{
name: 'bandwidth',
data: newarr
}]
})

When I run nodejs, I got an error in /highcharts/modules/exporting.js:10
(function(a){"object"===typeof module&&module.exports?(a["default"]=a,module.exports=a):"function"===typeof define&&define.amd?define("highcharts/modules/exporting",["highcharts"],function(k){a(k);a.Highcharts=k;return a}):a("undefined"!==typeof Highcharts?Highcharts:void 0)})(function(a){function k(a,b,u,D){a.hasOwnProperty(b)||(a=D.apply(null,u),"function"===typeof CustomEvent&&window.dispatchEvent(new CustomEvent("HighchartsModuleLoaded",{detail:{path:b,module:a}})))}a=a?a._modules:{};k(a,


TypeError: Cannot read property 'hasOwnProperty' of undefined
at k (/highcharts/node_modules/highcharts/modules/exporting.js:10:313)

BTW, my nodejs version is v10.19.0
npm version is 6.14.4
Highcharts version is 10.2.1

How do I fix this issue?
Thanks
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Cannot read property 'hasOwnProperty' of undefined

Hi rachelyang!
Welcome to our forum and thanks for contacting us with your question!

I was trying to reproduce your problem, but in my case, everything is working correctly. Here is the online working demo: https://codesandbox.io/s/import-export- ... ked-hrkcp4

Could you reproduce the issue in an online editor that I could work on? You can use my demo from above and send me a forked link.

I am looking for your response.
Regards!
Hubert Kozik
Highcharts Developer
rachelyang
Posts: 3
Joined: Tue Sep 06, 2022 7:49 pm

Re: Cannot read property 'hasOwnProperty' of undefined

Hi Hubert,
Thanks for your reply. I would like to run my nodejs script on my server (Ubuntu 20.04.4) and export the chart to the webpage of the server. When I ran node json_to_array_to_highcharts.js, /highcharts/node_modules/highcharts/modules/exporting.js returned an error. How can I fix the issue on my server? Thanks
rachelyang
Posts: 3
Joined: Tue Sep 06, 2022 7:49 pm

Re: Cannot read property 'hasOwnProperty' of undefined

Hi Hubert,
If I comment on the export part, I get another error.
Highcharts.chart('container', {

TypeError: Highcharts.chart is not a function
at Object.<anonymous> (/highcharts/node_modules/json_to_array_to_highcharts.js:14:12)
at Module._compile (node:internal/modules/cjs/loader:1126:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
at Module.load (node:internal/modules/cjs/loader:1004:32)
at Function.Module._load (node:internal/modules/cjs/loader:839:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47

How can I fix this issue? Thanks
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Cannot read property 'hasOwnProperty' of undefined

rachelyang,

After your answers, I think that I'm missing something. Could you tell me do you want to use Highcharts official npm package locally installed in your project and then show the chart on the website? Article here: https://www.highcharts.com/docs/getting ... l-from-npm

Or do you want to use our Export Server, described here: https://www.highcharts.com/docs/export- ... the-server https://github.com/highcharts/node-export-server

I am looking for your response.
Regards!
Hubert Kozik
Highcharts Developer
sethumadh
Posts: 2
Joined: Thu May 25, 2023 4:48 am

Re: Cannot read property 'hasOwnProperty' of undefined

Hi Hubert,
I am also facing the same issue / error that the OP has faced. When I am refreshing the page I get this error. TypeError: Cannot read properties of undefined (reading 'hasOwnProperty').
I am trying to use Highcharts official npm package locally installed in your project and then show the chart on the website. My code is


Code: Select all

import React, { useEffect } from "react"
import Highcharts from "highcharts" 
import HighchartsReact from "highcharts-react-official"
import HighchartsExporting from 'highcharts/modules/exporting';
HighchartsExporting(Highcharts);

const ColumnChart = () => {
  // useEffect(()=>{
  //   HighchartsExporting(Highcharts);
  // },[])
  const options = {
    chart: {
      type: "column",
      height: 200,
      // width:1000
      
    },
    title: {
      text: "Sales Overview is $100,000",
      align: "left",
      x: 10,
      style: {
        color: "#4B5563",
        fontSize: "14px",
        fontWeight: "bold",
      },
    },
    subtitle: {
      text: 'Last Period<span style="color:#7cb5ec;margin:0 10px">●</span> This Period <span style="color:#434348">●</span>',
      useHTML: true,
      style: {
        color: "#6B7280",
        fontSize: "14px",
      },
      // symbol: 'square'
    },
    xAxis: {
      categories: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec",
      ],
    },
    yAxis: {
      title: {
        text: "Sales",
      },
    },
    series: [
      {
        name: "2019",
        data: [
          20000, 25000, 30000, 28000, 32000, 27000, 31000, 29000, 33000, 31000,
          34000, 36000,
        ],
      },
      {
        name: "2020",
        data: [
          30000, 35000, 38000, 36000, 39000, 37000, 40000, 42000, 41000, 43000,
          40000, 45000,
        ],
      },
    ],
    credits: {
      enabled: false,
    },
    plotOptions: {
      column: {
        pointPadding: 0.01, // set the padding between each column
        groupPadding: 0.05, // set the padding between each group of columns
      },
    },
  }

  return (
    <div className="w-full rounded-md bg-white px-4 shadow-md">
      <HighchartsReact highcharts={Highcharts} options={options} />
      
    </div>
  )
}

export default ColumnChart
-------------------------------------------------------------------

Code: Select all

import React from "react"
import ColumnChart from "@components/charts/sellers/ColumnChart"
import AddIcon from "@mui/icons-material/Add"
import ExtensionIcon from "@mui/icons-material/Extension"
import UploadFileIcon from "@mui/icons-material/UploadFile"

const Analytics = () => {
  return (
    <div className="w-[90] pb-8">
      <nav className="my-8 ml-8 flex items-center justify-between pr-8">
        <h1 className="text-3xl font-semibold">Dashboard</h1>
        <div className="flex space-x-8">
          <button className="rounded-full bg-andisor-blue px-3 py-2 text-sm text-white">
            <div className="flex items-center">
              <AddIcon style={{ width: "15px" }} />
              <p>Start new order</p>
            </div>
          </button>
          <button className="rounded-full bg-andisor-blue px-3 py-2 text-sm text-white">
            <div className="flex items-center space-x-2">
              <AddIcon style={{ width: "15px" }} />
              <p>Add new product</p>
            </div>
          </button>
          <button className="rounded-full px-2 py-2 text-sm ">
            <div className="flex items-center space-x-2">
              <ExtensionIcon style={{ width: "15px" }} />
              <p>Manage Integrations</p>
            </div>
          </button>
          <button className="rounded-full px-2 py-2 text-sm ">
            <div className="flex items-center space-x-2">
              <UploadFileIcon style={{ width: "15px" }} />
              <p>Export CSV</p>
            </div>
          </button>
        </div>
      </nav>
      <div className="flex flex-col">
        <div id="AnalyticsPage" className=" ml-8 mt-8 flex space-x-6">
          <div className="flex  flex-col space-y-2 rounded-xl border px-8 py-4 shadow-md">
            <h1 className=" text-sm text-gray-600">Earnings (before tax)</h1>
            <h1 className="text-xl font-semibold">$3000</h1>
            <h1 className=" text-sm text-gray-600">
              after associating vendor fees
            </h1>
          </div>
          <div className="flex  flex-col space-y-2 rounded-xl border px-8 py-4 shadow-md">
            <h1 className=" text-sm text-gray-600">Your balance</h1>
            <h1 className="text-xl font-semibold">$4000</h1>
            <h1 className=" text-sm text-gray-600">
              Will be processed on Feb 15, 2021
            </h1>
          </div>
          <div className="flex  flex-col space-y-2 rounded-xl border px-8 py-4 shadow-md">
            <h1 className=" text-sm text-gray-600">pending Orders</h1>
            <h1 className="text-xl font-semibold">08</h1>
            <h1 className=" text-sm text-gray-600">7/3/2020 - 8/1/2020</h1>
          </div>
        </div>
        <div>{/* date */}</div>
        <div className="mt-8 flex space-x-3">
          {/*  2nd section */}
          <div className=" ml-8 flex flex-col space-y-2">
            <div className="flex flex-col space-y-2 rounded-xl border bg-andisor-blue px-8 py-5 text-white shadow-md">
              <h1 className=" text-sm">Number of orders</h1>
              <h1 className="text-xl font-semibold">501</h1>
            </div>
            <div className="flex  flex-col space-y-2 rounded-xl border px-8 py-5 shadow-md">
              <h1 className=" text-sm text-gray-600">Total GMV</h1>
              <h1 className="text-xl font-semibold">$102,352</h1>
            </div>
          </div>
          <div className=" mx-4 w-[80%]">
            <ColumnChart />
          </div>
        </div>
      </div>
    </div>
  )
}

export default Analytics
------------------------------------------

my package.json has
"highcharts": "^11.0.1",
"highcharts-exporting": "^0.1.7",
"highcharts-more": "^0.1.7",
"highcharts-react-official": "^3.2.0",
sethumadh
Posts: 2
Joined: Thu May 25, 2023 4:48 am

Re: Cannot read property 'hasOwnProperty' of undefined

Just to add to my post , the error message is :
Collecting page data ...TypeError: Cannot read properties of undefined (reading 'hasOwnProperty')
at e (/Users/sethumadhavankochukrishnanpotti/Desktop/andisor-frontend/node_modules/highcharts/modules/exporting.js:10:326)
at /Users/sethumadhavankochukrishnanpotti/Desktop/andisor-frontend/node_modules/highcharts/modules/exporting.js:11:4
at 3432 (/Users/sethumadhavankochukrishnanpotti/Desktop/andisor-frontend/.next/server/pages/sellers/analytics.js:36:20)
at __webpack_require__ (/Users/sethumadhavankochukrishnanpotti/Desktop/andisor-frontend/.next/server/webpack-runtime.js:25:42)
at /Users/sethumadhavankochukrishnanpotti/Desktop/andisor-frontend/.next/server/pages/sellers/analytics.js:1161:96
at __webpack_require__.a (/Users/sethumadhavankochukrishnanpotti/Desktop/andisor-frontend/.next/server/webpack-runtime.js:89:13)
at 5399 (/Users/sethumadhavankochukrishnanpotti/Desktop/andisor-frontend/.next/server/pages/sellers/analytics.js:1153:21)
at __webpack_require__ (/Users/sethumadhavankochukrishnanpotti/Desktop/andisor-frontend/.next/server/webpack-runtime.js:25:42)
at __webpack_exec__ (/Users/sethumadhavankochukrishnanpotti/Desktop/andisor-frontend/.next/server/pages/sellers/analytics.js:1471:39)
at /Users/sethumadhavankochukrishnanpotti/Desktop/andisor-frontend/.next/server/pages/sellers/analytics.js:1472:67



It clearly says ""/Users/sethumadhavankochukrishnanpotti/Desktop/andisor-frontend/node_modules/highcharts/modules/exporting.js" at line 10, where there is an attempt to read properties of an undefined object." But I have installed and imported correctly in my code i believe.
jakub.s
Posts: 1167
Joined: Fri Dec 16, 2022 11:45 am

Re: Cannot read property 'hasOwnProperty' of undefined

Hi,

Thanks for the question!

It's hard to say why this error appears as everything seems to work with your config here: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

1. I do not think that it's necessary to include highcharts-exporting and highcharts-more in your package.json as you have these modules in the standard highcharts library.

Code: Select all

import HighchartsExporting from 'highcharts/modules/exporting';

Then, as you can see, the additional packages should be unnecessary. I'd suggest you delete them from your package.json dependencies.

2. The config you've included seems to be correct. Could you please try to reproduce this issue in an online code editor or create a small GitHub repo that I could clone to see why it doesn't work?

I'm sorry, but I can't really figure out what's wrong from the parts of the code you've included because everything seems to be okay with them.

I'll be waiting for your response.

Best regards!
Jakub
Highcharts Developer

Return to “Highcharts Usage”