Cannot assign to read only property 'data' of object

[SVPA-CharlieSantos]

When using heatmap.js on certain browsers, this error Cannot assign to read only property 'data' of object shows up.

I'm able to reproduce on chromium that is packaged with electron version 1.3.3.

This seems to happen because the data property of ImageData object is being replaced directly in this part of the code. https://github.com/pa7/heatmap.js/blob/master/src/renderer/canvas2d.js#L280

data property seems to be read only on certain browser versions. To fix it, we need to delete this line because imgData and img.data points to the same reference. Any modifications you do to imgData is already reflected to img.data. I'll put up a PR soon.

[kmlwlkwk]

Same here. I found that problem occur only on prod env when all my scripts are bundled and "use strict" is on top of bundle.

[jakob-e]

FYI – this fork worked for me
https://github.com/santoscharlie/heatmap.js/blob/146116ac2f0249d501ec3767729b8429fc57ae3e/build/heatmap.js

[njifares]

I'm facing the same issue using heatmapjs in my Angular application.

[shmilyoo]

facing same issue , react rollup babel

[subtext916]

The fork shared by jakob-e works for me too. I'm using rollup to bundle everything. This has been open for some time. That fork is not on npm. What should be done next?

[ascandal]

The fork shared by jakob-e is behind master by 12 commits.

This branch is 1 commit ahead, 12 commits behind pa7:master.

[theusner-thing]

Is there any progress on this one?
The fix removed img.data replacement due to the following issue seem to do the trick. We tested this in our environment (Angular 8)

Thanks

[Cristy94]

Any suggestions on how to include this fix from package.json (eg. load the library from that fork) ?

EDIT: This seems to work: "heatmap.js": "https://github.com/ionata/heatmap.js.git" instead of "heatmap.js": "^2.0.5"

[xgqfrms]

heatmap.js version / usage bug

heatmap.js v2.0.5

1. import errors ❌

import HeatMap from '@/libs/heatmap.min.js';
// import '@/libs/heatmap.min.js';

const parentPage = document.getElementById('parentPage');
const heatMapObj = HeatMap.create({
    container: parentPage,
    radius: 30,
    maxOpacity: .5,
    minOpacity: 0,
    blur: .75
});

// import HeatMap from '@/libs/heatmap.min.js';
import '@/libs/heatmap.min.js';

const parentPage = document.getElementById('parentPage');
const heatMapObj = h337.create({
    container: parentPage,
    radius: 30,
    maxOpacity: .5,
    minOpacity: 0,
    blur: .75
});

2. window.h337 ok ✅

const importScript = () => {
    if(!window.h337) {
        const script = document.createElement('script');
        script.src = '/libs/heatmap.min.js';
        const body = document.querySelector('body');
        body.appendChild(script);
    }
};

importScript();

const parentPage = document.getElementById('parentPage');
const heatMapObj = h337.create({
    container: parentPage,
    radius: 30,
    maxOpacity: .5,
    minOpacity: 0,
    blur: .75
});

[ridweng]

#344 pull request.
Should be fixing this issue.

[iaaseihy]

so how can this problem be solved in version 2.0.5

[ridweng]

so how can this problem be solved in version 2.0.5

Remove line 527 "img.data = imgData", or in the min version, locate this and delete it. That worked for me.

[chen766]

同样在这里。我发现当我所有的脚都被抓绑定并“use strict”位在抓绑定包之时，问题只发生在 prod env 上。

你好，请问有解决了吗

[lobaak]

This project appears to be abandoned. For anyone else experiencing this issue and using leaflet - switching to 'leaflet.heat' was easy enough.
https://www.npmjs.com/package/leaflet.heat

[Nexudus]

If you are using NPM patch-package, you could use the attached patch file to correct this in 2.0.5 directly in node_modules as part of your build scripts.

heatmap.js+2.0.5.patch