preact-compat breaks rc-dropdown and ant-design dropdown

[NickCarton]

I have noticed that this error is thrown when using ant-design dropdowns, which are based on rc-dropdown.

Uncaught TypeError: Cannot read property 'offsetWidth' of null at cl.afterVisibleChange (unpkg.com/[email protected]/dist/antd-with-locales.js:83806) at unpkg.com/[email protected]/dist/antd-with-locales.js:100420 at callback (unpkg.com/[email protected]/dist/antd-with-locales.js:35087) at Object.renderSubtreeIntoContainer [as unstable_renderSubtreeIntoContainer] ([email protected]:173) at _renderComponent (unpkg.com/[email protected]/dist/antd-with-locales.js:35084) at cl.renderComponent (unpkg.com/[email protected]/dist/antd-with-locales.js:35107) at callMethod ([email protected]:483) at cl.renderComponent ([email protected]:494) at cl.componentDidUpdate (unpkg.com/[email protected]/dist/antd-with-locales.js:100418) at renderComponent ([email protected]:308)

You can reproduce this issue here: https://codepen.io/anon/pen/MmggqB

Does anyone know of a way I can proceed in the interim?

[developit]

Ah, interesting - we could never figure out what the callback to render() was supposed to be for, and I wonder if it just needs to fire in the next tick?

[ben-pr-p]

@NickCarton Has this been fixed / have you got it working? I love preact, but I also love ant.design. It would be hype if it didn't have to be almost 1MB uglified!

[NickCarton]

@ben-pr-p Last I attempted to use Preact, it wasn't working, so I switched to react-lite/react but I'm not sure if its working at the moment

[ben-pr-p]

@NickCarton could you share your babel / webpack config of a recent project using react-lite and ant-design? I'm running into this error: Lucifier129/react-lite#70, and it's not clear what the solution should be.

[NickCarton]

@ben-pr-p I use webpack merge so my config is spread amongst quite a few files, but here is all the config you should need:

webpack.config.js

resolve: {
extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.ts', '.tsx', '.js', '.jsx']
alias: {
'react': 'react-lite',
'react-dom': 'react-lite'
}
},

.babelrc:

{
"plugins": [["import", {
"libraryName": "antd",
"style": true // or 'css'
}]]
}

BTW, I'm using "react-lite": "^0.15.34",