search

preactjs / preact-compat

ATTENTION: The React compatibility layer for Preact has moved to the main preact repo.
http://npm.im/preact-compat
MIT License
950 stars 148 forks source link

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

Open NickCarton opened 7 years ago

NickCarton commented 7 years ago

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/antd@2.9.1/dist/antd-with-locales.js:83806) at unpkg.com/antd@2.9.1/dist/antd-with-locales.js:100420 at callback (unpkg.com/antd@2.9.1/dist/antd-with-locales.js:35087) at Object.renderSubtreeIntoContainer [as unstable_renderSubtreeIntoContainer] (preact-compat@3.14.3:173) at _renderComponent (unpkg.com/antd@2.9.1/dist/antd-with-locales.js:35084) at cl.renderComponent (unpkg.com/antd@2.9.1/dist/antd-with-locales.js:35107) at callMethod (preact-compat@3.14.3:483) at cl.renderComponent (preact-compat@3.14.3:494) at cl.componentDidUpdate (unpkg.com/antd@2.9.1/dist/antd-with-locales.js:100418) at renderComponent (preact@8.1.0: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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

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

NickCarton commented 7 years ago

@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",