Uncaught TypeError: setting getter-only property "top" when calling axis function
Nate-Wessel opened this issue · comments
Using the latest release (1.0.12), I was unable to produce axes, always getting the error Uncaught TypeError: setting getter-only property "top"
when calling an axis function, e.g.
const years = [2019,2018,2017,2016,2015]
const margin = {top: 0, right: 60, bottom: 40, left: 0}
const Y = scaleLinear() // time axis
.domain([Math.min(...years),Math.max(...years)])
.range([0,height-margin.bottom])
svg.append('g')
.attr('transform',`translate(${width-margin.right},0)`)
.call(axisRight(Y)) // <-- it always failed right here
Reverting the package to 1.0.0 solved the problem with no change to my code.
I could not reproduce the issue https://observablehq.com/d/0ab1d4e6db80f3c1
I don't know how to use observable, but I will offer the following in case it helps:
- I am using Firefox 79 (Same error in Chrome though)
- I am getting this package via NPM and bundling everything with Rollup
- I tried working backwords from the current version (1.0.12), building with each patch version until I got something that worked. 1.0.2 worked for me, indicating that the problem (whatever it may be) was introduced in 1.0.3.
- My other dependencies are:
"dependencies": {
"accessible-autocomplete": "^2.0.3",
"d3-axis": "1.0.2",
"d3-fetch": "^1.2.0",
"d3-scale": "^3.2.1",
"d3-scale-chromatic": "^1.5.0",
"d3-selection": "^1.4.2",
"d3-shape": "^1.3.7",
"d3-time": "^1.1.0",
"d3-time-format": "^2.2.3",
"d3-transition": "^1.3.2"
}
The only change in 1.0.3 was adding a module entry to the package.json, which suggests that this is a bundler misconfiguration in your project.
Aha.
I don't quite understand the difference yet, but I switched to bundling into UMD format from CommonJS. The latest version now works for me without error. I had been using the same bundler settings on other projects for a while now without error, so I assumed the problem was with this package. Sorry for the bother if the problem was just on my end. Looks like I have some reading to do on JS module formats!
Thanks!
I had the same issue - maybe commonJS does not use proper namespaces and this causes a collision with whatever package was added in the package.json? Anyway, UMD fixed it for me too