Module parse failed: Unexpected token (426:12) I am unable to use Redux Toolkit with React

Question

I am working on a template by Metronic which has the react version ^17.0.2

package.json

{
  "name": "demo1",
  "version": "8.0.38",
  "private": true,
  "homepage": "/metronic8/react/demo1",
  "dependencies": {
    "@formatjs/intl-pluralrules": "^4.0.28",
    "@formatjs/intl-relativetimeformat": "^9.1.7",
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@popperjs/core": "^2.10.1",
    "@reduxjs/toolkit": "^2.1.0",
    "animate.css": "^4.1.1",
    "apexcharts": "^3.27.1",
    "axios": "^0.21.1",
    "axios-mock-adapter": "^1.19.0",
    "bootstrap": "^5.1.3",
    "bootstrap-icons": "^1.7.2",
    "chart.js": "^3.3.2",
    "clsx": "^1.1.1",
    "del": "^6.0.0",
    "formik": "^2.2.9",
    "line-awesome": "^1.3.0",
    "lint-staged": "^11.0.0",
    "mini-css-extract-plugin": "1.6.2",
    "nouislider": "^15.2.0",
    "object-path": "^0.11.5",
    "path": "^0.12.7",
    "prism-react-renderer": "^1.2.1",
    "prism-themes": "^1.7.0",
    "prismjs": "^1.23.0",
    "qs": "6.10.3",
    "react": "^17.0.2",
    "react-apexcharts": "^1.3.9",
    "react-bootstrap": "^2.1.0",
    "react-copy-to-clipboard": "^5.0.3",
    "react-dom": "^17.0.2",
    "react-hot-toast": "^2.4.1",
    "react-inlinesvg": "^2.3.0",
    "react-intl": "^5.20.4",
    "react-is": "^17.0.2",
    "react-query": "^3.34.12",
    "react-redux": "^8.0.0",
    "react-router-dom": "6.2.1",
    "react-scripts": "4.0.3",
    "react-table": "^7.7.0",
    "react-topbar-progress-indicator": "^4.1.0",
    "rtlcss-webpack-plugin": "^4.0.6",
    "sass": "1.32.1",
    "socicon": "^3.0.5",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/bootstrap": "^5.0.16",
    "@types/chart.js": "2.9.32",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/nouislider": "15.0.0",
    "@types/object-path": "0.11.0",
    "@types/prismjs": "1.16.5",
    "@types/qs": "6.9.7",
    "@types/react": "^17.0.0",
    "@types/react-copy-to-clipboard": "5.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-table": "^7.7.9",
    "prettier": "2.5.1",
    "tailwindcss": "^3.4.1",
    "v": "^0.3.0",
    "webpack-cli": "^4.8.0"
  },
  "scripts": {
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm run start",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "prettier --check .",
    "format": "prettier --write .",
    "rtl": "webpack --config webpack-rtl.config.js"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": "eslint --fix"
  },
  "eslintIgnore": [
    "dist/*"
  ]
}

I installed react-redux version ^8.0.0 and @redux/toolkit version ^2.1.0 which is compatible with react ^17.0.2

but I can't use redux, as soon as I wrap my app with the <Provider store={store}>

I have checked redux store and slices and actions implementation and everything looks fine as I am quite familiar with redux already

I get this error

Failed to compile.

./node_modules/@reduxjs/toolkit/dist/redux-toolkit.legacy-esm.js 426:12
Module parse failed: Unexpected token (426:12)
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.
|   }
| 
>   if (cache?.has(value)) return false;
|   const entries = getEntries != null ? getEntries(value) : Object.entries(value);
|   const hasIgnoredPaths = ignoredPaths.length > 0;

error in console

Uncaught Error: Module parse failed: Unexpected token (426:12)
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.
|   }
| 
>   if (cache?.has(value)) return false;
|   const entries = getEntries != null ? getEntries(value) : Object.entries(value);
|   const hasIgnoredPaths = ignoredPaths.length > 0;
    at ./node_modules/@reduxjs/toolkit/dist/redux-toolkit.legacy-esm.js (SSRProvider.tsx:199:1)
    at __webpack_require__ (bootstrap:856:1)
    at fn (bootstrap:150:1)
    at Module.<anonymous> (hooks.ts:8:1)
    at ./src/app/redux/redux-store.ts (redux-store.ts:5:1)
    at __webpack_require__ (bootstrap:856:1)
    at fn (bootstrap:150:1)
    at Module.<anonymous> (UpgradePlan.tsx:344:1)
    at ./src/app/App.tsx (App.tsx:28:1)
    at __webpack_require__ (bootstrap:856:1)
    at fn (bootstrap:150:1)
    at Module.<anonymous> (redux-store.ts:5:1)
    at ./src/app/routing/AppRoutes.tsx (AppRoutes.tsx:40:1)
    at __webpack_require__ (bootstrap:856:1)
    at fn (bootstrap:150:1)
    at Module.<anonymous> (PrivateRoutes.tsx:72:1)
    at ./src/index.tsx (index.tsx:44:1)
    at __webpack_require__ (bootstrap:856:1)
    at fn (bootstrap:150:1)
    at 1 (index.tsx:44:1)
    at __webpack_require__ (bootstrap:856:1)
    at checkDeferredModules (bootstrap:45:1)
    at Array.webpackJsonpCallback [as push] (bootstrap:32:1)
    at main.chunk.js:1:63

let me know anyone and I will provide additional files if needed. Thanks!

Resolved:

@reduxjs/toolkit version was latest with react-redux version 8 so version 1.9.7 worked for me