Uncaught Invariant Violation: Target container is not a DOM element.- Reactjs - javascript

This code is working fine when running locally. When I upload this in 000webhost and use the path of bundle.js in WordPress page then facing this error.
I am getting the above-mentioned error without _registerComponent. Everywhere there is a solution for the error with _registerComponent.
Also I am getting the value of document.getElementById("app") as null.
app.js
import React from "../node_modules/react/index";
import { render } from "../node_modules/react-dom/index";
import Plans from "./components/Plans";
//Import CSS
import "./styles/styles.scss";
const App = () => (
<div>
<Plans/>
</div>
);
var app = document.getElementById("app");
console.log("app",document.getElementById("app"))
render(<App/>, app);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
Code used in WordPress
<html>
<head>
</head>
<body>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script async src="https://unvisitable-bows.000webhostapp.com/react-widget-subscription-plans/react-widget-subscription-plans/public/bundle.js" crossorigin></script>
</body>
</html>

As you are not using index.html in wordpress you will need to add root container div for react to use to render your application. Try adding div for app in wordpress html i.e <div id="app"></div>
<html>
<head>
</head>
<body>
<div id="app"></div>
<script async src="https://unvisitable-bows.000webhostapp.com/react-widget-subscription-plans/react-widget-subscription-plans/public/bundle.js" crossorigin></script>
</body>
</html>

Try this, in app.js
import React from 'react';
import ReactDOM from 'react-dom';
import Plans from "./components/Plans";
//Import CSS
import "./styles/styles.scss";
const App = () => (
<div>
<Plans/>
</div>
);
ReactDOM.hydrate(
<App />,
document.getElementById('app')
);

Your variable "app" is undefined. Try this
render(<App />, document.getElementById('app'));

Related

Why do I get this error? Everything seems fine

