React-router: TypeError: _Router2.default.computeRootMatch is not a function

[YasiruDev]

When i import react-router-config in to my project it show this error

package.json

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "main": "index.js",
  "dependencies": {
    "axios": "^0.17.0",
    "babel-cli": "6.26.0",
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-es2017": "6.24.1",
    "babel-preset-react": "6.24.1",
    "babel-preset-react-app": "^5.0.3",
    "babel-preset-stage-0": "6.24.1",
    "babel-preset-stage-1": "^6.1.18",
    "body-parser": "^1.18.3",
    "bootstrap": "^4.0.0",
    "compression": "1.7.0",
    "concurrently": "3.5.0",
    "css-loader": "^1.0.0",
    "express": "4.15.4",
    "express-http-proxy": "1.0.6",
    "extract-text-webpack-plugin": "^3.0.2",
    "global": "^4.3.2",
    "image-webpack-loader": "^4.3.1",
    "imports-loader": "^0.8.0",
    "lodash": "^3.10.1",
    "millisec": "^0.2.0",
    "moment": "^2.22.1",
    "moment-timezone": "^0.5.17",
    "nodemon": "1.12.0",
    "npm-run-all": "4.1.1",
    "react": "^16.4.2",
    "react-countdown-now": "^1.3.0",
    "react-dom": "^16.4.2",
    "react-facebook-login": "^4.0.1",
    "react-google-login": "^3.0.4",
    "react-helmet": "5.2.0",
    "react-hotjar": "^1.0.11",
    "react-meta-tags": "^0.4.1",
    "react-moment": "^0.7.0",
    "react-no-unmount-hide": "^0.1.4",
    "react-redux": "^5.0.7",
    "react-router": "^4.3.1",
    "react-router-config": "^4.4.0-beta.1",
    "react-router-dom": "4.2.2",
    "react-router-sitemap": "^1.1.3",
    "react-router-sitemap-builder": "^1.1.1",
    "react-scripts": "1.1.4",
    "react-slick": "^0.22.0",
    "react-spinners": "^0.2.6",
    "react-transmit": "^3.2.0",
    "reactstrap": "^5.0.0-beta.1",
    "redux": "^4.0.0",
    "redux-form": "^7.4.2",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.3.0",
    "serialize-javascript": "1.4.0",
    "slick-carousel": "^1.8.1",
    "speakingurl": "^14.0.1",
    "style-loader": "^0.23.0",
    "sweetalert-react": "^0.4.11",
    "webpack": "3.5.6",
    "webpack-dev-server": "2.8.2",
    "webpack-merge": "4.1.0",
    "webpack-node-externals": "1.6.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "serve -s build",
    "deploy:dev": "serve -p 8002 -s build",
    "deploy:qa": "serve -p 7002 -s build",
    "deploy:staging": "serve -p 9002 -s build",
    "deploy:prod": "serve -p 5000 -s build",
    "dev": "npm-run-all --parallel dev:*",
    "dev:server": "nodemon --watch build --exec \"node build/bundle.js\"",
    "dev:build-server": "NODE_ENV=development webpack --config webpack.server.js --watch",
    "dev:build-client": "webpack --config webpack.client.js --watch"
  },
  "devDependencies": {
    "file-loader": "^2.0.0"
  }
}

[timdorr]

This is a bug tracker, not a support system. For usage questions, please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out. Thanks!

[timdorr]

Also, you have mismatched versions of react-router, react-router-dom, and react-router-config:

    "react-router": "^4.3.1",
    "react-router-config": "^4.4.0-beta.1",
    "react-router-dom": "4.2.2",

[mkarajohn]

For what it's worth, I was having the same issue, a few minutes ago, while I was trying to test something out in a clean CodeSandbox react project.

I've installed react-router and react-router-dom on version 4.3.1 both, and all react-router-config versions above 1.0.0-beta.X throw this error. Getting back to 1.0.0-beta.X fixes the issue.

I understand that this is a major version bump, so breaking changes are expected, so maybe the react-router-config docs need an update, since now they are reflective of the 1.0.0-beta.X versions?

[tswaters]

This will crop up path is not provided on the root node of the config -- here's relevant code:

https://github.com/ReactTraining/react-router/blob/v4.4.0-beta.1/packages/react-router-config/modules/matchRoutes.js#L9

If path is not provided, it attempts to use a function from react-router, computeRootMatch, that is not available in 4.3.0. It's a bit unfortunate that latest of these libraries currently brings up incompatible versions --

react-router#latest => 4.3.1
react-router-config#latest => 4.4.0-beta.1

Here's the relevant warning from npm:

npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.

Best to keep all the related versions in sync -- i.e., use 4.4.0-beta.1 for all relevant modules. It would be great if react-router-config had a stable version for 4.3.x - but - it is what it is, I suppose.