How to solve babel-loader issue Module parse failed: Unexpected token (273:97)?

Question

After a fresh git clone of my project, yarn install, the command yarn start fails with this error :

./node_modules/react-multistep/dist/index.js 273:97
Module parse failed: Unexpected token (273:97)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|         key: i2,
|         value: i2
>       }, showTitles && /* @__PURE__ */import_react.default.createElement("span", null, s2.title ?? i2 + 1));
|     } else if (stylesState[i2] === "doing") {
|       return /* @__PURE__ */import_react.default.createElement(Li, {

Could you help me to solve this error ?

Here is my package.json :

{
  "name": "frontend",
  "version": "0.1.1",
  "private": true,
  "engines": {
    "node": "16.17.0",
    "npm": "8.5.5",
    "yarn": "1.22.19"
  },
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.8.3",
    "@tinymce/tinymce-react": "^3.12.2",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "crypto-browserify": "^3.12.0",
    "generate-password": "^1.7.0",
    "html-react-parser": "^1.2.4",
    "multiselect-react-dropdown": "^2.0.25",
    "password-validator": "^5.1.0",
    "react": "^17.0.1",
    "react-accessible-accordion": "^3.3.4",
    "react-bootstrap": "^1.5.2",
    "react-burger-menu": "^3.0.4",
    "react-datepicker": "^3.6.0",
    "react-dom": "^17.0.1",
    "react-google-recaptcha": "^2.1.0",
    "react-helmet": "^6.1.0",
    "react-hook-form": "^6.15.4",
    "react-image-lightbox": "^5.1.1",
    "react-lazyload": "^3.2.0",
    "react-modal": "^3.14.2",
    "react-multistep": "^5.3.0",
    "react-pdf": "^5.7.2",
    "react-photo-album": "^1.16.1",
    "react-redux": "^7.2.2",
    "react-responsive": "^9.0.0-beta.4",
    "react-router-dom": "^5.2.0",
    "react-router-hash-link": "^2.4.0",
    "react-scripts": "^4.0.3",
    "react-select": "^5.2.2",
    "react-share": "^4.4.0",
    "react-slick": "^0.28.1",
    "react-table": "^7.6.3",
    "react-tabs": "^3.2.1",
    "react-toastify": "^7.0.3",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.3.0",
    "slick-carousel": "^1.8.1",
    "socket.io-client": "^4.1.3",
    "timeago.js": "^4.0.2",
    "uuid": "^8.3.2",
    "validator": "^13.5.2",
    "xlsx": "^0.18.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:5000"
}

After looking for similar errors, I found this solution but it did not work :

I made a workaround. I compared my old and new package-lock.json of my projects and I saw some @babel lib version changed to v7.20.2 (on Nov 4th, 2022). I overwrote the new package-lock.json with old one and my react app built and ran successfully again. I then changed (downgrade) some of @babel package in my package.json and it is solved the problem. Put this lines into your package.json file:

"@babel/core": "7.19.6",
"@babel/generator": "7.19.6",
"@babel/compat-data": "7.19.4",
"@babel/helper-compilation-targets": "7.19.3",
"@babel/helper-create-class-features-plugin":"7.19.0",
"@babel/helper-module-transforms":"7.19.6",