Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BUG]: hydrateRoot(...): Target container is not a DOM element. #162

Closed
marcoandre1 opened this issue Jan 19, 2023 · 1 comment
Closed

[BUG]: hydrateRoot(...): Target container is not a DOM element. #162

marcoandre1 opened this issue Jan 19, 2023 · 1 comment
Assignees
@marcoandre1
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@marcoandre1
Copy link
Owner

Describe the bug
Github Action Build and deploy triggered by PR #161 [MERGE]: release to master seemed to work correctly and got deployed on Github Pages by Github Action pages build and deployment.

However, while testing, the app was buggy and didn't react as it should. The console gave the following warning:

Uncaught Error: Minified React error #405; visit https://reactjs.org/docs/error-decoder.html?invariant=405 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Following the link, the error appeared to be:

hydrateRoot(...): Target container is not a DOM element.

To Reproduce
Steps to reproduce the behavior:

  1. Take branch release at commit 8ba966a6d4eea4797c000fbdf771f59b9c54a994 and Run Workflow Build and deploy.
  2. Once Github Actions Build and deploy and pages build and deployment are done, go to https://www.modokemdev.com/en/
  3. Page is not really responsive, light theme stays on, impossible to switch languages or dark theme.
  4. Console shows an error, see [MERGE]: release to master #161 (comment).

Expected behavior
The website should be responsive and work flawlessly with no errors.

Screenshots
See #161 (comment)

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser: Firefox 108.0.2

Additional context
N/A
@marcoandre1 marcoandre1 added bug Something isn't working help wanted Extra attention is needed labels Jan 19, 2023
@marcoandre1 marcoandre1 self-assigned this Jan 19, 2023
This was referenced Jan 19, 2023
Merged
Merged
@marcoandre1
Copy link
Owner Author

Issue fixed! See #162, the problem is that I inverted the hydrateRoot parameters.

Particular attention to the parameters inversion in the NEW hydrate function: hydrate(<App tab="home" />, container) vs hydrateRoot(container, <App tab="home" />).

Extract from How to Upgrade to React 18:

Finally, if your app uses server-side rendering with hydration, upgrade hydrate to hydrateRoot:

// Before
import { hydrate } from 'react-dom';
const container = document.getElementById('app');
hydrate(<App tab="home" />, container);

// After
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = hydrateRoot(container, <App tab="home" />);
// Unlike with createRoot, you don't need a separate root.render() call here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@marcoandre1 marcoandre1

Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

When branches are created from issues, their pull requests are automatically linked.

162-bug-hydrateroot-target-container-is-not-a-dom-element marcoandre1/marcoandre1.github.io
1 participant
@marcoandre1