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.