Gatsby: How do edit gatsby-node.js to fix webpack error 98123 regarding canvas [solved]

[thecarney]

Relevant information

My project uses the Deck.gl library, which I think is the culprit, as previous versions that only had react-map-gl were building successfully, but when I added Deck.gl this week, I can't build now. However, I don't actually render a canvas with Deck.gl, I'm just using Deck.gl to build a layer that gets passed to react-map-gl.

I'm just going off of the Gatsby docs page that says "Using canvas and/or WebGL may require modifying your Webpack config. Do you have experience with making this work in your Gatsby site? Contribute to the docs by adding more details to this page."

[thecarney]

After spending some time learning more bout webpack and ssr, the short answer is that I just needed to add 'canvas' as an external in my gatsby-node.js and all is well now.

[thomasgwatson]

@thecarney I'm fresh to gatsby, how does one "add 'canvas' as an external in my gatsby-node.js"? Assuming it is something I have to do on my CreateWebpackConfig...

[aikodeio]

@thecarney how is it done?

[jonniebigodes]

@aikodeio see if this helps you. It uses another plugin that references the canvas but it should give you some insight on how to handle the issue. Otherwise if you're willing please create a reproduction following steps so that it can be looked at in more detail.

[thecarney]

Don't know how I missed the notifications this thread had questions, but the issue was solved for me by making my gatsby-node.js file look like this:

exports.onCreateWebpackConfig = ({
  actions //, stage, getConfig, rules, loaders, 
}) => {
  actions.setWebpackConfig({
    externals: ['canvas'],
  });
}