Target container is not a DOM element

Question

I have a problem with my Web. I do this web with ReactJS + vite. The problem is: Target container is not a DOM element.

React: 17.0.1
React-router-dom: 6.6.1

I have this version of React, because if I have the version 18.0.0 I will have more problems with "react-dom/client".

package.json:

{
  "name": "project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-regular-svg-icons": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "babel-plugin-macros": "^3.1.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "router-dom": "^2.2.9"
  },
  "devDependencies": {
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.2",
    "@vitejs/plugin-react": "^1.3.0",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.20",
    "react-router-dom": "^6.6.1",
    "tailwindcss": "^3.2.4",
    "vite": "^2.9.5"
  },
  "eslintConfig": {
    "extends":["standard"]
  }
}

main.jsx:

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
)

I don't understand the problem. I have read if change id='root' for id='app', it will work. (But in my case no).

App.jsx:

import React from "react";
import { BrowserRouter, Router, Routes, Route, } from "react-router-dom";
import './App.css';

import Home from "./pages/Home";
import Photos from "./pages/Photos";
import Cookies from "./components/Cookies";

const App = () => {
  return (
    <BrowserRouter>
      <Router>
        <div className="App">
          <BrowserRouter>
            <Routes>
              <Route path="/" element={<Home />}>
                <Route index element={<Home />} />
                <Route path="photos" element={<Photos />} />
                <Route path="cookies" element={<Cookies />} />
                <Route path="*" element={<NoPage />} />
              </Route>
            </Routes>
          </BrowserRouter>
        </div>
      </Router>
    </BrowserRouter>
  );
}

export default App

index.html

<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" type="image/svg+xml" href="/img/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Photos</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx" defer></script>
  </body>
</html>

I tried a lot of changes, Thanks.

I discovered that if I install FontAwesome the problem appers. I don't understand why.

Can you [edit] the post to include the relevant html code where you are trying to render the React app into? This would be the `index.html` file in the public directory most likely. Also, you only need 1 router component for the entire app. Your code is rendering at least 3. — Drew Reese, Jan 04 '23 at 10:03
Think you could create a *running* [codesandbox](https://codesandbox.io/) demo of your code that reproduces the issue that we could inspect live? — Drew Reese, Jan 04 '23 at 16:20

score 0 · Answer 1 · answered Jan 04 '23 at 11:40

First of all only one BrowserRouter component is allowed in an App.

Therefore you App component supposed to look like this

    <div className="App">
        <Routes>
          <Route path="/" element={<Home />}>
            <Route index element={<Home />} />
            <Route path="photos" element={<Photos />} />
            <Route path="cookies" element={<Cookies />} />
            <Route path="*" element={<NoPage />} />
          </Route>
        </Routes>
    </div>

); }

And secondly your app seems to fire up the main.jsx file before your html is completely being loaded, therefore use "defer" attribute in your script tag

<script type="module" 
 src="/src/main.jsx" defer>. 
 </script>

Check out this post it may help React Error: Target Container is not a DOM Element

Thanks! I changed but the problem continues. – Halley Jan 04 '23 at 11:59 — Halley, Jan 04 '23 at 11:59

Target container is not a DOM element

1 Answers1