SyntaxError: Cannot use import statement outside a module in javascript - javascript

I'm starting to learn React from zero, locally without set properly all dependencies, the first thing that I did was to use CDNs in my html file, but now I want to know how can I set my machine to import React and ReactDOM and also how can I link CSS to the file.
when I try to run the .js file I got this:
SyntaxError: Cannot use import statement outside a module
When I was using the CDNs links *ReactDOM.render* was working properly
js file
import { React } from 'react'
import { ReactDOM } from 'react-dom'
function FirstComponent(){
return (<div>
<Header />
<Body1 />
<Footer />
</div>)
}
html file
<!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 src="index.js" type="text/babel"></script>
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
my point is, how could I run a js file with JSX and ReactDOM.render without using CDNs link in html file

Yo could try to use create-react-app
https://create-react-app.dev/
It will setup your app for you.
Once your app is setup, you will be able to "build" your app. When you build your app, the React code becomes part of your JavaScript bundle in your application, so you don't need the CDN anymore.

Related

Using react with normal HTML/JavaScript to run without using npm/node

Suppose you have an application that was developed using the Java Spring framework and deployed on a Tomcat server, also, the application uses AngularJS for most of the front-end application parts.
I am thinking of using React to add HTML components to customize the front-end parts of the application instead of using AngularJs. I did follow React tutorials and realized that you need to have node and npm installed and spin up a server to run the application using npm run start to preview the React Web Application. I wonder how you can include "React components" on a regular HTML/JavaScript page and run this component on the browser without the need to use npm run start. I am trying to avoid the need to install node/npm on the target machine where the Java Spring-based web application is running.
I don't plan to integrate AngularJS with React. All I want to do is to add React HTML/JSX components since I noticed it is much easier than Angular in general.
Is it possible to include the needed libraries for React dependencies along with the target application using the script tag on the main index.htm web page then I can start adding React components as usual?
After installing the react sample project using npx create-react-app react-prj you get the below index.js and a bunch of other libraries and application parts:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
And you get the below main HTML file:
<!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 App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
As mentioned, if you open the above HTML in the browser, you will get an empty page, and you must run the app using npm run start.
How I can get a setup for a sample React web application without using node/npm and I just want to use a normal HTML/JavaScript application to be run on the browser directly?
Is this possible?
Thanks to #Sean. Also, I found a good reference here:
https://stackoverflow.com/a/56504616/4180447
I managed to implement React without npm as follows:
Create the sample app using npx create-react-app sample-prj as usual.
Modify the HTML and JavaScript files as follows:
/public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="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"
/>
<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>React App</title>
<link rel="stylesheet" href="../src/App.css">
<link rel="stylesheet" href="../src/index.css">
<script crossorigin src="https://unpkg.com/react#18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="../src/App.js" type="text/babel" data-plugins="transform-modules-umd" defer ></script>
<script src="../src/index.js" type="text/babel" data-plugins="transform-modules-umd" defer></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
/src/App.js
// import logo from './logo.svg';
// import './App.css';
function App() {
const logo = '../src/logo.svg';
return (
<div className="App">
<p>This is paragraph</p>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React xxx
</a>
<div>This is a test with Tarek and Firas</div>
</header>
<p>This is paragraph</p>
<div>This is a test with Tarek and Firas</div>
</div>
);
}
export default App;
/src/index.js
// import React from 'react';
// import ReactDOM from 'react-dom/client';
// import '/src/index.css';
import App from '/src/App.js';
// import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
// reportWebVitals();

Vite preview is working but I can not see it running when opening index.html

I dont know if I'm doint it wrong here, but I started a vanilla.js project with vite, I did my code, and everything is working with: npm run dev (which runs vite command).
But when I run npm run build and I open /dist/index.html the page is not working.
Probably I'm doing something wrong.
I know that when I run npm run build && npm run preview it works. But I'm trying to make it work by only opening the index.html file, because AFAIK, that's the only way I could host it on Github pages.
I added this on my vite.config.js.
import { defineConfig } from 'vite';
export default defineConfig({
base: './'
});
It happens becouse our navigator doesnt recognize the path /heres-the-file-or-paths so i needed to add the ./ at the beginning of our path when are importing .js and .css files. The same for icons and others.
This makes that the build process ends with and index.html like this with our imports paths working. href="./the-rest-of-the-path-here"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<script type="module" crossorigin src="./assets/index.b3824f6c.js"></script>
<link rel="stylesheet" href="./assets/index.3fce1f81.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
I hope this can help you.
I added this at vite.config.js and now it works!
import { defineConfig } from 'vite';
export default defineConfig({
base: '/roulette-simulation/'
});

