“Uncaught SyntaxError: Cannot use import statement outside a module” When Importing ReactJS

2
votes

Today I decided to try to learn React, but whenever I try to import the two modules below:

import React from "react"
import ReactDOM from "react-dom"

I get the error:

Uncaught SyntaxError: Cannot use import statement outside a module

Here's the steps I've taken to try to create my React program:

  1. Install NodeJS
  2. Add NodeJS to environmental variables
  3. Create new folder for my program
  4. Create HTML, CSS, and JS files in my folder

Why am I getting this error, and how can I fix it?

2
javascriptreactjssyntax-error
Where did you get the instructions? Are you using TypeScript? What's your node version? – Phix
I got the instructions from YouTube. It said to install NodeJS, and then it showed how to set up a React app, but I didn't set up a React app like it showed because in the video that I'm following to learn React, I don't think they created a React app. They just used import. Here's the React tutorial video: youtube.com/watch?v=DLX62G4lc44 I'm using JavaScript, not TypeScript. My node version is 14.15.5. Also, note that I accidentally put in my post that I had to Install React, when I meant I had to install Node. – Illusion705
It sounds like you have not installed any node modules. You should start with the React tutorial. – Randy Casburn

2 Answers

1
votes

I assume this is your first time working with React? I see that you have installed NodeJs, which is great!

I recommend that you get started with a complete React app such as Create React App.

https://create-react-app.dev/

0
votes

You need to add this to your package.json and it should work. If you are going to use es6 import statements you need to tell node you are using modules inside of your package.json like this.

"type": "module",