React SyntaxError

Question

I am learning React and I have written this code:

import React from "react";
import ReactDOM from "react-dom";
const element = <h1>Hello World!</h1>;
ReactDOM.render(element, document.getElementById('root');

However, on executing the Programme, I am getting this error:

SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:979:16)
at Module._compile (internal/modules/cjs/loader.js:1027:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47

As a can't understand what is the problem in the code. Please do help me out.

Can you provide more information? It seems like you are running it in Node but it's a little hard to tell. — shadowtime2000
– shadowtime2000, Commented Feb 28, 2021 at 5:12

codemonkey · Accepted Answer · 2021-02-28 05:25:27Z

1

From what I can see you should correct the typo in the word document, close your render function and give it the element to render:

ReactDOM.render(element, document.getElementById('root'));

edited Feb 28, 2021 at 5:25

answered Feb 28, 2021 at 5:23

codemonkey

7,9655 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Roman Nozhenko Over a year ago

I would also add that it is worth starting by setting up your code editor to see such typos.

Sahan Pasindu Nirmal · Accepted Answer · 2021-02-28 05:37:27Z

0

You have a missing element here, so you must need to pass your created element const variable to render() method as your first argument to render your created element to your DOM

So try and review this code.

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

Use this reference to know more about React Rendering Elements

answered Feb 28, 2021 at 5:37

Sahan Pasindu Nirmal

3954 gold badges13 silver badges38 bronze badges

1 Comment

Matrix Over a year ago

On using this code I am getting the same error: (node:22004) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Use node --trace-warnings ... to show where the warning was created) c:\Users\Agniva Roy\master\src\App.js:1 import React from "react"; ^^^^^^ SyntaxError: Cannot use import statement outside a module

Nithish · Accepted Answer · 2021-02-28 05:37:55Z

From the React docs, ReactDOM.render Render a React element into the DOM in the supplied container, below is the syntax

ReactDOM.render(element, container[, callback])

So the two problems in your code are, document spelling and the ReactDOM.render arguments

import React from "react";
import ReactDOM from "react-dom";
const element = <h1>Hello World!</h1>;
ReactDOM.render(element , document.getElementById('root'));

Below is the runnable snippet

const element = <h1>Hello World!</h1>;
ReactDOM.render(element , 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>

Shubham Ambastha · Accepted Answer · 2021-02-28 06:10:03Z

0

You need to pass your element to render() method as your first argument to render that element and also there is a typo in the word document and also your render function is not closed. Try these two things first. For your help =>

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

answered Feb 28, 2021 at 6:10

Shubham Ambastha

3321 gold badge4 silver badges12 bronze badges

Collectives™ on Stack Overflow

React SyntaxError

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related