Type error thrown on element

I am working with react-redux and typescript so I have .tsx files. My simple code looks pretty simple and obvious but the typescript compiler throws me an type error of the Provider element so I don't understand what I did wrong.

here is my simple code

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Route, Router } from 'react-router';

...

ReactDOM.render(
    <Provider store={store}>
      <Router history={history}>
        <Route path='/' component={MyTopComponent} breadcrumbIgnore>
          <Route
            path='home'
            component={MyComponent}
          >
          </Route>
        </Route>
      </Router>
    </Provider>,
  document.getElementById('app'),
);

And here is the error:

JSX element type 'Provider' is not a constructor function for JSX elements.
  Types of property 'render' are incompatible.
    Type '() => string | number | false | Element | Element[]' is not assignable to type '{ (): string | number | false | Element | Element[]; (): string | number | false | Element | Elem...'.
      Type 'string | number | false | Element | Element[]' is not assignable to type 'false | Element'.
        Type 'string' is not assignable to type 'false | Element'.

In the Sublime editor with TS support I have seen description of this error:

Property "render" are missing in type "Provider"

Thanks for any help!

P.S. here is the packages versions

   "devDependencies": {
    "@types/react": "16.0.7",
    "@types/react-dom": "15.5.5",
    "@types/react-i18next": "4.6.0",
    "@types/react-redux": "5.0.9",
    "@types/react-test-renderer": "15.5.4",
    "awesome-typescript-loader": "3.2.3",
    ...
    "tslint": "5.7.0",
    "typescript": "2.5.3",
    ...
  },
  "dependencies": {
    ... ,
    "i18next": "9.0.0",
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "react-dom-factories": "1.0.2",
    "react-i18next": "6.0.0",
    "react-redux": "5.0.6",
    "react-router": "3.0.2",

    "redux": "3.7.2",
    ...
  },

1 answer

  • answered 2017-10-11 10:04 Velidan

    I have found the solution to fix this issue.

    As JulienD and pamelus have mentioned to check dependencies version I looked for the redux/react/dom release versions

    So when I updated these packages the typescript compiler started to work correctly

    "@types/react": 16.0.7 -"16.0.10",
    "@types/react-dom": 15.5.5 -> "16.0.1",
    "@types/react-redux": 5.0.9 -> "5.0.10",
    

    Hope it helps someone. Best regards.