TechQA.

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

45.7k views Asked by At

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
javascript node.js reactjs intellij-idea
Original Q&A
9

There are 9 answers

0
Quentin On

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.

0
Mohan Ohanra On

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

0
lena On

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

0
Micheal N.D On

Well i came across same problem, i realized I wasn't doing something right. First once you already create a react app using react-create-app And you closed the project or run another project folder, if you want to start that project again Make sure the folder path is correct then simply type npm start in the terminal that will solve the problem.

1
Webra On

replace your line

import React from 'react';

with this one

const React = require("react")
0
Qiang Yao On

I had this problem because I imported a Module from the client client to the server folder. Although the module was not used, it seems this kind of import is forbidden,

0
user15625911 On

Already the Folder Called Src inside your Reactapp --> Goto that Src Directory and Replace App.js with your code then go back to ReactApp Directory and Run the code npm start ..It works for me..

0
Siddharth Yadav On

For me, it worked when I passed an argument to transpile imports on the fly like below -

// transpile imports on the fly
require("@babel/register")({
    ignore: [/(node_modules)/],
    presets: ["@babel/preset-env", "@babel/preset-react"],
});

Also, I had a babel.config.js in the same folder as that of package.json for the server-side.

module.exports = {
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-async-to-generator",
    "@babel/transform-arrow-functions",
    "@babel/proposal-object-rest-spread",
    "@babel/proposal-class-properties",
],

};

0
progonkpa On

I saw this issue when I wanted to debug my React app in IntelliJ which you do by running a JavaScript configuration in debug mode by e.g. right-click app.js > debug.

However, debugging doesn't work if your app isn't running already via npm start in terminal or right-click -> run on app.js.

So it's a two step process (in case of debugging), without step 1, syntax error message.

Related Questions in JAVASCRIPT

Related Questions in NODE.JS

Related Questions in REACTJS

Related Questions in INTELLIJ-IDEA

Popular Questions

Trending Questions