React files not interacting properly
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
Im making a basic react website and so far ot has been working perfectly fine up until I add an app.js-like file and use that in my directory. My normal index.js file that renders the components is below
import React from “react”;
import { createRoot } from ‘react-dom/client’
import {
BrowserRouter,
Routes,
Route,
} from “react-router-dom”;
import Home from “./Home”;
import Games from “./Games”;
const root = createRoot(document.getElementById(‘root’))
root.render(
<BrowserRouter>
<Routes>
<Route path=”/” element={<Home />} />
<Route path=”games” element={<Games />} />
</Routes>
</BrowserRouter>
);
No matter what I do, I consistently get an error of Uncaught Error: createRoot(…): Target container is not a DOM element. in my console despite the fact that I am refercing my DOM element of the “root” div which does exist in my index.html file in my public folder. My index.html file is
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<meta name=”theme-color” content=”#000000″ />
<link rel=”manifest” href=”%PUBLIC_URL%/manifest.json” />
<link rel=”icon” href=”%PUBLIC_URL%/images/favicon.ico” />
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap” rel=”stylesheet”>
</head>
<body>
<div id=”root”></div>
</body>
</html>
and clearly has a div with the “root” id. I never touched the index.html file, but once I added my Home.jsx
import React, { Component } from ‘react’;
import VideoBg from ‘./Components/VideoBg’;
class Home extends Component {
render() {
return (
<React.Fragment>
<VideoBg />
</React.Fragment>
);
}
}
export default Home;
It all of a sudden stopped working and reverting brings the same error. VideoBg.jsx being imported previously is (obviously there is more, this is the only key component the rest are basic import export)
render() {
return (
<React.Fragment>
<video autoplay loop id=”VideoBg”>
<source src={this.getDay}></source>
</video>
</React.Fragment>
);
}
Why am I getting the Target Container is not a Dom element error despite the index.html and everything else consistently working before. Ive tried rendering the VideoBg component solely and similar debugging things, but I can constantly given the container issue.
أضف إجابة