Error during Gatsby V3 build: Missing class properties transform

[hk86]

Hi there,

if I build my Gatsby V3 page on Gatsby Cloud or Netlify I get this error:

6:55:55 PM: failed Building production JavaScript and CSS bundles - 80.694s
6:55:55 PM: error Generating JavaScript bundles failed
6:55:55 PM: /opt/build/repo/sites/pl/.cache/loader.js: Missing class properties transform.
6:55:55 PM:   101 |   }
6:55:55 PM:   102 |
6:55:55 PM: > 103 |   inFlightNetworkRequests = new Map()
6:55:55 PM:       |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
6:55:55 PM:   104 |
6:55:55 PM:   105 |   memoizedGet(url) {
6:55:55 PM:   106 |     let inFlightPromise = this.inFlightNetworkRequests.get(url)
6:55:55 PM: error Command failed with exit code 1.

This is the relevant part at loader.js:

export class BaseLoader {
  constructor(loadComponent, matchPaths) {
    this.pageDb = new Map()
    this.inFlightDb = new Map()
    this.staticQueryDb = {}
    this.pageDataDb = new Map()
    this.prefetchTriggered = new Set()
    this.prefetchCompleted = new Set()
    this.loadComponent = loadComponent
    setMatchPaths(matchPaths)
  }

  inFlightNetworkRequests = new Map()

I use Node 14 (same error with Node 16). Locally everything builds fine. Any ideas what might be wrong?

Best regards,

HK

[evanstern]

Bumping because I'm getting this exact same error, only for me, it fails locally as well as on Netlify.

I've tried modifying the webpack config to include babel-plugin-transform-class-properties but that is not helping.

I have about a dozen other projects that are all on Gatsby V3 but none of them have this issue except one, so I'm at a loss here.

For reference, here are my dependencies from my current package.json:

{
  "dependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-helmet": "6.1.0"
  },
  "devDependencies": {
    "@contentful/rich-text-react-renderer": "14.1.3",
    "@contentful/rich-text-types": "14.1.2",
    "@emotion/react": "11.4.0",
    "@emotion/styled": "11.3.0",
    "@fortawesome/fontawesome-svg-core": "1.2.35",
    "@fortawesome/free-brands-svg-icons": "5.15.3",
    "@fortawesome/free-solid-svg-icons": "5.15.3",
    "@fortawesome/react-fontawesome": "0.1.14",
    "@types/react": "17.0.6",
    "@types/react-dom": "17.0.5",
    "@types/react-helmet": "6.1.1",
    "@typescript-eslint/eslint-plugin": "4.24.0",
    "@typescript-eslint/parser": "4.24.0",
    "all-contributors-cli": "6.20.0",
    "autoprefixer": "10.2.5",
    "babel-eslint": "10.1.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "cssnano": "5.0.4",
    "dotenv": "9.0.2",
    "eslint": "7.27.0",
    "eslint-config-react-app": "6.0.0",
    "eslint-plugin-flowtype": "5.7.2",
    "eslint-plugin-import": "2.23.3",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-react": "7.23.2",
    "eslint-plugin-react-hooks": "4.2.0",
    "eslint-webpack-plugin": "^2.5.4",
    "gatsby": "3.5.1",
    "gatsby-image": "3.5.0",
    "gatsby-plugin-emotion": "6.5.0",
    "gatsby-plugin-eslint": "3.0.0",
    "gatsby-plugin-fontawesome-css": "1.1.0",
    "gatsby-plugin-image": "1.5.0",
    "gatsby-plugin-manifest": "3.5.0",
    "gatsby-plugin-netlify": "3.5.0",
    "gatsby-plugin-offline": "4.5.1",
    "gatsby-plugin-postcss": "4.5.0",
    "gatsby-plugin-purgecss": "6.0.2",
    "gatsby-plugin-react-helmet": "4.5.0",
    "gatsby-plugin-robots-txt": "1.6.2",
    "gatsby-plugin-sharp": "3.5.0",
    "gatsby-plugin-sitemap": "4.1.0",
    "gatsby-plugin-typegen": "2.2.4",
    "gatsby-plugin-typescript": "3.5.0",
    "gatsby-plugin-web-font-loader": "1.0.4",
    "gatsby-source-contentful": "5.5.0",
    "gatsby-source-filesystem": "3.5.0",
    "gatsby-transformer-sharp": "3.5.0",
    "husky": "6.0.0",
    "lint-staged": "10.5.4",
    "pinst": "2.1.6",
    "postcss": "8.3.0",
    "prettier": "2.3.0",
    "react-hook-form": "7.6.4",
    "tailwindcss": "2.1.2",
    "twin.macro": "2.4.2",
    "typescript": "4.2.4"
  },
}

[hk86]

This error was driving me crazy. I thing something was messed up with the dependencies. I had a yarn.lock in my repo. Therefore I deleted all npm packages, deleted the .lock files. Reinstalled everything and commited a new .lock file to my repo. Then it was working for me. I hope it helps.

[jeremylynch]

gatsby clean, remove node_modules, delete package-lock.json, problem solved 🚀