0

I am trying to install the react-router-dom package to my react application and when I try to wrap BrowserRoute around my App component. I get this error

Uncaught ReferenceError: regeneratorRuntime is not defined
    at main.js:19661:699
    at main.js:19661:1447
    at ./node_modules/@remix-run/router/dist/router.js (main.js:19661:1892)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at ./node_modules/react-router/dist/index.js (index.tsx:1142:2)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at ./node_modules/react-router-dom/dist/index.js (main.js:33836:70)
    at __webpack_require__ (bootstrap:24:1)

My package.json

  "dependencies": {
    "@azure/storage-blob": "^12.5.0",
    "@babel/runtime": "^7.19.4",
    "@fortawesome/fontawesome-pro": "^5.15.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/pro-duotone-svg-icons": "^5.15.3",
    "@fortawesome/pro-light-svg-icons": "^5.15.3",
    "@fortawesome/pro-regular-svg-icons": "^5.15.3",
    "@fortawesome/pro-solid-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "buflib": "0.0.34",
    "bulma": "^0.9.2",
    "core-js": "^3.25.5",
    "minireset.css": "0.0.7",
    "open-sans-fonts": "^1.6.2",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.4.2",
    "regenerator-runtime": "^0.13.9"
  },
  "devDependencies": {
    "@babel/core": "^7.13.14",
    "@babel/plugin-transform-runtime": "^7.19.1",
    "@babel/preset-env": "^7.19.4",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.2.0",
    "eslint": "^7.23.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "file-loader": "^6.2.0",
    "node-sass": "^5.0.0",
    "resolve-url-loader": "^3.1.2",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.31.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  }

My .babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

I tried all approaches listed here: Babel 7 - ReferenceError: regeneratorRuntime is not defined and the error remained.

Any help would be most appreciated, thanks!

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
kiooikml
  • 307
  • 1
  • 7
  • check out this :- https://stackoverflow.com/a/60499348/16966916 – Rahul Mohanty Oct 12 '22 at 12:29
  • 1. You need to install regenerator-runtime npm install --save regenerator-runtime 2. Update your webpack file entry: ["regenerator-runtime/runtime.js", ""] For example: module.exports = { entry: ['regenerator-runtime/runtime.js', './test.js'] }; 3. Import import 'regenerator-runtime/runtime' at the top of the file, you got an error. – Rahul Mohanty Oct 12 '22 at 12:30

0 Answers0