"build.command" failed /opt/build/repo/.cache/loader.js: Missing class properties transform

Support
,
1

I have a build error.

I can build gatsby in my local computer but I failed when I deploy it on Netlify.

What I did before this post.

  1. Installed npm install @babel/plugin-proposal-class-properties
    I found similar issue in different topic (Build ERROR opt/build/repo/.cache/loader.js: Missing class properties transform) and I’ve already added npm install @babel/plugin-proposal-class-properties but I cannot fix this build error.

  2. Change build command from gatsby build to gatsby clean && gatsby build

  3. Uninstall @netlify/plugin-gatsby then installed @netlify/plugin-gatsby@3.2.4 from plugin
    Netlify App
    I found
    Error: Incompatible plugins
    @netlify/plugin-gatsby@3.2.4: version 1.0.3 is the most recent version compatible with gatsby@<4.0.0

  4. Uninstall @netlify/plugin-gatsby@3.2.4 from plugin and installed same plugin
    Netlify App
    Incompatible plugins @netlify/plugin-gatsby@3.2.4 messages returned to first situation.

This is my package.json

{
  "name": "gatsby-starter-blog",
  "private": true,
  "description": "A starter for a blog powered by Gatsby and Markdown",
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@contentful/rich-text-types": "^15.1.0",
    "@emotion/core": "^11.0.0",
    "@emotion/react": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.15",
    "@types/prop-types": "^15.7.4",
    "dotenv": "^10.0.0",
    "gatsby": "^3.13.1",
    "gatsby-image": "^3.11.0",
    "gatsby-plugin-anchor-links": "^1.2.1",
    "gatsby-plugin-canonical-urls": "^3.13.0",
    "gatsby-plugin-emotion": "^6.10.0",
    "gatsby-plugin-feed": "^3.10.0",
    "gatsby-plugin-gatsby-cloud": "^2.10.1",
    "gatsby-plugin-google-tagmanager": "^4.7.0",
    "gatsby-plugin-image": "^1.10.1",
    "gatsby-plugin-manifest": "^3.10.0",
    "gatsby-plugin-meta-redirect": "^1.1.1",
    "gatsby-plugin-netlify": "^3.14.0",
    "gatsby-plugin-offline": "^4.10.0",
    "gatsby-plugin-react-helmet": "^4.10.0",
    "gatsby-plugin-robots-txt": "^1.6.10",
    "gatsby-plugin-sharp": "^3.11.0",
    "gatsby-plugin-sitemap": "^4.9.0",
    "gatsby-plugin-typegen": "^2.2.4",
    "gatsby-remark-autolink-headers": "^4.10.0",
    "gatsby-remark-code-titles": "^1.1.0",
    "gatsby-remark-copy-linked-files": "^4.7.0",
    "gatsby-remark-images": "^5.7.0",
    "gatsby-remark-prismjs": "^5.11.0",
    "gatsby-remark-prismjs-title": "^1.0.0",
    "gatsby-remark-responsive-iframe": "^4.7.0",
    "gatsby-remark-smartypants": "^4.7.0",
    "gatsby-source-contentful": "^5.11.1",
    "gatsby-source-filesystem": "^3.10.0",
    "gatsby-transformer-remark": "^4.11.0",
    "gatsby-transformer-sharp": "^3.11.0",
    "prismjs": "^1.28.0",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-helmet": "^6.1.0",
    "react-scroll": "^1.8.4",
    "react-syntax-highlighter": "^15.4.4",
    "twin.macro": "^2.6.2",
    "typeface-merriweather": "0.0.72",
    "typeface-montserrat": "0.0.75"
  },
  "devDependencies": {
    "@types/react-helmet": "^6.1.2",
    "@types/react-scroll": "^1.8.3",
    "@types/react-syntax-highlighter": "^13.5.2",
    "@typescript-eslint/eslint-plugin": "^4.29.0",
    "@typescript-eslint/parser": "^4.29.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-typescript": "^2.4.0",
    "eslint-import-resolver-webpack": "^0.13.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-webpack-plugin": "^3.0.1",
    "gatsby-plugin-eslint": "^3.0.0",
    "husky": "^4.3.8",
    "lint-staged": "^11.1.2",
    "prettier": "2.3.2",
    "tailwindcss-named-groups": "^0.0.5",
    "tailwindcss-nested-groups": "^1.2.4",
    "ts-node": "^10.1.0",
    "typescript": "^4.3.5"
  },
  "homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
  "keywords": [
    "gatsby"
  ],
  "license": "0BSD",
  "main": "n/a",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/gatsbyjs/gatsby-starter-blog.git"
  },
  "scripts": {
    "format:prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"",
    "format:eslint": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
    "format": "yarn format:prettier && yarn format:eslint"
  },
  "babelMacros": {
    "twin": {
      "config": "./tailwind.config.js",
      "preset": "emotion",
      "hasSuggestions": true,
      "debug": false
    }
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{jsx, ts, tsx}": [
      "yarn format"
    ]
  }
}

I am stuck.
I need your help. Thank you.

2

I could solve this problem. It was due to dependency problem of babel.
Once I remove yarn lock then reinstall it.

rm -rf yarn.lock node_modules && yarn

Thanks.