Uncaught TypeError: history.getCurrentLocation is not a function at syncHistoryWithStore about mobx-react-router HOT 7 CLOSED

Ok,

It turns out there is only one single call to history.getCurrentLocation() - sync.js, line 13.

When I change that to history.location, I get the following error:

Uncaught Error: You have provided a history object created with history v4.x or v2.x and earlier. This version of React Router is only compatible with v3 history objects. Please change to history v3.x.

At that point, history is not explicitly included in package,json, but the following version has been added due to the dependency from react-router:

"name": "history",
"version": "3.3.0",

I try adding it explicitly - same error. Later 4.x versions just throw Typing errors.

Now, this is strange, but out of desperation, trying different versions, I installed [email protected], which introduced history.getCurrentLocation().

[email protected]
├─ [email protected]
└─ [email protected]

And now... **it works ** 👍 . No errors, I can navigate using the goBack and goForward commands on the router store using the console.

Note: I do not install typings. If I try to add types/history@3, which installs:

├─ @types/[email protected]
└─ @types/[email protected]

Then TypeScript throws the following:

TS2322: Type 'SynchronizedHistory' is not assignable to type 'History'.
  Types of property 'createLocation' are incompatible.
    Type '{ (path: string, action?: Action, key?: string): Location; (location: LocationDescriptor): Locati...' is not assignable to type '(path?: LocationDescriptor, action?: Action, key?: string) => Location'.
      Type 'MobxReactRouter.Location' is not assignable to type 'Location'.
        Types of property 'action' are incompatible.
          Type 'string' is not assignable to type 'Action'.

There are no usable typings for history@3.

It all feels very fragile, but it does what I need for now. Do you guys have any ideas about the best way forward with these dependencies (and preferably TypeScript support)?

Personally, to me it looks like history@3 is a mess, and is officially no longer supported.

As it is already up to [email protected] and @types/[email protected], and react-router@4 is progressing... hopefully we can finally see some stability with the router story.

I really appreciate your work on this. When react-router@4 is stable, I will be happy to contribute to development of this project. In the meantime, I will stick with [email protected] and not change history.getCurrentLocation().

The working package.json

{
  "name": "NetCoreReactMobX",
  "version": "0.0.0",
  "license": "MIT",
  "dependencies": {
    "@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.0.0-0",
    "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"
  }
}

from mobx-react-router.

@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.

from mobx-react-router.

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 👍

from mobx-react-router.

Hey, firstly I would recommend not explicitly depending on history in your package.json, as react-router depends on this anyway. I've checked the source code of history and it looks like they've removed getCurrentLocation without incrementing a major version (not a good idea). I'll have to change history.getCurrentLocation() to just history.location everywhere.

Feel free to submit a PR if you want, might not be able to get to this till next week.

Thanks for flagging this up though!

from mobx-react-router.

@alisd23

Yep, I originally did not have history in there - I let that be handled as a dep. But there is such a mess of Typings etc out there, that I tried that in one of the many combinations... found it on a Stack Overflow solution for a very similar problem.

I'll have to see if I can find time to do a PR - I'm way behind schedule now because of this; don't want to rip on the history guys, but is there a more stable and better managed alternative? It's caused no end of problems... especially for TypeScript users.

Thanks a lot for picking this up so quickly...

from mobx-react-router.

@alisd23 getCurrentLocation() method has been removed from history@4, in major update.

@mcquiggd You cannot use types/history@4 with mobx-react-router@3 since it uses react-router@3 that uses history@3. The module history has big breakages between version 3 and 4. (see history/CHANGES.md)

You can try one of below:

• remove types/history@4 from dependencies, since mobx-react-router already contains type definitions for history that compatible with history@2 and history@3
• install types/history@2 or types/history@3
• install types/react-router@3, since it has types/history@3 as its dependency

from mobx-react-router.

@rokoroku

Thanks for the pointers.

I removed types/history. I also removed any specific version of history, to allow it to be handled by dependency resolution.

(I rimraf'd the node_modules, cleared the yarn cache, reran yarn, with the package.json listed at the bottom.)

Now, just using browserHistory (i.e. not using mobx-react-router at all) I get this:

Uncaught Error: You have provided a history object created with history v4.x or v2.x and earlier. This version of React Router is only compatible with v3 history objects. Please change to history v3.x.

The package versions are as follows (taken directly from the node_modules folder to verify what is installed)

"name": "history",
"version": "3.3.0",

"name": "react-router",
"version": "3.0.2",

Just going to bang my head against a wall for a while, to take a break. :-)

{
  "name": "NetCoreReactMobX",
  "version": "0.0.0",
  "license": "MIT",
  "dependencies": {
    "@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",
    "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"
  }
}

from mobx-react-router.