I get the error index.pack.js:1 Uncaught SyntaxError: Unexpected token '<' I thought this was an error I made but no, i cant seem to find any errors, Here's the code for what i have got
Index.html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon#2.3.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="root"></div>
<script src="index.pack.js"></script>
</body>
</html>
Then index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Also then in the app
import React from "react"
function App() {
return (
<div>
<h1>Home Page</h1>
</div>
)
}
export default App
FYI< I have installed create-react-app and deleted some of those files >
Any help would be appreciated!
Here's the error when inspected
I fixed this by going into my index.html file (in visual studio code) and holding ctrl click on the index.pack.js link inside the tags. Visual studio code will come up with an error saying file cannot be found, would u like to create it? select yes, save and refresh your page. For me this was enough and my code worked perfectly error free.
I fixed this by going into my index.html file (in visual studio code) and holding ctrl click on the index.pack.js link inside the tags. Visual studio code will come up with an error saying file cannot be found, would u like to create it? select yes, save and refresh your page. For me this was enough and my code worked perfectly error free.
I've only just started looking at Next JS for my project but am having issues with the Head tag not working. According to the documentation, I should just be able to import head from next/head and insert the title tag. However, it's not working for me, be it using the Layout component which gets imported to each page or directly injecting it.
Here is the code as a layout (/components/layout.jsx)
import Link from 'next/link';
import Head from 'next/head';
export default function Layout({
children,
title = 'Default Title'
}) {
return(
<div>
<Head>
<title>{title}</title>
<meta charSet='utf-8' />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"></link>
</Head>
<nav>
<div className='nav-wrapper'>
<ul class='right hide-on-med-and-down'>
<li>
<Link href='/'>
<a>Home</a>
</Link>
</li>
<li>
<Link href='/about'>
<a>About</a>
</Link>
</li>
</ul>
</div>
</nav>
{children}
{/* Footer to go in here */}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</div>
)
}
And this is the about page (/pages/about.jsx)
import React from 'react';
import Layout from '../components/layouts';
function About() {
return(
<Layout>
<div>
<h1>Test Page</h1>
</div>
</Layout>
);
}
export default About;
It just doesn't work at all. The title is not updated and if I inspect the components, I can't see anything that I've added. I originally thought that it's because I set up the Next app myself and I did something wrong. However, I tried bootstrapping it with npx create-next-app and I am seeing the same issue.
Any help is appreciated!
Cheers
First, create a new component, eg. seo.jsx
import Head from "next/head";
const SEO = ({ pageTitle, pageDescription }) => (
<Head>
<title>{pageTitle}</title>
<meta name="description" content={pageDescription} />
...
</Head>
);
export default SEO;
Second, import to your page (eg. home.jsx):
import SEO from "#components/seo"; //change to your path
const Home = () => {
...
return (
<div>
<SEO pageTitle="Homepage" pageDescription="Welcome to my website" />
...
</div>
);
};
export default Home;
In this scenario you will be able to change title and description (or any other props you need) in any page of your app, without worrying about meta key duplicates.
More info here.
I took your exact code and created a sandbox and I can see the title working as expected provided you use .jsx in your import
import Layout from '../components/layouts';
to
import Layout from '../components/layouts.jsx';
or if you want to use without extension, use .js instead
**Code Sandbox - ** https://codesandbox.io/s/vigorous-wind-4e035?file=/pages/index.js
Next JS Discussion - https://github.com/vercel/next.js/issues/2391#issuecomment-311735189
I didn't do anything specific to the title but to make the sandbox work and to print the document title.
I modified paths without the folder and the default IndexPage next sandbox
Modified Index to print the document title
Instead of importing components/layout, imported components/layout.jsx
The Codesandbox crashed when i tried to import the file without the JSX extension.
Let me know if this helps or we can explore further!
I also got that the head tag is not a working issue, what I did was added a tag for cover and the layout of the body
ex:
<main>
<head>
{..head elements }
</head>
<div>
{ other elements }
<div>
</main>
I´m using frontend-maven-plugin in a Spring Data REST application to use React as the front end library. Once I execute the Main application, I go to localhost:8080. Inside the Logo and the title in the index.html "ReactJS + Spring Data REST" appears correctly, so i´m assuming the app is correctly reading the index.html, but nothing of the boilerplate of React appears.
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head lang="en">
<meta charset="UTF-8"/>
<!-- The title does appear correctly: -->
<title>ReactJS + Spring Data REST</title>
<link rel="stylesheet" href="/main.css" />
</head>
<body>
<div id="react"></div>
<script src="built/bundle.js"></script>
</body>
</html>
const React = require('react');
const ReactDOM = require('react-dom');
const client = require('./client');
function App(){
return (
<div>
{/* This doesn´t appear: */}
<h3>Trying React in Spring</h3>
</div>
)
}
}
ReactDOM.render( <App />, document.getElementById('react'))
I don´t have any errors in the proyect. I honestly don´t know where could be the problem.
Here´s the error in the devtools appears: "Failed to load resource: the server responded with a status of 404 ()bundle.js"
Here´s how my files are structured right now:
I'm following the directions here on Gatsby's website to customize the <head> tag. I want to add Modernizr and Google's WebFont libraries. I copied .cache/default-html.js and put it in src/html.js, and then I added the script tags the libraries, but they aren't showing up on my localhost:8000.
Is there some Gatsby cache that needs cleared when trying to do a custom html.js? Or is there another way to add these to the <head> tag?
EDIT: It turns out I was trying to put a <script></script> tag in the JSX of the html.js.
Use React Helmet to customize the <head> tag. Check out their documentation for more examples.
import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://example.com/example" />
</Helmet>
...
</div>
);
}
};
install with:
npm i --save gatsby-plugin-react-helmet react-helmet
update gatsby-config.js:
plugins: ['gatsby-plugin-react-helmet']
For a working example, create a new build with gatsby new gatsby-site and
have look at the component in src/layouts/index.js
<Helmet
title="Gatsby Default Starter"
meta={[
{ name: 'description', content: 'Sample' },
{ name: 'keywords', content: 'sample, something' },
]}
/>
I get this error after a making trivial React example page:
Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
Here's my code:
/** #jsx React.DOM */
'use strict';
var React = require('react');
var App = React.createClass({
render() {
return <h1>Yo</h1>;
}
});
React.renderComponent(<App />, document.body);
HTML:
<html>
<head>
<script src="/bundle.js"></script>
</head>
<body>
</body>
</html>
What does this mean?
By the time script is executed, document element is not available yet, because script itself is in the head. While it's a valid solution to keep script in head and render on DOMContentLoaded event, it's even better to put your script at the very bottom of the body and render root component to a div before it like this:
<html>
<head>
</head>
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
and in the bundle.js, call:
React.render(<App />, document.getElementById('root'));
You should always render to a nested div instead of body. Otherwise, all sorts of third-party code (Google Font Loader, browser plugins, whatever) can modify the body DOM node when React doesn't expect it, and cause weird errors that are very hard to trace and debug. Read more about this issue.
The nice thing about putting script at the bottom is that it won't block rendering until script load in case you add React server rendering to your project.
Update: (October 07, 2015 | v0.14)
React.render is deprecated, use ReactDOM.render
instead.
Example:
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));
/index.html
<!doctype html>
<html>
<head>
<title>My Application</title>
<!-- load application bundle asynchronously -->
<script async src="/app.js"></script>
<style type="text/css">
/* pre-rendered critical path CSS (see isomorphic-style-loader) */
</style>
</head>
<body>
<div id="app">
<!-- pre-rendered markup of your JavaScript app (see isomorphic apps) -->
</div>
</body>
</html>
/app.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
function run() {
ReactDOM.render(<App />, document.getElementById('app'));
}
const loadedStates = ['complete', 'loaded', 'interactive'];
if (loadedStates.includes(document.readyState) && document.body) {
run();
} else {
window.addEventListener('DOMContentLoaded', run, false);
}
(IE9+)
Note: Having <script async src="..."></script> in the header ensures that the browser will start downloading JavaScript bundle before HTML content is loaded.
Source: React Starter Kit, isomorphic-style-loader
the ready function can be used like this:
$(document).ready(function () {
React.render(<App />, document.body);
});
If you don't want to use jQuery, you can use the onload function:
<body onload="initReact()">...</body>
just a wild guess, how about adding to index.html the following:
type="javascript"
like this:
<script type="javascript" src="public/bundle.js"> </script>
For me it worked! :-)
I ran into the same error. It turned out to be caused by a simple typo after changing my code from:
document.getElementById('root')
to
document.querySelector('root')
Notice the missing '#'
It should have been
document.querySelector('#root')
Just posting in case it helps anyone else solve this error.
Yes, basically what you done is right, except you forget that JavaScript is sync in many cases, so you running the code before your DOM gets loaded, there are few ways to solve this:
1) Check to see if DOM fully loaded, then do whatever you want, you can listen to DOMContentLoaded for example:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
</script>
2) Very common way is adding the script tag to the bottom of your document (after body tag):
<html>
<head>
</head>
<body>
</body>
<script src="/bundle.js"></script>
</html>
3) Using window.onload, which gets fired when the entire page loaded(img, etc)
window.addEventListener("load", function() {
console.log("Everything is loaded");
});
4) Using document.onload, which gets fired when the DOM is ready:
document.addEventListener("load", function() {
console.log("DOM is ready");
});
There are even more options to check if DOM is ready, but the short answer is DO NOT run any script before you make sure your DOM is ready in every cases...
JavaScript is working along with DOM elements and if they are not available, will return null, could break the whole application... so always make sure you are fully ready to run your JavaScript before you do...
If you use webpack for rendering your react and use HtmlWebpackPlugin in your react,this plugin builds its blank index.html by itself and injects js file in it,so it does not contain div element,as HtmlWebpackPlugin docs you can build your own index.html and give its address to this plugin,
in my webpack.config.js
plugins: [
new HtmlWebpackPlugin({
title: 'dev',
template: 'dist/index.html'
})
],
and this is my index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="">
<meta name="viewport" content="width=device-width">
<title>Epos report</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
In my case this error was caused by hot reloading, while introducing new classes. In that stage of the project, use normal watchers to compile your code.
For those using ReactJS.Net and getting this error after a publish:
Check the properties of your .jsx files and make sure Build Action is set to Content. Those set to None will not be published. I came upon this solution from this SO answer.
I ran into similar/same error message. In my case, I did not have the target DOM node which is to render the ReactJS component defined. Ensure the HTML target node is well defined with appropriate "id" or "name", along with other HTML attributes (suitable for your design need)
When you got:
Error: Uncaught Error: Target container is not a DOM element.
You can use DOMContentLoaded event or move your <script ...></script> tag in the bottom of your body.
The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
document.addEventListener("DOMContentLoaded", function(event) {
ReactDOM.render(<App />, document.getElementById('root'));
})
it's easy just make basic HTML CSS js and render the script from js
mport React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
var destination = document.querySelector('#container');
ReactDOM.render(
<div>
<p> hello world</p>
</div>, destination
);
body{
text-align: center;
background-color: aqua;
padding: 50px;
border-color: aqua;
font-family: sans-serif;
}
#container{
display: flex;
justify-content: flex;
}
<!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"
/>
<title> app </title>
</head>
<body>
<div id="container">
</div>
</body>
</html>
In my case of using jQuery - for some reason the window.onload doesn't act the same as jQuery's onload
So this one worked for me:
<script>
$(function () { <= replacing window.onload = function() {
// Begin Swagger UI call region
const ui = SwaggerUIBundle({
...
window.ui = ui;
});
</script>
In my case, everything in the html file was set correctly (i.e. script was at the bottom of the body tag). The problem was solved by moving the definition of a component to a separate file from where the component was rendered to the ReactDOM.
So originally I had
import React from 'react';
import ReactDOM from 'react-dom';
class Comp extends React.Component {
// component definition
}
ReactDOM.render(
<Comp />,
document.getElementById('root')
);
Problem was solved after I moved the component definition to a separate file and imported
import React from 'react';
import ReactDOM from 'react-dom';
import Comp from './CompFile';
ReactDOM.render(
<Comp />,
document.getElementById('root')
);
For my case I did mistake something below in index.js and corrected.
Error:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Solution: document.getElementById("root")
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root") // declared
);
With webpack. there is a choice to load the html file with the htmlPlugin instead of us needing to define it. When this is the case, Webpack is going to create an html file that has the script tag over above the root-div element. One quick fix would be to add a new div to the dom dynamically and then write your react dom to it. This can be done on your reactDom render function defined (usually) on the index.js file as below.
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(
<Router>
<App />
</Router>,
document.body.appendChild(document.createElement("div"))
);