Uncaught TypeError: history.getCurrentLocation is not a function at syncHistoryWithStore

I have spent a couple of days trying to work around all the various issues with Typings and versions for history, react-router, mobx-react-router trying to find a combination that works… without success.

I believe I have the Typescript issues sorted, but I have the following error message during execution:

Uncaught TypeError: history.getCurrentLocation is not a function
    at syncHistoryWithStore (main-client.js:8204)

Which occurs at the following, with this line and the imports copied and pasted from the example:

const history = syncHistoryWithStore(browserHistory, routingStore);

Everything else works fine if I comment out that line, and just use the same browserHistory in the Router.

I have tried just about every combination of versions. My current package.json is as follows:

{
  "name": "NetCoreReactMobX",
  "version": "0.0.0",
  "license": "MIT",
  "dependencies": {
    "@types/history": "^4.5.0",
    "@types/react": "^15.0.14",
    "@types/react-dom": "^0.14.14",
    "@types/webpack": "^2.2.0",
    "@types/webpack-env": "^1.13.0",
    "aspnet-prerendering": "^2.0.0",
    "aspnet-webpack": "^1.0.27",
    "aspnet-webpack-react": "^1.0.4",
    "awesome-typescript-loader": "^3.0.0",
    "babel-core": "^6.5.2",
    "babel-loader": "^6.2.3",
    "babel-plugin-mobx-deep-action": "^1.5.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "bootstrap": "^3.3.6",
    "css-loader": "^0.26.2",
    "domain-task": "^3.0.0",
    "event-source-polyfill": "^0.0.9",
    "extract-text-webpack-plugin": "^2.0.0-rc",
    "file-loader": "^0.10.1",
    "history": "3.2",
    "jquery": "^2.2.1",
    "json-loader": "^0.5.4",
    "mobx": "^3.1.2",
    "mobx-react": "^4.1.1",
    "mobx-react-router": "^3.1.2",
    "node-noop": "^1.0.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-router": "^3.0.2",
    "style-loader": "^0.13.0",
    "typescript": "^2.2.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.1",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^3.0.0"
  },
  "devDependencies": {
    "babel-plugin-transform-class-properties": "^6.23.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-stage-2": "^6.22.0"
  }
}

And my tsconfig.json is as follows (note I use TypeScript to ES6, then Babel to ES5)

{
  "compilerOptions": {
    "baseUrl": ".",
    "moduleResolution": "node",
    "target": "es6",
    "jsx": "preserve",
    "experimentalDecorators": true,
    "sourceMap": true,
    "allowJs": false,
    "skipDefaultLibCheck": true,
    "lib": ["es6", "dom"],
    "types": [ "webpack-env" ],
    "paths": {
      // Fix "Duplicate identifier" errors caused by multiple dependencies fetching their own copies of type definitions.
      // We tell TypeScript which type definitions module to treat as the canonical one (instead of combining all of them).
      "history": ["./node_modules/@types/history/index"],
      "react": ["./node_modules/@types/react/index"]
    }
  },
  "awesomeTypescriptLoaderOptions": {
    "silent": true,
    "useBabel": true,
    "useCache": false
  },
  "exclude": [
      "bin",
      "node_modules"
  ]
}

Any pointers would be really appreciated…

Also, is there a possibility of a sample project, that can be used as a reference point with compatible versions of mobx-react-router, history and react-router? It was a nightmare to get rid of TypeScript warnings.

[alisd23]

Thanks for looking into this.

I agree the typescript ecosystem is really fragile at the moment, and types are always out of sync, due to the fact libraries like this have to try to keep the types up to date - with their own code, and libraries they depend on.

And thanks @rokoroku for the cool boilerplate. That’ll help people with similar issues out 👍

[rokoroku]

@mcquiggd If you want a clean solution using mobx-react-router without TypeScript errors, try my example: https://github.com/rokoroku/react-mobx-typescript-boilerplate . react-router@4 is expected to be used as DOM objects, but mobx-react-router@4 will still be available through history synching.

Hope it helps.