Gatsby's build process encounters a stumbling block when webpack fails due to issues

Every time I try to run gatsby build, an error pops up:

failed Building static HTML for pages - 10.179s

 ERROR #95313 

Building static HTML failed

Refer to our documentation page for more details on this issue: 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

What steps can be taken to resolve this issue? There are no errors when running gatsby develop.

cssreactjswebpackgatsbystylish

Answer №1

Make sure to include the gatsby-plugin-emotion in your gatsby-config.js file:

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

After making this change, remember to restart the gatsby development server for the changes to take effect.

Answer №2

To implement this code snippet, simply insert it into your gatsby-node.js file:

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

If there are packages attempting to access global objects like window or document during Server-Side Rendering (SSR), you may encounter errors as these objects are not defined in the Node server environment where gatsby build runs. To address this, the provided snippet inserts a null loader for the problematic module during webpack compilation.

The rule's regex test targets specific folders within node_modules, flagging any issues related to them. While the error message mentions a canvas problem, you can adjust the test pattern to include other modules like /stylis/ depending on your project's requirements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I alter the background color while performing a transformation in JS/CSS?

I'm currently working on achieving a flipboard effect for some divs, where one side is white and the other is black. Here's what I have so far: setInterval(function () { document.getElementById('test').classList.toggle('flipped& ...

javascripthtmlcss

Encountering a React App 404 Error upon refreshing the webpage

I've encountered an issue with my React application - it works perfectly when initially loaded in the browser, but upon refreshing the page, a 404 Error is displayed. Below is the code for my App.js file. I am still learning React, so any advice or su ...

reactjsreact-router

When a click event is triggered, it is not returning an object but rather

My issue seems to be quite simple. I am attempting to add an onClick callback to my script, but it appears that I am missing a value that should help in locating the actual item. This is the main script: import React from 'react'; import { CSVL ...

reactjscallbackstorybook

Fixing malfunctioning bootstrap dropdown menus in a few simple steps

For a while, I have been using the bootstrap dropdown code as a template and it was working perfectly fine. However, after ensuring everything is up to date, all my dropdowns have suddenly stopped working. Even when I tried pasting the bootstrap code dire ...

htmlcssbootstrap-4

What is the best way to retrieve data from an object within an array as the state is updating in React using hooks?

Referencing a previous post: What's the React best practice for getting data that will be used for page render? In my current project, I am utilizing useState([]) to add objects to an array. Each object contains a firstName and lastName value. My goal ...

reactjsreact-hooks

Leveraging Apollo GraphQL Client with ReactJS - Utilizing properties within a GraphQL query

I am working on a component that displays users associated with a specific type of entity. This component uses the apollo graphql compose helper for rendering. The export code for the component is structured like this: export const UsersContainer = compos ...

reactjsgraphqlapollo-client

Dealing with asynchronous calls in useEffect.Here are some tips for managing

When invoking a function from within a useEffect, which is located in a different class, there seems to be an issue with receiving the expected data back. The function call triggers another async function that makes an API call and performs operations on t ...

javascriptreactjsaxios

Elements separated by empty space on a Complex Grid, appearing distant despite the available space

Struggling with creating a complex layout using minimal relative and absolute positioning. Here's the issue I'm facing: All my elements are aligned side by side with only one problem: the border image needs to bleed into the row below. How can t ...

htmlcsslayoutsusy

Menu button is expanded without the need to click

The Bootstrap 5 button extends the default behavior and does not collapse. Here is the code: <nav id="header-nav" class="navbar navbar-expand-lg navbar-light"> <div class="container"> <a class= ...

javascripthtmlcssbootstrap-5visual-web-developer-2010

Display all elements that come before and after the current element

For debugging purposes, I need to output the IDs of all previous images in a check. The issue arises when trying to assign classes to all previous elements using the script below, as the images are not being added to the correct classes. $(document).on(&a ...

jqueryhtmlcss

Tips for customizing table cell styling in editable cells with React material table

My code utilizes a material table with editable cells. However, I am encountering a strange style issue when I edit a cell in the table. Please refer to the image below. Can anyone suggest a solution to fix this problem? https://i.sstatic.net/Miiov.png ...

javascriptreactjsmaterial-uifrontendmaterial-table

TypeScript - ESBuild - Encountered an unexpected '<' token

When compiling TypeScript files for a React app with esbuild, everything goes smoothly. However, upon checking the browser console, an error pops up: An unexpected token '<' is causing errors after the return statement // components/editor/ ...

reactjstypescriptnext.jsesbuild

Stop Autocomplete from changing the value in ReactJS Material UI

Looking for a solution with the Autocomplete component to restrict selection of specific values. Any ideas? const options = ["Option 1", "Option 2", "Option 3"]; const [value, setValue] = React.useState(options[0]); const [in ...

reactjsautocompletematerial-ui

The componentDidMount function is not functioning properly when using a custom _document.js in NextJS

Currently, I am in the process of developing a web app prototype and decided to utilize NextJS to enhance my skills. However, I have realized that my approach differs from the traditional method. I initially began with the Next + Material-UI example availa ...

reactjsmaterial-uinext.js

Fiddle demonstrates HTML functionality, while local testing is unsuccessful

Currently, I am in the process of creating an image slider and attempting to run it on my personal computer. However, upon doing so, I have encountered a problem where the page is not rendering correctly. Additionally, I receive an ActiveX warning message ...

javascriptjquerycsshtml

Using JQuery, it is possible to search for elements by one specific class while excluding others

Looking for a way to target elements with a specific class, but only if they don't have another class attached to them. Here is an example: <li class="target-class exclude-class"></li> <li class="target-class exclude-class"></li& ...

javascriptjqueryhtmlcss

The jQuery attr() method is universally compatible across platforms and stands independent

I have a jQuery statement that is currently working for me, but I am unsure if it is cross-platform independent. Can anyone confirm? $("input[name='confirmed']").attr("checked",false); It is functioning correctly on the latest version of Firefo ...

jqueryhtmlcssdhtmlattr

React CSS Modules - Adding styles to individual child elements

I'm having difficulty applying CSS styles to each child of a specific tag. I am using CSS modules in conjunction with semantic-ui-react: character.module.css .Character > GridColumn { border: solid 4px red; } character.js import React, {Com ...

cssreactjssemantic-ui-reactcss-modulesreact-css-modules

Importing modules dynamically in NextJS allows for the loading of

I have a basic function that is responsible for loading a script: const creditCardScript = ( onReadyCB, onErrorCB, ) => { let script = document.createElement("script"); script.type = "text/javascript"; script.src = process.CREDIT_CARD_SCRIPT; ...

javascriptnode.jsreactjsnext.jsreact-loadable

Trouble with CSS styling arising when launching the MVC application on IIS

Currently working on a website in ASP.Net MVC 5. I am trying to test it on my local IIS (version 8), but encountering an issue where the CSS styling is not being applied. In my _layout.cshtml file, I opted for direct link tags instead of using bundles. &l ...

cssasp.net-mvciis