Gatsby build webpack fail with stylis

Question

When I run gatsby build I get this error:

failed Building static HTML for pages - 10.179s

 ERROR #95313 

Building static HTML failed

See our docs page for more info on this error: https://gatsby.dev/debug-html


  343 |         for (c = []; b < a; ++b) {
  344 |           for (var n = 0; n < m; ++n) {
> 345 |             c[v++] = Z(d[n] + ' ', h[b], e).trim();
      | ^
  346 |           }
  347 |         }
  348 | 


  WebpackError: The module '/node_modules/canvas/build/Release/canvas.node'
  
  - stylis.esm.js:345 
    node_modules/@emotion/stylis/dist/stylis.esm.js:345:1
  
  - stylis.esm.js:151 
    node_modules/@emotion/stylis/dist/stylis.esm.js:151:1
  
  - stylis.esm.js:175 
    node_modules/@emotion/stylis/dist/stylis.esm.js:175:1
  
  - stylis.esm.js:286 
    node_modules/@emotion/stylis/dist/stylis.esm.js:286:1
  
  - stylis.esm.js:151 
    node_modules/@emotion/stylis/dist/stylis.esm.js:151:1
  
  - stylis.esm.js:175 
    node_modules/@emotion/stylis/dist/stylis.esm.js:175:1
  
  - stylis.esm.js:286 
    node_modules/@emotion/stylis/dist/stylis.esm.js:286:1
  
  - stylis.esm.js:151 

How to solve? When run gatsby develop there is no error.

Answer 1

Update gatsby-config.js to contain the plugin gatsby-plugin-emotion:

module.exports = {
  plugins: [
    `gatsby-plugin-emotion`,
  ],
}

This needs a restart of the gatsby development process.

Answer 2

Add this snippet in the gatsby-node.js:

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

There's a package that is trying to access global objects such as window or document in your SSR (Server-Side Rendering) where obviously is not defined (it even exist) because gatsby-build occurs in the Node server while gatsby develop occurs in the browser-side, where the window exists and the compilation time. With the snippet above, you are adding a null loader to the offending module when webpack transpile the code.

The rule test is a regular expression (hence the braces, /) that matches the folder name inside node_modules. The output error shows a canvas issue but you may need to change it to /stylis/