react-dom in new next.js
Unanswered
Sun bear posted this in #help-forum
Sun bearOP
im looking to find a way to get this working:
I'm keep getting a error...
"use client"
import React from 'react'
import ReactDOM from 'react-dom'
export default function Modal() {
return ReactDOM.createPortal( <div>test</div>, document.getElementById("root"));
}I'm keep getting a error...
Error: Target container is not a DOM element.
Source
app\Modal.js (6:9) @ ReactDOM
4 | export default function Modal() {
5 |
> 6 | return ReactDOM.createPortal( <div>test</div>, document.getElementById("root"));
| ^
7 | }22 Replies
@Sun bear im looking to find a way to get this working:
"use client"
import React from 'react'
import ReactDOM from 'react-dom'
export default function Modal() {
return ReactDOM.createPortal( <div>test</div>, document.getElementById("root"));
}
I'm keep getting a error...
Error: Target container is not a DOM element.
Source
app\Modal.js (6:9) @ ReactDOM
4 | export default function Modal() {
5 |
> 6 | return ReactDOM.createPortal( <div>test</div>, document.getElementById("root"));
| ^
7 | }
are you sure you have an element with the id of "root"
Sun bearOP
yes
in layout
is it somehow rendered before the div?
Sun bearOP
But still getting the error if I put
in the page it works but if it refreh it crash
in the page it works but if it refreh it crash
{openModal && (
<Modal />
)}also i know the createPortal works well as i just tried this: https://github.com/vercel/nextgram/blob/main/app/%40modal/(.)photos/%5Bid%5D/modal.tsx recently and pretty good
Sun bearOP
Let me have a look to that
it is a little more chaos as it uses more advanced nextjs features of route interception and parallel routes tho
Sun bearOP
I understand let me have look in to it never used somthing like this its to build a page in a page for a shop page that wil be a layout over the original page with <div id="root"></div>
ahh nice, i hope you have success with learning more then
i would like to know if it goes well though :)
Sun bearOP
I think I succeed 😄 ! it thook me some brains thank you did it totally different
its there only need to fix the new warning
Modal.js:13 Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.
haha love it all
Wow nice error
Sun bearOP
Only issue now is that I have to close it haha open works but close is not
Nice, I have no idea on this create portal thing tho
does useffect help?