[SOLVED] React index root not loading as DOM element

React index root not loading as DOM element

Please note: I know I'm reporting the same error as what was reported in this question as well as this question, however after reading those questions, its clear to me that they these are all incarnations of the same error arising from different root problems. As such I do not believe my question here is a duplicate!

The reason why: in both those cases, the user reporting them needed to put <div id="root"></div> in their index.html. But I've already done that, and still the problem persists.

I am new to React and I'm trying to use the react-oidc-context project to integrate my React app to my Keycloak server. Here is my project directory structure:

myapp/
    public/
        index.html
    src/
        index.jsx
        main/
            Dashboard.jsx
        web/
            AboutUs.jsx

Above, the AboutUs page/route should be anonymous and open to the public, but the Dashboard should only be acessible once you are authenticated; meaning if you try to go to the Dashboard and are not authenticated yet, you will be redirected to the Keycloak login URL, and then redirected back to the Dashboard after successful login.

I should also state that I am not married to the react-oidc-context library, it just looks like it will fit the bill, is active and well-maintained.

My index.html is:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

My index.jsx is:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { AuthProvider } from "react-oidc-context";
import Dashboard from "./main/Dashboard";
import AboutUs from "./web/AboutUs";
import AccountSettings from "./main/AccountSettings";

const oidcConfig = {
    authority: process.env.REACT_APP_KEYCLOAK_REALM,
    client_id: process.env.REACT_APP_KEYCLOAK_CLIENT,
    redirect_uri: process.env.REACT_APP_KEYCLOK_REDIRECT_URL
};

ReactDOM.render(
    <Router>
        <AuthProvider {...oidcConfig}>
            <Routes>
                <Route path="/dashboard" element={<Dashboard />} />
            </Routes>
        </AuthProvider>
        <Routes>
            <Route path="/about-us" element={<AboutUs />} />
        </Routes>
    </Router>,
    document.getElementById("app")
);

My Dashboard.jsx is:

import React from "react";
import { useAuth } from "react-oidc-context";

function Dashboard() {
    const auth = useAuth();

    switch (auth.activeNavigator) {
        case "signinSilent":
            return <div>Signing you in...</div>;
        case "signoutRedirect":
            return <div>Signing you out...</div>;
    }

    if (auth.isLoading) {
        return <div>Loading Dashboard...</div>;
    }

    if (auth.error) {
        return <div>Oops... {auth.error.message}</div>;
    }

    if (auth.isAuthenticated) {
        return (
        <div>
            Hello {auth.user?.profile.sub}{" "} welcome to the Dashboard!
            <button onClick={() => void auth.removeUser()}>Log out</button>
        </div>
        );
    }

    return <button onClick={() => void auth.signinRedirect()}>Log in</button>;
}

export default Dashboard;

When I run npm start, the app starts up, but when I go to http://localhost:3000 in a browser I see:

ERROR
Target container is not a DOM element.
    at Object.render (http://localhost:3000/static/js/bundle.js:35922:15)
    at ./src/index.jsx (http://localhost:3000/static/js/bundle.js:39:40)
    at options.factory (http://localhost:3000/static/js/bundle.js:52145:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:51566:32)
    at http://localhost:3000/static/js/bundle.js:52722:37
    at http://localhost:3000/static/js/bundle.js:52724:12

When I open Chrome Developer Tools in my browser and refresh, I see a bunch of 304s:

Can anyone spot where I'm going awry? Again, I'm just trying to lock down the /dashboard route but make /about-us public/anonymous. Thanks in advance for any and all help.

Solution

You set an id with the value of "root" for your root div element. But in your index.JSX you get the element with the id of "app" that does not exist in your index.html.

this:

document.getElementById("app")

must be changed to this:

document.getElementById("root")