Target container is not a DOM element. #290
-
|
I am getting "Target container is not a DOM element." when trying to render React Portals in 2 child nodes in my // application layout (not using a view because this is nav-bar and footer site-wide and I want to DRY) Scenario 1 (duplicated div tags) Scenario 2 (no duplicate div tags) I have I tried moving this React entrypoint out of entrypoints and into a subfolder, it did not help. Is vite_ruby acceleration logic preventing me from dictating load order? |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 2 replies
-
|
Hi there!
Not sure what you are referring to 😃 By default all scripts in Vite are
If an HTML element is defined (and closed) before a script element, it will always be available when the script is executed (in fact that's exactly the technique I'm using to hydrate islands in îles). The issue you are experiencing suggests malformed HTML, or that the script is inside the root element. If you share a repo with a reproduction I can take a look. Regardless, there's nothing in Vite Ruby that would affect order of execution. |
Beta Was this translation helpful? Give feedback.
-
|
That's helpful @ElMassimo -I should have noticed that module/defer. (by acceleration I meant whatever vite_ruby is doing under the hood to speed up asset loading and rendering on bin/vite dev) I'm pretty sure this is not a vite_ruby issue, and some weird React 17 behavior. But here's what I have: // Works, only because of duplicate elements. Truly strange. If I a remove a dupe I get 'not a DOM element' errors raised in both portals. Rendered html: <div id="react">
<div id="nav-bar"></div>
<div id="signed-in-footer"></div>
</div>
<div id="react">
<div id="nav-bar"></div>
<div id="signed-in-footer"></div>
</div>
<script src="/vite-dev/entrypoints/navs.jsx" crossorigin="anonymous" type="module"></script>navs.jsx: import React from 'react'
import ReactDOM from 'react-dom';
import ResponsiveAppBar from '~/components/app_bar'
import ResponsiveAppFooter from '~/components/app_footer'
import { UserSettingsProvider } from '~/components/theme_context'
const AppBarPortal = () => ReactDOM.createPortal(<ResponsiveAppBar />, document.getElementById('nav-bar'))
const AppFooterPortal = () => ReactDOM.createPortal(<ResponsiveAppFooter />, document.getElementById('signed-in-footer'))
ReactDOM.render(
<React.StrictMode>
<UserSettingsProvider>
<AppBarPortal />
<AppFooterPortal />
</UserSettingsProvider>
</React.StrictMode>,
document.getElementById('react')
);
|
Beta Was this translation helpful? Give feedback.
-
|
Any DOM elements will be exposed as variables named after their
The fact that you are using Try using a more "unique" id for elements, such as |
Beta Was this translation helpful? Give feedback.
-
|
no change unfortunately.
This must be a strange bug in React. I'll try to refactor. |
Beta Was this translation helpful? Give feedback.
-
|
Solved: <div id="react"></div>
<div id="nav-bar"></div>
<div id="signed-in-footer"></div>React doesn't like nested elements for some reason. Sorry for the off topic @ElMassimo |
Beta Was this translation helpful? Give feedback.
Hi there!
Not sure what you are referring to 😃
By default all scripts in Vite are
type=module, which by aredeferby default.If an HTML element is defined (and closed) before a script element, it will always be available when the script is executed (in fact that's exactly the technique I'm using to hydrate islands in îles).
The issue you are experiencing suggests malformed HTML, or that the script is inside the root element.
If you share a repo …