I am making a simple TODO App using MERN Stack. But can't able to run because of above mentioned error i.e. Target container is not a DOM element. I checked out whole code but can't able to find its cause or solution. This are the problems. Please help here.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<noscript></noscript>
<div class="root">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import {BrowserRouter as Link, Router, Route} from 'react-router-dom';
import TodoList from './components/todo-list';
class App extends Component
{
render()
{
return(
<Router>
<div>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a href="/" className="navbar-brand">
<img src={logo} alt="Logo" height="40" width="40"/>
</a>
<Link to="/" className="navbar-brand">MERN Stack TO-DO App</Link>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="myNavBar">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="myNavBar">
<ul className="navbar-nav mr-auto">
<li className="navbar-item">
<Link to="/" className="nav-link">Todos</Link>
</li>
</ul>
</div>
</nav>
</div>
<Route path="/" exact component={TodoList}></Route>
</Router>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
this going to render the React app in a div with id root
and in your html file you have a div with class root and no id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<noscript></noscript>
<div class="root">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
give the div id root
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<noscript></noscript>
<div id="root">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
Related
I am new to web development and have been practicing React by building a site. I need to embed multiple JS scripts to display 360 tours on the site. But can't get it to work. When I use the JS script embed it does not appear on site.
I have included the script in the public/index.html head as follow:
<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="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script
src="https://static.kuula.io/embed.js"
data-kuula="https://kuula.co/share/collection/7FN30?logo=-1&info=0&fs=1&vr=1&zoom=1&initload=0&thumbs=1"
data-css="ku-embed">
</script>
<title>React App</title>
</head>
Here is my code within the component:
import React from 'react';
import "./portfolio.css";
import { CTA } from '../../components';
const Portfolio = () => {
return (
<div className='portfolio' id="portfolio">
<div className="portfolio-heading">
<h1>Examples</h1>
<p>Experience virtual tours from the customer perspective</p>
</div>
<div className="portfolio-cards">
<div className="card-container-card">
<div className="card-container-card-img">
<script
src="https://static.kuula.io/embed.js"
data-kuula="https://kuula.co/share/collection/7FN30?logo=-1&info=0&fs=1&vr=1&zoom=1&initload=0&thumbs=1"
data-css="ku-embed">
</script>
</div>
<div className="card-container-card-title">
<p>Revel x Plato</p>
</div>
</div>
</div>
< CTA />
</div>
)
}
export default Portfolio
I have the following html file in my public folder:
<!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" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/juno-icon.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link
href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght#700&display=swap"
rel="stylesheet"
/>
<title>Issue Report</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
what I don't understand is, how does it know to render my index.tsx file (in src) without me stating any script tag?
import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import App from './popup/components/App';
import './popup/styles/index.css';
import { BrowserRouter } from 'react-router-dom';
import { QueryClientProvider, QueryClient } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools'
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
},
},
})
root.render(
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<React.StrictMode>
<App />
</React.StrictMode>
</BrowserRouter>
<ReactQueryDevtools initialIsOpen={true} position='bottom-right' />
</QueryClientProvider>
);
reportWebVitals();
it just seem to render it and it seems like a magic to me o_o
how can it possibly know what file to render?
I am running Reactjs with vite, When I am trying to start my app with network IP I am getting the following error
I am getting the following error when I am trying to start the app with host: localhost
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Asset Scanner</title>
<script
src="https://cdn.socket.io/4.2.0/socket.io.min.js"
integrity="sha384-PiBR5S00EtOj2Lto9Uu81cmoyZqR57XcOna1oAuVuIEjzj0wpqDVfD0JA9eXlRsj"
crossorigin="anonymous"
></script>
</head>
<body>
<div id="root"></div>
<div id="modals"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from '##/App'
import { loadCSSVariables } from './common/utils/cssVariables'
loadCSSVariables().then(() => {
ReactDOM.render(<App />, document.getElementById('root'))
})
i'm new to react JS i wanted to make a popup modal when i click on some button but i want it to position itself close to that button that i clicked ! i used the portal method but that won't position it close to the button so you will have to position it your self but it won't be a good practice ! so i there any other way to do it ? ! and also when the modal popup i want to close when i click on anywhere on the screen not including it self !
PORTAL METHOD :
import React, { Fragment } from "react";
import ReactDOM from "react-dom";
const Popup = (props) => {
if (!props.open) {
return null;
}
return (
<Fragment>
{ReactDOM.createPortal(
<div
className="popupContainer"
style={{ position: "absolute", top: 0 }}
>
<h2>ghhhh</h2>
</div>,
document.getElementById("popup")
)}
</Fragment>
);
};
export default Popup;
<div className="btnContainer">
<button
className="btn btn-primary"
onClick={() => {
setOpen(true);
}}
>
Show modal
</button>
<Popup open={open} />
</div>
<!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="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React Redux App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="popup"></div>
</body>
</html>
I was trying to use a template of bootstrap, CSS files are imported properly by I'm not able to import JS. I came to know that in Next Js you can import them in useEffect hook. But still, it gives an error that the script not found. Here is my code,
import Head from 'next/head';
import '../styles/globals.css';
import { useEffect } from 'react';
function MyApp({ Component, pageProps }) {
useEffect(() => {
import("../public/lib/js/jquery-3.3.1.min.js");
import("../public/lib/js/bootstrap.min.js");
import("../public/lib/js/jquery.nice-select.min.js");
import("../public/lib/js/jquery-ui.min.js");
import("../public/lib/js/jquery.slicknav.js");
import("../public/lib/js/mixitup.min.js");
import("../public/lib/js/owl.carousel.min.js");
import("../public/lib/js/main.js");
}, []);
return (
<>
<Head>
<meta charset="UTF-8"/>
<meta name="keywords" content="Ogani, unica, creative, html"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
{/* Font */}
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght#200;300;400;600;900&display=swap" rel="stylesheet"/>
{/* CSS */}
<link rel="stylesheet" href="lib/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/elegant-icons.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/nice-select.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/jquery-ui.min.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/owl.carousel.min.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/slicknav.min.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/style.css" type="text/css"/>
</Head>
<Component {...pageProps} />
</>
);
}
export default MyApp;
Here is my directory structure,
Directory Structure
After the suggestion is used _document.js inside the pages directory to include local scripts but still they aren't included when the page is rendered.
pages/_document.js code is below,
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head>
{/* Site Tag */}
<Script src="lib/js/jquery-3.3.1.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/bootstrap.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/jquery.nice-select.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/jquery-ui.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/jquery.slicknav.js" strategy="beforeInteractive"/>
<Script src="lib/js/mixitup.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/owl.carousel.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/main.js" strategy="beforeInteractive" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Update:
Changed beforeInteractive to lazyOnload. You may also use afterInteractive.
Say you have a local script file: myscript.js that you are trying to include in your NextJS project, to include it:
Place the script file in your /public folder and
In your page component add:
Inside page component:
import Script from 'next/script'
export default function Document() {
return (
<div>
{/* Other stuff */}
<Script
src="myscript.js"
strategy="lazyOnload"
/>
</div>
)
}
NextJS will know to look for scripts referenced without a URL prefix like https in the public folder.
Learn more about the <Script> component and other load strategys here:
https://nextjs.org/docs/basic-features/script#overview and https://nextjs.org/docs/api-reference/next/script