developit
commented
6 years ago Likely doable via preact-portal
Closed evan-scott-zocdoc closed 6 years ago
developit
commented
6 years ago Likely doable via preact-portal
jeberly
commented
6 years ago This is causing problems when trying to leverage https://ant.design/
jachicao
commented
6 years ago Also material-ui
developit
commented
6 years ago This is #1 on the todo list.
ducwings
commented
6 years ago also in 'reactstrap` (beta)
61:13-25 "export 'createPortal' was not found in 'react-dom'
@ ./node_modules/react-portal/es/Portal.js
@ ./node_modules/react-portal/es/PortalCompat.js
@ ./node_modules/react-portal/es/index.js
@ ./node_modules/reactstrap/dist/reactstrap.es.js```
sammoore
commented
6 years ago I took a swing at implementing this (very naively), but no success; render fails with <undefined></undefined> output. I'm going to take a deeper look and also set up a smaller project to reproduce.
If there's anyway to get a stack trace on an undefined tag, that would be helpful, but I assume the only reason that's not happening is because the root of the issue comes from the custom code in preact-compat that I've added.
marvinhagemeister
commented
6 years ago When you enable the debug tools you have callback where you can make custom assertions on each vnode object. It has a check if the tag is undefined already built-in. That should help :)
eveningkid
commented
6 years ago So actually, quick question: is it only related to preact-compat or preact itself? I'm still thinking about switching to preact as the error shows up because of antd package in my case.
Would the same error show up without using the compatibility layer but preact directly?
developit
commented
6 years ago @samtheprogram hiya! Mind joining our chat? https://preact-slack.now.sh
sammoore
commented
6 years ago Hey @developit, I've joined under the same username as my GitHub account!
ev-dev
commented
6 years ago Also breaks compatibility with searchkit (elasticsearch component library) with the same error of export createPortal not found in react-dom. I assume all use of the Portal API is not currently available
Madhu0
commented
6 years ago I was trying to achieve something similar to createPortal using render method. But i am unable to pass context to the child components. Here is what i am doing..
class BaseModal extends Component {
constructor(props) {
super(props);
this.id = (new Date()).getTime() + '';
this.element = '';
}
componentDidMount() {
console.log('In mount');
const { children } = this.props;
this.element = render(<div id={this.id}>{children}</div>, document.getElementById('modal-div'));
}
componentDidUpdate() {
const el = document.getElementById(this.id);
el.parentElement.removeChild(el);
const { children } = this.props;
this.element = render(<div id={this.id}>{children}</div>, document.getElementById('modal-div'));
}
componentWillUnmount() {
console.log('In unmount');
const el = document.getElementById(this.id);
el.parentElement.removeChild(el);
}
render() {
console.log(this.context);
// const childrenWithPrpos = children.map((child, index) => cloneElement(child, this.props));
return '';
}
}class Test extends Component {
render(){
return(<BaseModal>{this.props.children}</BaseModal>)
}
}Here context is not passed to children, as it is not rendered as a child.
Kanaye
commented
6 years ago Madhu0
commented
6 years ago Hey @Kanaye, this works. Thank you for your time.
If we can provide props and context to the component which will be mounted somewhere outside our actual app, aren't we achieving everything React.createPortal does? am i missing something?
I am trying to understand the portal implementation in react, i've gone through createPortal source code and i wasn't able to understand completely. But the basic idea is, it should work just like any other component inside our app, right?
We can even use render(App, target, previousApp) to find the diff in DOM and update, instead of deleting it and rendering it again.
developit
commented
6 years ago @Madhu0 around 90% of it, yes. They also redirect event bubbling through portal boundaries, which Preact is unlikely to ever do.
ar1a
commented
6 years ago This is causing an issue with react-md,
./node_modules/react-md/es/Helpers/Portal.js
11:23-35 'react-dom' does not contain an export named 'createPortal'.
armand1m
commented
6 years ago is there any thing we can do while this is not implemented?
mozillo
commented
6 years ago Same issue with react-select
'react-dom' does not contain an export named 'createPortal'If anyone wants to PR the implementation, something like this would work:
import { h } from 'preact';
import Portal from 'preact-portal';
export function createPortal(child, container) {
return <Portal into={container}>{child}</Portal>
}nevermind, there was a much smaller and simpler way and I've implemented it in #486. If anyone has time to test it out that would be lovely.
29rayb
commented
6 years ago I'm getting the same error about 'createPortal' above.
I know it's not yet released, but I've copied the updates for 'createPortal' from https://github.com/developit/preact-compat/blob/master/src/index.js but am still getting this error:
129:12-33 "export 'createPortal' (imported as 'ReactDOM') was not found in 'react-dom'What am I missing?
https://reactjs.org/docs/portals.html