question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Preact 10.0.1 types not compatible with React-Redux 7.1.1?

See original GitHub issue

After setting noImplicitAny: true in my project, I realized I was missing the type declarations for react-redux. After running npm i -D @types/react-redux, I now get the following error on all of my components that use react-redux’s connect

Argument of type 'typeof MY_COMPONENT' is not assignable to parameter of type 'ComponentType<never>'.
  Type 'typeof MY_COMPONENT' is not assignable to type 'ComponentClass<never, any>'.
    Types of property 'contextType' are incompatible.
      Type 'preact.Context<any>' is not assignable to type 'React.Context<any>'.
        Types of property 'Provider' are incompatible.
          Property '$$typeof' is missing in type 'Provider<any>' but required in type 'ProviderExoticComponent<ProviderProps<any>>'.ts(2345)
index.d.ts(318, 18): '$$typeof' is declared here. (Points to @types/react because of the dependency listed for @types/react-redux)
        "preact": "^10.0.1",
        "react-redux": "^7.1.1",
        "redux": "^4.0.4",
        "@types/react-redux": "^7.1.5",

Shortened example:

import { Component, h } from "preact";
import { connect } from "react-redux";

class MY_COMPONENT extends Component<IProps, IState> {
....
}

export default connect(mapStateToProps, mapDispatchToProps)(MY_COMPONENT); //error on MY_COMPONENT

I’ve googled this as much as I can and have not found any answers. I don’t see $$typeof anywhere in Preact’s index.d.ts file.

My tsconfig.json is:

{
    "compilerOptions": {
        "outDir": "./dist",
        "sourceMap": true,
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true,
        "experimentalDecorators": true,
        "module": "commonjs",
        "target": "es6",
        "lib": [
            "es2015",
            "es2017",
            "dom"
        ],
        "allowJs": true,
        "removeComments": true,
        "allowSyntheticDefaultImports": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "jsx": "react",
        "baseUrl": "./",
        "jsxFactory": "h"
    },
    "exclude": ["node_modules", "dist", "deprecated"]
}

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:3
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

9reactions
AlexReffcommented, Oct 23, 2019

If you’re using Preact X (preact@10+), please use the official react-redux library.

2reactions
birjjcommented, Mar 30, 2020

Can confirm that @ForsakenHarmony’s suggestion works. Your tsconfig should look a little something like this:

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "react": ["node_modules/preact/compat"],
      "react-dom": ["node_modules/preact/compat"]
    }
  }
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

7.1.1 - react-redux - npm
Start using react-redux in your project by running `npm i react-redux`. ... TypeScript icon, indicating that this package has built-in type ...
Read more >
Upgrading from Preact 8.x
This document is intended to guide you through upgrading an existing Preact 8.x application to Preact X and is divided in 3 main...
Read more >
https://raw.githubusercontent.com/elastic/kibana/m...
DO NOT EDIT THIS FILE DIRECTLY. ... prop-types "^15.7.2" re-reselect "^3.4.0" react-redux "^7.1.0" redux "^4.0.4" reselect "^4.0.0" resize-observer-polyfill ...
Read more >
React-redux: Official React Bindings for Redux - Morioh
Using Create React App. React Redux is by using the official Redux+JS ... We recommend that you use npm@3.x which is better at...
Read more >
Error when trying to install react-redux dependency
Could not resolve dependency: npm ERR! peer react@"^16.8.3" from react-redux@7.2.1 npm ERR!
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found