I'm learning React. I added them to my website with html script tag:
My 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>MyWebsitewithReact</title>
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#2e2e2e">
</head>
<body>
<div class="navbar">
Home
Plugins
</div>
<div id="root"></div>
<script src="https://unpkg.com/react#18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
My index.js:
'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}
const rootNode = document.getElementById('root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));
This is the error I get :
Error: Minified React error #299; visit https://reactjs.org/docs/error-decoder.html?invariant=299 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
I have tried to visit and the error is:
createRoot(...): Target container is not a DOM element
I checked the documentation and everything seems fine
EDIT:
first in your file index.js you need to add in first line:
import React from 'react';
import ReactDOM from 'react-dom/client';
because without imported these library you can't use elements of React and ReactDOOM.
and in your index.html you need to replace this:
<script src="js/index.js"></script>
to this:
<script src="js/index.js" type="text/babel" data-type="module"></script>
I wish I solved your problem.

Templete in App.vue doesn't show in index.html

I am using local vue.js These are my files.
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">
<script src="res/vue.js"></script>
<script src="res/vue-router.js"></script>
<title>Vue</title>
</head>
<body>
<div id="app" ></div>
<script type="module" src="App.js"></script>
</body>
</html>
App.js
import Vue from './res/vue.js'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div>
{{foo}}
</div>
</template>
<script>
export default {
name: 'App',
data: function(){
return{
foo:'Hello vue'
}
}
}
</script>
<style>
</style>
But my index.html shows nothing
You mount your vue instance at the div node which id is "app", but i can't find the "#app" node, so you can resolve that by insert the "#app" node .
index.html:
<body>
<div id="app"></div>
<script type="module" src="App.js"></script>
</body>
Like the Steven suggested you have to compile vue components.
If you dont want to do it that way, below is the the easiet way.
Vue.createApp({
data() {
return {
foo: 'Hello vue',
};
},
}).mount('#app');
<!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" />
<script src="https://unpkg.com/vue#next"></script>
<!-- <script src="res/vue-router.js"></script> -->
<title>Vue</title>
</head>
<body>
<div id="app">{{foo}}</div>
<script type="module" src="App.js"></script>
</body>
</html>
You probably need to build it with vue-cli to create a SPA(Single page Application) for your android application
Hi is your import correct? from node_modules it should be import Vue from 'vue' and not import Vue from './res/vue.js' try it

ReactJS not rendering on Laravel

I am trying to render reactJS a component on my laravel (5.7) but it does not seem to show up. This is what my files look like:
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}" />
<title>React JS</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{asset('css/app.css')}}" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
Example.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from "./App.js";
ReactDOM.render(<App />, document.getElementById("root"));
App.js
import React from 'react';
class App extends React.Component() {
render(){
return (
<div>
<h1>Hello</h1>
<p>What a REAVELation</p>
</div>
);
}
}
export default App;
npm run watch is running and shows no errors.
Please what might I be doing wrong here?
Using defer fixed it for me
<script defer src="js/app.js"></script>
Use defer : The defer attribute is a boolean attribute.
<script defer type="text/javascript" src="{{ asset('js/app.js') }}"></script>
When present, it specifies that the script is executed when the page has finished parsing.
Note: The defer attribute is only for external scripts (should only be used if the src attribute is present).
Source: MDN
Syntex
You have syntactic bug when you declare class in App.js. You don't use parentheses when you declare class in JavaScript.
class App extends React.Component {
render(){
return (
<div>
<h1>Hello</h1>
<p>What a REAVELation</p>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Add this inside the <head> </head>
<script src="{{ asset('js/manifest.js') }}"></script>
<script src="{{ asset('js/vendor.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
One way to solve this issue is by extracting the vendor library code in a separate file. To do so, open the webpack.mix.js file and update its code as follows:
// webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.react()
.extract(['react'])
.postCss('resources/css/app.css', 'public/css', [
//
]);

How to avoid error 'Unexpected token <' with a React app when running babel from a CDN?

I am new to React and would at the moment like to run everything using CDNs. It seems that similar questions to avoid the same error I am getting ("Uncaught SyntaxError: Unexpected token <") are solved by including ''. But that is not working in this example when I run this very basic React app. Does it not work because Babel cannot transcompile the script from this same file?
<!DOCTYPE html>
<html lang="en">
<head>
<body>
<meta charset="UTF-8">
<title>Title</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
<script type="text/babel"></script>
<div id="app"></div>
</head>
<body>
<script>
console.log('App.js is running!');
var Template = (
<div>
<h1>John</h1>
<p>Age: 26</p>
<p>Location: Philadelphia</p>
</div>
)
var AppRoot = document.getElementById('app')
ReactDOM.render(Template, AppRoot)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src='https://unpkg.com/babel-standalone#6/babel.min.js'></script>
</head>
<body>
<div id='app'></div>
<script type='text/babel'>
console.log('App.js is running!');
class Template extends React.Component{
render(){
return(
<div>
<h1>John</h1>
<p>Age: 26</p>
<p>Location: Philadelphia</p>
</div>
)
}
}
//ReactDom function starting
var AppRoot = document.getElementById('app')
ReactDOM.render(<Template/>, AppRoot)
</script>
</body>
</html>
Use Reactjs version 16. Create class-based component then render it. Use this documentary for better understanding. Link
You have to add type='text/babel' to your script. I also recommend to use at least react 16 if you want to start learning. You might also want to make sure to use UMD versions of react and reactDOM to make sure they run in the browser.
<!DOCTYPE html>
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src='https://unpkg.com/babel-standalone#6/babel.min.js'></script>
</head>
<body>
<div id='app'></div>
<script type='text/babel'>
console.log('App.js is running!');
var Template = (
<div>
<h1>John</h1>
<p>Age: 26</p>
<p>Location: Philadelphia</p>
</div>
)
var AppRoot = document.getElementById('app')
ReactDOM.render(Template, AppRoot)
</script>
</body>
</html>

How to use render () in react?

I just started learning React and trying to get Render() to work.
I couldn't get the content to be added to my html page.
This is my index.html
<html>
<head>
<script async src="/bundle.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
and this is my main.js
import React from 'react';
import ReactDOM from 'react-dom';
class Layout extends React.Component{
render(){
return (
<h1>It works!</h1>
);
}
}
document.addEventListener('DOMContentLoaded', function() {
ReactDOM.render(<Layout />, document.getElementById('app'));
});
I have tried not using a js referenced code, but both do not work.
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(<h1>Hello World</h1>, document.getElementById('app'));
</script>
</body>
</html>
To render the dom you just need to put the script tag after the element you want to render on.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React app</title>
</head>
<body>
<div id="app"></div>
<script src="app.min.js"></script>
</body>
</html>
In main.js:
ReactDOM.render(<App />, document.getElementById('app'))
No need to put a event listener that way.

Categories

Resources