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
949 stars 148 forks source link

react-bootstrap Modal component fails to render #308

Open MichaelRando opened 7 years ago

MichaelRando commented 7 years ago

Some kind of this.refs issue when I tried to add basic react-bootstrap to a preact-compat project. Possibly a known issue, however I created a test project that exemplifies the problem so you can try it out and tell me if there's a workaround or fix pending.

Project is: https://github.com/MichaelRando/preact-rollup-bootstrap

developit commented 7 years ago

Awesome, thanks so much for putting a repro together! What about with react-bootstrap 1.0? It looks like this should be fixed in that release (I don't see any string refs on master, which is the likely source of the issue).

MichaelRando commented 7 years ago

I don't know what is react-bootstrap 1.0. v0.30.7 is the latest, greatest on offer at https://github.com/react-bootstrap/react-bootstrap/releases

developit commented 7 years ago

Ah - looks like they haven't published 1.0 yet - I was reading the roadmap from their homepage. Looks like an issue with ref timing.

MichaelRando commented 7 years ago

Same thing happened when I tried it with inferno-compat. https://github.com/infernojs/inferno/issues/891

mistercrunch commented 7 years ago

I'm caught in the React / ASF crossfire with Apache Superset (https://github.com/apache/incubator-superset) and trying to migrate to Preact. Would love to write a detailed blog post with a success story migrating over, but this one issue here is getting in the way where all my modals aren't working. Most other things seem to be working pretty good after a first round of testing.

I'd like to help with this issue, but not sure where to start. I was thinking I could just write my own modal bypassing react-bootstrap altogether for that one component.

For the record I tried switching animation to false here without success https://react-bootstrap.github.io/components.html#modals-props .

jcguarinpenaranda commented 7 years ago

Has anyone been able to resolve this? I am moving to preact because React itself weighs ~650kb, and in conjunction with other libraries this contributes to a performance error on slow networks.

dorianpula commented 7 years ago

@jcguarinpenaranda I'm not sure if this is an option for you. But I had some luck getting reactstrap (Bootstrap 4) modals working by replacing the react-transition-group imports for the animations to use preact-transition-group.

You can see an example here: vendored modal.

jcguarinpenaranda commented 7 years ago

Thank you, I will test this solution ASAP

El 24/09/2017 2:14 p. m., "Dorian Pula" notifications@github.com escribió:

@jcguarinpenaranda https://github.com/jcguarinpenaranda I'm not sure if this is an option for you. But I had some luck getting reactstrap (Bootstrap 4) modals https://reactstrap.github.io/components/modals/ working by replacing the react-transition-group imports for the animations to use preact-transition-group https://github.com/mauron85/preact-transition-group.

You can see an example here: vendored modal https://bitbucket.org/dorianpula/rookeries/src/c8decceb8b20573d7f0463ac16f0b32a74aa1436/src/vendor/Modal.js?at=master&fileviewer=file-view-default#Modal.js-9 .

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/developit/preact-compat/issues/308#issuecomment-331732422, or mute the thread https://github.com/notifications/unsubscribe-auth/AG3gNZygwZHgBO4eDRfpmTpTm3NU_zW8ks5slqoGgaJpZM4MMJQR .