Uncaught TypeError: setting getter-only property "top" when calling axis function

[d3]

Uncaught TypeError: setting getter-only property "top" when calling axis function

[Fil]

I could not reproduce the issue https://observablehq.com/d/0ab1d4e6db80f3c1

[Nate-Wessel]

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"
  }

[mbostock]

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.

v1.0.2...v1.0.3

[Nate-Wessel]

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!

[FelixBenning]

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