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.0-rc.0] does not work with preact-redux

See original GitHub issue

I have a preact component witch is connected with preact-redux. After upgrading from preact/8.4.2 to preact/10.0.0-rc.0 this component is not rendered or called at all. Even a console.log in the componentDidMount method is not executed. There are also no errors or warnings while compiling or on runtime in the browser. It seems that the component gets somehow lost in the connect function.

  • OS: macOS 10.14.5
  • npm: 6.9.0
  • node: 10.16.0
  • preact: 10.0.0-rc.0
  • preact-redux: 2.1.0

The Component

import { h, Component } from 'preact'
import { connect } from 'preact-redux'
import { init } from '../redux/actions/app/init.actions'

class App extends Component {
    componentDidMount() {
        console.log('App')
        const { dispatch } = this.props
        dispatch(init())
    }

    render() {
        const { isInitialized } = this.props
        const text = isInitialized ? 'App is initialzied' : 'App is loading'
        return <h1>{text}</h1>
    }
}

const mapStateToProps = state => ({
    isInitialized: state.app.isInitialized,
})

export default connect(mapStateToProps)(App)

package.json

{
  "name": "",
  "version": "0.1.0",
  "description": "",
  "private": true,
  "main": "src/index.jsx",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack -p",
    "analyze": "webpack --config ./webpack.analyze.config.js"
  },
  "author": "Johannes Zilg <johannes.zilg@gmail.com>",
  "license": "GPL-3.0",
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "dotenv": "^8.0.0",
    "dotenv-webpack": "^1.7.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.13.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.34.0",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.1",
    "webpack-merge": "^4.2.1"
  },
  "dependencies": {
    "moment": "^2.24.0",
    "preact": "^8.4.2",
    "preact-context": "^1.1.3",
    "preact-redux": "^2.1.0",
    "redux": "^4.0.1"
  }
}

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
jzilgcommented, Jul 15, 2019

You were right. Now I have no erros while compiling with webpack.

One interssting note: After correcting the typo a had an error in the browser:

Could not resolve react

Then i removed react-dom from my package.json and removed it from node_moules. And now its working. Thats somehow strange.

But anyway: its working now: thank you very much!

1reaction
JoviDeCroockcommented, Jul 15, 2019

You have a typo, you should resolve to preact/compat instead of compact

Read more comments on GitHub >

github_iconTop Results From Across the Web

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 >
preact-form - CodeSandbox
preact -form. A generic form, accepts templates, has some built in validators. Can accept sync validation. Uses redux form.TODO: support async source for ......
Read more >
Error when trying to install react-redux dependency
It looks like you are using the latest npm version (v7). As mention in the logs, try with npm install --legacy-peer-deps ...
Read more >
preact: Versions - Openbase
Fix props not spreadable to <input> elements (#3764, thanks @mwszekely) ... The most well known of those is probably react-redux . ... 10.0.0-rc.3....
Read more >
preact-redux - npm
This is a contrived example. Please refer to Redux's Usage with React documentation for details on how to work with Redux from Preact....
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