gatsby build fails when building production Javascript and CSS bundles

Question

The gatsby build process recently started failing in my project with this error message:

It's a large project with multiple dependencies, only began receiving this build error a few days ago and not after any major code changes or addition of new packages. I've tried reverting to prior commits but was not successful, also tried upgrading all of the project's dependencies (also unsuccessful).

I haven't found other questions/issues to be of much help in resolving this.

Any ideas for a solution would be greatly appreciated

dependencies in package.json:

 "dependencies": {
    "@fontsource/bebas-neue": "^4.5.0",
    "@fontsource/open-sans": "^4.5.0",
    "@fontsource/roboto": "^4.5.0",
    "@fontsource/work-sans": "^4.5.0",
    "@storybook/addon-docs": "^6.3.0-rc.5",
    "@storybook/addon-postcss": "^2.0.0",
    "gatsby": "^3.6.2",
    "gatsby-plugin-breadcrumb": "^12.1.1",
    "gatsby-plugin-gatsby-cloud": "^2.7.0",
    "gatsby-plugin-google-fonts": "^1.0.1",
    "gatsby-plugin-image": "^1.8.0",
    "gatsby-plugin-manifest": "^3.8.0",
    "gatsby-plugin-react-helmet": "^4.8.0",
    "gatsby-plugin-react-svg": "^3.0.1",
    "gatsby-plugin-remove-trailing-slashes": "^3.11.0",
    "gatsby-plugin-sass": "^4.7.1",
    "gatsby-plugin-sharp": "^3.8.0",
    "gatsby-source-filesystem": "^3.8.0",
    "gatsby-transformer-json": "^3.9.0",
    "gatsby-transformer-sharp": "^3.8.0",
    "node-sass": "^6.0.0",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "react-focus-lock": "^2.5.2",
    "react-helmet": "^6.1.0",
    "react-slick": "^0.28.1",
    "react-use": "^17.2.4",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.3.0",
    "util": "^0.11.1"
  },
  "devDependencies": {
    "@babel/core": "^7.14.5",
    "@storybook/addon-a11y": "^6.3.7",
    "@storybook/addon-actions": "^6.3.0-rc.5",
    "@storybook/addon-essentials": "^6.3.0-rc.5",
    "@storybook/addon-links": "^6.3.0-rc.5",
    "@storybook/builder-webpack5": "^6.3.0-rc.5",
    "@storybook/manager-webpack5": "^6.3.0-rc.5",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.3.0-rc.5",
    "babel-loader": "^8.2.2",
    "babel-preset-react-app": "^10.0.0",
    "css-loader": "^5.2.6",
    "path-browserify": "^0.0.1",
    "prettier": "^2.3.2",
    "sass-loader": "^12.1.0",
    "storybook-addon-designs": "^6.0.0",
    "storybook-addon-pseudo-states": "^1.0.0",
    "style-loader": "^2.0.0"
  }

plugins in the gatsby-config:

  plugins: [
    `gatsby-plugin-breadcrumb`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `icons`,
        path: `${__dirname}/src/assets/icons/`,
      },
    },
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/src/content/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images`,
      },
    },

Is this a problem in the process of building a react project? — Quack, Sep 01 '21 at 21:42
Building a gatsbyjs project, it's also using storybook/react — Nikki Peel, Sep 01 '21 at 21:52
yes, my process is usually to delete the node_modules folder and lock file and then reinstall with `yarn install`. Next I run `gatsby clean` and try to run the build script (which has been leading to this error) — Nikki Peel, Sep 02 '21 at 13:27

score 0 · Answer 1 · answered Sep 03 '21 at 19:08

After reverting back pretty far and reinstalling + rebuilding each commit, I found this line of scss to be the culprit:

@media (max-width: $small) {
                font-size: calc($ts-h2-sm - 4px);
                line-height: $text-lh-md;
            }

Apparently, you cannot use variables in calc() using Sass without Interpolation.

In order to fix this, I changed font-size: calc($ts-h2-sm - 4px); to font-size: calc(#{$ts-h2-sm} - 4px);

Another reference: Sass variable in CSS calc() function

I'm not entirely certain why the error message read as it did, but changing this one line suddenly fixed my build.

gatsby build fails when building production Javascript and CSS bundles

1 Answers1