bonndan / dld4e-headless

server-side rendering of network and architecture diagrams
https://github.com/cidrblock/drawthe.net
14 stars 3 forks source link

Recent Node changes seem to have broken the app #3

Open thomasbridge74 opened 4 years ago

thomasbridge74 commented 4 years ago

I just did a fresh docker build on the app. Sending a request to the application generates an error on the console

ReferenceError: navigator is not defined at HTMLUnknownElement.defaultTouchable (/usr/src/app/node_modules/d3-zoom/dist/d3-zoom.js:108:3) at Selection.selection_filter [as filter] (/usr/src/app/node_modules/d3-selection/dist/d3-selection.js:106:38) at zoom (/usr/src/app/node_modules/d3-zoom/dist/d3-zoom.js:145:8) at Selection.selection_call [as call] (/usr/src/app/node_modules/d3-selection/dist/d3-selection.js:329:12) at Object.draw (/usr/src/app/src/dld4e/dld4e-draw.js:115:6) at /usr/src/app/src/index.js:31:22 at Layer.handle [as handle_request] (/usr/src/app/node_modules/express/lib/router/layer.js:95:5) at next (/usr/src/app/node_modules/express/lib/router/route.js:137:13) at Route.dispatch (/usr/src/app/node_modules/express/lib/router/route.js:112:3) at Layer.handle [as handle_request] (/usr/src/app/node_modules/express/lib/router/layer.js:95:5)

Googling the general error generates some stuff about this being browser based (but of course this application is designed not to be)...

I've narrowed this error down to the lines:

var svg = d3.select(d3n.document.querySelector("#svg")).append("svg") .attr("width", parentBox.width) .attr("height", parentBox.height) .style("background-color", diagram.fill) .call(d3.zoom().on("zoom", function () { svg.attr("transform", d3.event.transform) })) .append("g") .attr("transform", "translate(" + (parentBox.width - svgWidth) / 2 + "," + (parentBox.height - svgHeight) / 2 + ")");

And specifically:

.call(d3.zoom().on("zoom", function () { svg.attr("transform", d3.event.transform) }))

part of that statement.

I suspect something subtle has changed in the underlying Node.JS modules, but I am not a Node expert.

thomasbridge74 commented 4 years ago

Further investiagation revealed the d3-zoom module (called by d3-node) in it's 1.9.x versions was causing the error. Forcing npm to use 1.7.1 by explicitly spelling it out in the packages.json resolved the issue.