html page
<!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">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./index.js"></script>
</body>
</html>
jsx page
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(<h1>Hello</h1>, document.getElementById("root"))
I get this error when I write a simple react code. Why am I getting this error?
I want to use EditorJS in my project. So I have created an HTML file after reading the documentation. Here is the file called 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">
<title>Home</title>
</head>
<body>
<div id="editorjs"></div>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/editorjs#latest"></script>
<script>
import EditorJS from '#editorjs/editorjs'
const editor = new EditorJS('editorjs')
</script>
</body>
</html>
After opening the file into the browser, EditorJS is not showing up and this message is printed in the console- Uncaught SyntaxError: Cannot use import statement outside a module.
How to fix this problem?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/editorjs#latest"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div id="editorjs"></div>
<script>
const editor = new EditorJS({
autofocus: true
});
</script>
</body>
</html>
When you add a script tag in your HTML file, you don't need to import the library again you can just start using it!
The script isn't a type module, use:
<script type="module">
https://www.youtube.com/watch?v=NyZzRSTZQ2Y
I follow this video to open an HTML file and JS file in VSC. but I can't render the js file on the web.The hi I am tom hi is not appear on the web.
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">
<script crossorigin src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<title>Random Quote Machine</title>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="./index.js"> </script>
</body>
</html>
index.js
function App(){
return(
<div> hi I am tom hi </div>
);
}
ReactDom.render(<App/>,document.getElementById("app"))
Update the last line in index.js to:
ReactDOM.render(<App/>,document.getElementById("app"))
and it'll work.
Explanation:
What was wrong in your index.js?
Ans: ReactDOM is an object which is imported from react library to handle the rendering the component. In your code you were accessing ReactDom, note the caps are different, you were referring to ReactDom instead of ReactDOM.
Remember that JavaScript is a case-sensitive language.
I followed facebook's tutorial to learn react. I used npm create-react-app to create a react app. Html files are in a folder called public . JS and CSS files are in a folder called src.
This is my index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App</title>
</head>
<body>
Link
<div id="root"></div>
</body>
</html>
This is my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App name="Sumanth Jois"/>,
document.getElementById('root')
);
index.html works fine . <App/> is being rendered on to the screen.I have another file which login.html.
This is login.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
This is my login.js :
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<App name="Sumanth Jois"/>,
document.getElementById('app')
);
But this time login.html is display nothing it's empty. Can somebody please tell me where I am going wrong? I am stuck with this for hours now.
In the server side it renders fine, but when it gets to the client side the react part of html vanishes and I get this error:
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) <noscript data-reacti
(server) <div data-reactid=".z
this is my client code before compression:
import {Router, RouterContext, browserHistory} from "react-router";
import React from "react";
import ReactDOM from "react-dom";
const innerHTML = document.getElementById('react-routes').innerHTML;
const routes = JSON.parse(innerHTML);
console.log(routes);
// ReactDOM.render(<RouterContext {...routes} />, document.getElementById('react-app'));
ReactDOM.render(<Router>{routes.routes}</Router>, document.getElementById('react-app'));
// Router.run(routes, Router.HistoryLocation, function (Handler) {
// React.render(<Handler/>, document.getElementById('app'));
// });
I've tryed this three methods the two firsts gives the same error and the third says that Router.run is not a function. (the third was what I had working a few version ago)
the HTML generated by the server is this:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="react-app"><div data-reactid=".1rbyhm4ruo0" data-react-checksum="-854297298"><span data-reactid=".1rbyhm4ruo0.0">Hello </span><span data-reactid=".1rbyhm4ruo0.1">BLBALBLABA LUIZ</span><div data-reactid=".1rbyhm4ruo0.2"><input type="text" value="Login" data-reactid=".1rbyhm4ruo0.2.0"><span data-reactid=".1rbyhm4ruo0.2.1">Hello </span><span data-reactid=".1rbyhm4ruo0.2.2">Login</span></div></div></div>
<script id="react-routes" type="application/json">{"routes":[{"name":"public","path":"/","childRoutes":[{"name":"login","path":"/login"}]},{"name":"login","path":"/login"}],"params":{},"location":{"pathname":"/login","search":"","hash":"","state":null,"action":"POP","key":"zc9mx1","query":{},"$searchBase":{"search":"","searchBase":""}},"components":[null,null],"history":{},"router":{"__v2_compatible__":true},"matchContext":{"history":{},"transitionManager":{},"router":{"__v2_compatible__":true}}}</script>
<script src="https://cdn.socket.io/socket.io-1.1.0.js"></script>
<script src="/public/js/bundle.js"></script>
</body></html>
and after the client runs it becames this:
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="react-app"><noscript data-reactid=".zhdkkenpq8"></noscript></div>
<script id="react-routes" type="application/json">{"routes":[{"name":"public","path":"/","childRoutes":[{"name":"login","path":"/login"}]},{"name":"login","path":"/login"}],"params":{},"location":{"pathname":"/login","search":"","hash":"","state":null,"action":"POP","key":"qbhof0","query":{},"$searchBase":{"search":"","searchBase":""}},"components":[null,null],"history":{},"router":{"__v2_compatible__":true},"matchContext":{"history":{},"transitionManager":{},"router":{"__v2_compatible__":true}}}</script>
<script src="https://cdn.socket.io/socket.io-1.1.0.js"></script>
<script src="/public/js/bundle.js"></script>
</body></html>
I'm using the same method to renderToString() in the server.
Thanks
My problem was actually in gulp while browserifying the project.
As I'm creating dynamic routes to react-router, I don't have all the react classes being imported while gulp is running and it don't add the right packages to my bundle.js.
I want to make it fully dynamic, I'll keep on working on a better solution for this problem, but for the time being I could make it run by bundling *.react.js.