React not loading, It also doesn't recognize document commands

Extremely simple HTML and javascript set up for React.js not working. I followed exactly the instructions on the react website but it is not working. I would appreciate if anyone can see any error.
Below is the HTML code:
<!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 src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="file1.js"></script>
</body>
</html>
Even the document.getElementById command is not working as shown in the error message on the screenshot below:
Windows 10 32bit, Visual Studio Code.
I hope this finds you well.
You better use any of the NPM react app creating commands, to create your react app. Like npx create-react-app and it will then have the NPM modules that require you to get that root ID you are trying to get using vanilla/backbone js document.getelementbyid while that is not how the root is called. Using the boiler plate that NPM gives you, you can import react and reactdom then to manipulate that single HTML that react renders to the client.
I hope this is the answer to your question.

Using Handlebars in the Browser as an ES6 Module

I am trying to use Handlebars in the Browser (client-side script). I am importing a js module templating.js (see below) and want to import the Handlebars library as an ES6 module but can't find any documentation.
In the example below I was lifting the contents of the following js library as handlebars.js
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.js
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Templating</title>
<meta name="description" content="example showing how to template content">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="templating.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js" integrity="sha512-zT3zHcFYbQwjHdKjCu6OMmETx8fJA9S7E6W7kBeFxultf75OPTYUJigEKX58qgyQMi1m1EgenfjMXlRZG8BXaw==" crossorigin="anonymous"></script>
<script type="module" src="templating.js"></script>
</head>
<body>
<header>
<h1>Templating</h1>
</header>
<main>
</main>
</body>
</html>
/* templating.js */
import { Handlebars } from './handlebars.js' // v4.7.6
document.addEventListener('DOMContentLoaded', event => {
console.log('DOMContentLoaded')
})
I'm getting the error: requested module './handlebars.js' does not provide an export named 'Handlebars'
Does anyone know:
What handlebars library to use?
How to import this into my script?
Any help greatly appreciated...
Loading handlebars via a script tag will expose it as a UMD (universal module definition). This just means that all functionality of the library is exposed via global variable(s). In the case of the library link you provided, the main global variable appears to be Handlebars.
If you would like to import handlebars directly into your script as a CommonJS/ES6 module, you would need to use a build tool such as Webpack.
Try rendering your HTML document in a browser and then typing Handlebars in the devtools console, you should see an object containing all of Handlebars' exported functions.

Why does React code work without any errors?

I have some question.
I had started React tutorial this page. And I created React project by using 'create-react-app' and delete some files (/src/App.js .. etc.). Finally I written code below and running code.
index.html
<!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 App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends Component {
render() {
return(
<div className="App">
<h1>Hello, React!</h1>
<h2>Created react-tutorial</h2>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
So, I don't know why no error in running this project. I looked at the 'index.html', but there was no script link tag. Why have no errors? Because I used 'create-react-app'?
PS. Some contexts may be strange because I used some Google translate service. Sorry :(..
If you are using create-react-app to bootstrap your project then you need to be aware that create-react-app has a couple of things abstracted, which makes it easy to create a react app without having to bother about scripts, configuration and build tools.
From the Docs, it was stated that for the project to build, these files must exist with exact filenames:
public/index.html is the page template;
src/index.js is the JavaScript entry point.
Here's a link to the Getting Started guide, I hope this helps. Good luck!
P.S From your code - index.js, I can see you still have a reference to index.css, just wanted to point this out since you said you deleted everything. You might also want to take out the two <link> tags in the index.html file which is referencing an image and the manifest.json file from the public folder (if they don't exist anymore)

Categories

Resources