I'm making a simple flask app, using react for the front-end stuff. Right now I'm experimenting with importing React components from other files, without success. This is the error I'm getting:
Uncaught ReferenceError: require is not defined
This is my html file:
<html>
<head>
<meta charset="UTF-8">
<title>Index page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.16/css/bulma.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
<div class="columns">
<div class="column">
some stuff
</div>
<div class="column">
<div id="index"></div>
</div>
</div>
<script type="text/babel" src="static/js/index.js"></script>
</body>
</html>
and my index.js:
import FormComponent from './FormComponent.js';
var MainClass = React.createClass({
render:function(){
return (
<div>
<div>this is the main component</div>
<div><FormComponent /></div>
</div>
);
}
});
ReactDOM.render(<MainClass />, document.getElementById('index'));
and finally the FormCommponent.js, which is in the same folder:
var FormComponent = React.createClass({
render: function() {
return (
<div>this is an imported component</div>
);
}
});
module.exports = FormComponent;
Does anyone know what am I doing wrong?
I'm not using any package managers.
EDIT
Solved the problem by using browserify, as mentioned below.
Thanks for the help
You need to use something like Rollup, Webpack, or Browserify. This statement import FormComponent from './FormComponent.js'; doesn't mean anything on the client. No browser natively supports it so you need something like the tools mentioned above to turn it into something the browser can actually use.
Without them you just have to load the files in your index.html.
Maybe if you try to include components like the first but declare like text/javascript should run.
I hope this solves your problem
Related
Trying to create my first vite.js app. after initializing the project and installing the dependencies i edited index.html to show a normal hello world, other files i left them empty.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- <link rel="icon" type="image/svg+xml" href="favicon.svg" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Wolrd</title>
</head>
<body>
<div id="app">
<script type="module" src="./main.js"></script>
<h1>Hello Wolrd</h1>
</div>
</body>
</html>
However i edit index.html style.css or main.js , the localhost just keep showing the welcome page from vite.js, so i inspected the page and it looks like it still using the boiler-path template:
EDIT:
someone commented that main.js is the entry point of vite.js i edited too to show a simple hello world to no brainer...
import './style.css'
document.querySelector('#app').innerHTML = `
<h1>Hello World!</h1>
`
This is my files hierarchy:
if you need any more info let me know?
EDIT 2:
I was using MacOs mojave version 10.14.6
I changed to another Imac with the same os and version and it worked ...
In main.js you will see:
document.querySelector('#app').innerHTML = `
<h1>Hello Vite!</h1>
Documentation
`
Which replaces all which is in <div id="app"></div>
With
<div id="app">
<h1>Hello Vite!</h1>
Documentation
</div>
Vite bundler is placing/fixing the <script> at the end before body because its in the wrong place.
If you want Hello World! then you should change the content in main.js
document.querySelector('#app').innerHTML = `
<h1>Hello World!</h1>
`
I start to learn React and I try to run this page but I caught this error :
Refused to execute script from 'https://unpkg.com/browse/babel-standalone#6.26.0/babel.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Can anyone helps me?
<!DOCTYPE html>
<html lang="en">
<head>
<title> React work </title>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/browse/babel-standalone#6.26.0/babel.min.js"></script>
</head>
<body>
<div id='react-root'></div>
<script type="text/babel">
class Bonjour extends React.Component
{
render()
{
return (
<h1> Hello from React </h1>
)
}
}
ReactDOM.render(
<Bonjour/>,
document.getElementById('react-root')
)
</script>
</body>
</html>
Your link is wrong. The /browse is:
https://unpkg.com/browse/babel-standalone#6.26.0/babel.min.js
This is a webpage, not a .js file. Click the "View Raw" button to get to the plain JS:
https://unpkg.com/babel-standalone#6.26.0/babel.min.js
Use that instead, and you get:
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone#6.26.0/babel.min.js"></script>
<div id='react-root'></div>
<script type="text/babel">
class Bonjour extends React.Component
{
render()
{
return (
<h1> Hello from React </h1>
)
}
}
ReactDOM.render(
<Bonjour/>,
document.getElementById('react-root')
)
</script>
But, a suggestion - only use Babel Standalone for debugging, if possible. For real apps, once they're ready for public consumption, better to transpile the JSX on your own, then serve that to clients. (Babel Standalone makes clients transpile the code themselves, which requires quite a lot of overhead)
REACT HELP: Trying to build a very basic React boilerplate because doing Create-React-App seems like overkill for some basic practice. In this repo there is two boilerplate files, the second works but then all the code would be in one file. The second file point to start.js as the app component but when I run it in the browser nothing appears. What am I overlooking, I’ve seen several other boilerplates and doesn’t seem like I’m doing anything different.
https://git.generalassemb.ly/AlexMerced/PracticeRepo/tree/master/react
You are trying to import React from "react" which doesn't exist. In a standalone version I think you will get a global React and ReactDOM objects. You can use them to render the component. Remove the import statements from start.js Edited code below.
class Greeting extends React.Component {
render() {
return <p>Hello world</p>;
}
}
ReactDOM.render(<Greeting />, document.getElementById("start"));
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>React Boilerplate</title>
</head>
<body>
<div id="start"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/#babel/standalone#7.6.2/babel.min.js"></script>
<script type="text/babel" src="./start.js"></script>
</body>
</html>
Almost done learning React on Codecademy, so I wanted to start coding something in it on my PC. I have put the directory onto my XAMPP server, but the React app still won't render.
class LandingPage extends React.Component {
render() {
return (
<h2>Hello</h2>
);
}
}
ReactDOM.render(<LandingPage />, document.getElementById('app'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>ReactApp</title>
<meta name="author" content="Mae" />
<link type="text/css" rel="stylesheet" href="sass/design.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
<!-- import react, react-dom and babel-core -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<body>
<div id="app">
</div>
<script type="text/babel" src="react-front.js"></script>
<!--Import jQuery-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</body>
</html>
I don't think any browser by default understands JSX. You need to set up the chain to compile your source to pure JS.
If you only want to play around I recommend using the Create React App.
See: https://reactjs.org/docs/installation.html#creating-a-new-application
Time ago we purchased this template and we have used it in an angularJS application without any problem.
Now for another project we have switch to Angular 2 and we want use the same theme but we got this weird behaviour: sometimes works as expected but most of the times isn't working.
We have inspected the code using the firefox console and this is the result when is working:
And this is the output console when is not working:
For an (mine) unknown reason sometimes materialize.min.js is not listening for events.
Unfortunately due to copyright issue I can't post the materialize.min.js source code but I can post mine:
index.html
<html>
<head>
<base href="/">
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<link href="css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/style.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/layouts/style-fullscreen.css" type="text/css" rel="stylesheet" media="screen,projection">
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
<!--materialize js-->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<header-navbar></header-navbar>
<div id="main">
<!-- START WRAPPER -->
<div class="wrapper">
<navbar></navbar>
<section id="content">
<div class="container">
<router-outlet></router-outlet>
</div>
</section>
</div>
</div>
`
})
export class AppComponent { }
EDIT
Even if I use a local copy of jQuery is not working properly.
Provided your materialize.min.js relies on jQuery, I would suspect the reason it works sometimes and not others is that your CDN link is not always loading correctly. I might suggest downloading a copy of jQuery and loading it from a local source that you control.
Edit: When you say "not working" when loaded from a local source, do you mean it is still working sometimes but not consistently? Or do you mean not working at all?