Preact: [preact/10.0.0-rc.0] does not work with preact-redux

[jzilg]

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 <[email protected]>",
  "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"
  }
}

[marvinhagemeister]

Replace preact-redux with react-redux. We have it in our demo app and I can confirm that it works. In general with X one of our main goals was to increase compatibility with the react ecosystem so that we can save time in having to create and maintain specialized adapters 👍

[jzilg]

I've replaced preact-redux with react-redux. But when building with webpack, I've got the error that react and react-dom were missing. After installing these dependencies my bundle-size exploded and when running the app in the browser I've got an error from preact.module.js:

TypeError: can't define property "__p": Object is not extensible

[marvinhagemeister]

@jzilg If webpack threw an error it means that the react hasn't been aliased to preact/compat properly.

The webpack config should contain a section similar to this:

resolve: {
  alias: {
    'react': 'preact/compact',
    'react-dom': 'preact/compact',
  },
}

[jzilg]

I added your alias config to my webpack config. I still get a lot of errors like this while building with webpack:

ERROR in ./node_modules/react-redux/es/components/Provider.js
Module not found: Error: Can't resolve 'react' in '/Users/jzilg/dev/ackerhelden-fe/node_modules/react-redux/es/components'
 @ ./node_modules/react-redux/es/components/Provider.js 3:0-41 64:11-16 70:2-11
 @ ./node_modules/react-redux/es/index.js
 @ ./src/components/Root.jsx
 @ ./src/index.jsx

ERROR in ./node_modules/react-redux/es/components/Context.js
Module not found: Error: Can't resolve 'react' in '/Users/jzilg/dev/ackerhelden-fe/node_modules/react-redux/es/components'
 @ ./node_modules/react-redux/es/components/Context.js 1:0-26 2:31-36
 @ ./node_modules/react-redux/es/index.js
 @ ./src/components/Root.jsx
 @ ./src/index.jsx

...

My webpack config is this:

const path = require('path')
const Dotenv = require('dotenv-webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const isDevServer = process.argv[1].includes('webpack-dev-server')
const filename = '[name]-[contenthash]'

module.exports = {
    mode: !isDevServer ? 'production' : 'development',
    devtool: !isDevServer ? '' : 'source-map',
    entry: './src/index.jsx',
    output: {
        path: path.resolve('dist'),
        filename: `${filename}.js`,
        publicPath: isDevServer ? '/' : './',
    },
    resolve: {
        extensions: [
            '.js',
            '.jsx',
        ],
        alias: {
            react: 'preact/compact',
            'react-dom': 'preact/compact',
        },
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                exclude: /node_modules/,
                loader: 'html-loader',
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader',
                    'eslint-loader',
                ],
            },
        ],
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'initial',
                },
            },
        },
    },
    plugins: [
        new Dotenv(),
        !isDevServer ? new CleanWebpackPlugin() : null,
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
    ].filter(Boolean),
    devServer: {
        headers: {
            'Cache-Control': 'max-age: 31557600',
        },
        overlay: true,
        stats: {
            children: false,
            modules: false,
        },
    },
    stats: {
        entrypoints: false,
        modules: false,
    },
}

[marvinhagemeister]

That's weird. The configuration looks correct to me. Do you have a repo you can share (or privately via email)?

[jzilg]

https://github.com/jzilg/ackerhelden-fe

Thanks :)

[JoviDeCroock]

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

[jzilg]

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!