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

ReactJS and JavaScript offer a convenient solution for extracting the most recent date from an array of date fields during the selection process

I have a table in ReactJS that displays an array of items. Each item has the following fields: id, requested_date, and location Additionally, there is another field called "date" which is located outside of the array. This "date" should always display th ...

javascriptreactjs

What is the Reason for Repeatedly Rebuilding Our React App to Validate Changes?

Just diving into the world of React and eager to start working with it. I followed a tutorial related to this project, where create-react-app was used to create a new React application. We're facing an issue where we have to rebuild the entire app u ...

node.jsreactjsexpresscreate-react-appmern

Utilize Bootstrap v4 in styling and aligning buttons for a polished

With Bootstrap v4 dropping the .btn-group-justified class, a solution can be found at https://github.com/twbs/bootstrap/issues/17631 Here's how to justify the buttons: <div class="btn-group btn-group-justified" role="group" aria-label="Justified ...

cssbootstrap-4twitter-bootstrap-4

Experiencing difficulties in deploying to Heroku due to a conflicting peer dependency with email-validator@2.0

Encountering production issues while deploying my app to Heroku. The following error log is displayed when attempting to push from the node git: Counting objects: 100% (194/194), done. Delta compression using up to 8 threads Compressing objects: 100% (185/ ...

node.jsreactjsgitnpmheroku

Are the fetch functions within getStaticProps and getServerSideProps equivalent to the fetch API native to web browsers?

I've been working with Next.js for some time now and I'm questioning the fetch API used in both getStaticProps and getServerSideProps. Below is my understanding of these functions: getStaticProps runs during build time and ISR getServerSidePro ...

javascriptnode.jsreactjsnext.jsfetch-api

`The process of converting Typescript to ES5 through compiling/transpiling is encountering issues`

My current project involves using Webpack and integrating angular2 into the mix. To achieve this, I made adjustments to my setup in order to compile TypeScript. Following a resource I found here, my plan was to first compile TypeScript to ES6 and then tra ...

typescriptwebpackecmascript-6babeljses6-modules

Ensuring that the empty bubble remains undisturbed, here's a guide on effectively implementing the if

I need assistance with adding an "if condition" to my text field. The condition should prevent the empty bubble from appearing when the send button is clicked. function verifyInput(){ var currentText = document.getElementById("demo").innerHTML; var x ...

javascripthtmlcss

Why do Material UI components fail to render in jsdom while using Jest?

During my UI testing using Jest/React Testing Library, I encountered a peculiar issue. In one of my components, the return statement is structured as follows: const sidebarContentUp = ( <Drawer anchor="left" onClose={onMobileC ...

javascriptreactjsjestjsnext.jsmaterial-ui

Optimized layout for screen resolutions exceeding 1000 pixels wide

As I work on making my website responsive using Dreamweaver CC, I'm encountering a problem with screen sizes larger than 1000px. In Dreamweaver, there are three options for responsive web design at the bottom: desktop 1000px and less, tablet 768px an ...

htmlcssresponsive-design

NextJS14 experiencing a duplication issue with toast notifications

After upgrading to the latest NextJS version, I encountered a problem with rendering toast notifications using react-hot-toast. The challenge arose from the fact that these notifications could not be displayed in server components. As a workaround, I crea ...

reactjsnext.jsreact-hot-toast

Is there a method to consistently keep the horizontal scrollbar in view for the MUI Data Grid at all times?

I have a Data table with virtualized columns, totaling more than 25 in number. Users can easily scroll horizontally using a trackpad, but without one, they may struggle to access all the columns due to the delayed appearance of the scrollbar. Is there a w ...

cssreactjsmaterial-uidatagridhorizontal-scrolling

Create a connection between a div and a React component, allowing for the seamless transfer of

I'm looking to implement a feature where clicking on a specific div will redirect the user to another page, similar to React Router. However, I currently lack the knowledge to make it happen. Below is the code snippet in question: const Card: React.FC ...

javascriptreactjsreact-router

Unpredictable decorative border in Material UI

I'm currently developing a React application and utilizing Material UI for the majority of my frontend design. However, I've encountered an unusual bug that seems to be perplexing me. Some of my pages display a small white border around the perim ...

reactjsmaterial-ui

How CSS can affect the layout of elements on a webpage

I am looking to achieve something similar to this: The left box should maintain a fixed width, while the right one resizes to fit the full width of the browser window. I also need the height of both boxes to be resizable. Apologies for any inconvenience ...

htmlcss

Guide to dividing a URL in reactjs/nextjs

Here is the complete URL: /search-results?query=home+floor&categories=All+Categories. I am looking to separate it into two sections - /search-results and query=home+floor&categories=All+Categories. My objective is to extract the second part of t ...

javascriptreactjsnext.js

Enhancing performance of React Native app in production by eliminating console.log statements through yarn and npm

Employing console.log statements is a prevalent technique for debugging in various JavaScript applications, including React Native apps. However, it is important to remove these console statements before publishing React Native apps to prevent potential ...

androidreactjsnode.jsreact-nativeconsole

Enhancing Your Navbar Brand with Images using Flexbox and Bootstrap

I've been working on a project where I decided to customize the Bootstrap navbar by breaking it up into flexboxes in order to align everything according to the specifications. However, I've encountered an issue while trying to place a logo in the ...

htmltwitter-bootstrapcss

Alignment issue detected

I was attempting to center these 4 divs inside a container both horizontally and vertically, but they are stuck at the top edge of the <div>. They aren't moving down and remain fixed at the top. /* Footer */ #footer { width: 100%; hei ...

htmlcss

Is there a way to exclude a specific value from a nested zod scheme?

I'm working with a zod schema where I need to omit certain fields from the schema entirely, instead of just making them optional. Is there a way to achieve this directly in zod? Can fields be omitted or can the schema be preprocessed somehow? For ins ...

reactjsreact-hook-formzod

Is it possible to automatically adjust the text color based on the dynamic background color?

While browsing Palantir.com, I noticed that the logo color always changes to be the inverse of the background color behind it as the background scrolls or changes. I'm currently working on a website using Wordpress and would love to achieve the same ...

htmlcsswordpress