1

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",
    ...
  },
3
  • 1
    Could it be that you use the new React 16 but an incompatible version of react-redux? You should indicate the respective library versions.
    – JulienD
    Oct 11, 2017 at 10:49
  • Please provide version numbers for @types/react-redux, @types/react and @types/react-dom you use. As @JulienD mentioned, your typings for react-redux are not compatible with typings for react.
    – ptkoz
    Oct 11, 2017 at 11:50
  • Sorry, I have forget to do it. I'll add it
    – Velidan
    Oct 11, 2017 at 11:52

1 Answer 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.