SyntaxError: Cannot use import statement outside a module when start NodeJS from IntellijIDEA

javascript node.js reactjs intellij-idea

21,732

Solution 1

You're trying to execute a React program in Node.js, but it is designed to run in a web browser. There is no DOM in Node.js for you to manipulate. That just isn't going to work.

Since the program you are running uses JSX, you'll need to transpile it before it will work there too.

Go back to the tutorial. The section on setting up a local development environment provides an approach to getting up and running or you can look at a selection of toolchains that you can choose from.

Solution 2

check your current version

node -v

Update you node version to latest 13.X

Update nodejs

And Execute to create React App

npx create-react-app my-app
cd my-app
npm start

reference To create react app

and cross check it your existing Application, If needed

Solution 3

If you want neither using create-react-app nor settings up webpack and other tools, I can suggest starting with a simple HTML page that includes links to babel-standalone and required libraries, see https://reactjs.org/docs/add-react-to-a-website.html#quickly-try-jsx:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>

  <div id="root"></div>
  <script type="text/babel">

    function Hello(props) {
      const [name, setName] = React.useState(props.name);
      return (
        <h1 onClick = {() => setName(Math.random().toString(36).substring(5))}>
          Hello {name}
        </h1>
      );
    }
    ReactDOM.render(
      <Hello name='World'/>,
      document.getElementById('root'),
    );
  </script>
</body>
</html>

Create an empty project, add a new HTML file, paste the content above in it, then right-click the file and choose either Run or Debug from its right-click menu to open application in browser

Solution 4

replace your line

import React from 'react';

with this one

const React = require("react")

View more solutions

21,732

Author by

Pavel Petrashov

Updated on July 29, 2021

Comments

Pavel Petrashov almost 3 years

I try to create hello world applications by react js. I created the NodeJS application in IntelliJ IDEA. Create a helloworld.js file. and add this code to this file

import React from 'react';

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

Added react-dom dependency to package.json. Made npm install command. Start Application

{
  "name": "testjsapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react-dom": "^16.12.0"
  }
}

Error:

"C:\Program Files\nodejs\node.exe" D:\projects\testjsapp\hello\helloworld.js
D:\projects\testjsapp\hello\helloworld.js:2
import React from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Module._compile (internal/modules/cjs/loader.js:891:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
    at internal/main/run_main_module.js:17:11

Process finished with exit code 1