0

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.

FlutterFirebase
  • 2,163
  • 6
  • 28
  • 60

2 Answers2

0

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.

helrabelo
  • 491
  • 4
  • 8
0

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/

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • Thanks for reply! Will this cause any issue with my current website - or it just solve the package problem? – FlutterFirebase Nov 02 '20 at 14:03
  • It's just to solve the package interpolation problem. However, as I said, you may need to use `test: /stylis/,`. Take a look at the provided link, it's a common issue when dealing with third-party modules that use the `window` for their stuff. – Ferran Buireu Nov 02 '20 at 14:08
  • Thanks for reply! The link say it will remove the package - so will this cause error if I remove `/canvas/`? – FlutterFirebase Nov 02 '20 at 14:15
  • It won't remove anything. It just adds a null loader to the offending module. – Ferran Buireu Nov 02 '20 at 14:28
  • Thanks for reply! So it just load up null when there the error is display? – FlutterFirebase Nov 02 '20 at 14:36
  • The error comes because your package (`stylis`, `canvas`, or something that they use) is using `window` to make their stuff. Since your `gatsby build` occurs in the server, it breaks the code because there is no `window`. With the snippet above, you are bypassing this limitation, adding a `null` loader to webpack's configuration for the package that matches the regular expression. – Ferran Buireu Nov 02 '20 at 14:54
  • So this mean the package is deactivate? – FlutterFirebase Nov 02 '20 at 15:40
  • Read the docs, please. This means that you are telling webpack to add a `null` loader in its transpilation to avoid the SSR of this dependency. – Ferran Buireu Nov 02 '20 at 15:59