Gastby4 invalid package requirements

[MGPoirot]

I have a Gasby v4 personal portfilio site that displays a map using leafletjs.
I wanted to allow full screen mode for the map, so I installed

npm install react-leaflet-control

Now upon gatsby build, a I get a complaint that the package canvas is missing:

Module not found: Error: Can't resolve 'canvas' in 'C:\Users\mpoir\repositories\maartens-gatsby-site\node_modules\jsdom\lib\jsdom'

Although installing canvas sounds easy enough (npm i canvas), upon build, Gatsby is trying to build from a natively compiled module, which should not happen (according to the forums and using canvas here seems odd to all forums I find:

Module parse failed: /canvas/build/Release/canvas.node Unexpected character '�'

So I saw no way out but to uninstall canvas and react-leaflet-control.

However I now still can't build, as I see that jsdom is a dependency from a package that did work before (gpxparser).

This is a good explanation on what is going wrong: "Gatsby is a ssr(server side framework), meaning that all the build process is done in node. With that won't have access to certain apis, like canvas. And it generates that error." They suggest this solition in the gatsby-node.js file to silence canvas during build:

exports.onCreateWebpackConfig = ({
  stage,
  rules,
  loaders,
  plugins,
  actions,
}) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /canvas/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
};

However, the solution does not work for me and I am still met with the module parse error.

Seems like I can't go forward and can't go back (I could rollback). I am out of my depth here, what seems like a reasonable solution?