CODEWITHSUNDEEP
javascriptnode.jsreactjsintellij-idea
Pavel Petrashov
Pavel Petrashov

Reputation: 1262

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

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

Upvotes: 6

Views: 50338

Answers (9)

progonkpa
progonkpa

Reputation: 3940

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.

Upvotes: -1

Siddharth Yadav
Siddharth Yadav

Reputation: 393

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",
],

};

Upvotes: 1

user15625911
user15625911

Reputation: 1

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..

Upvotes: -1

Qiang Yao
Qiang Yao

Reputation: 185

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,

Upvotes: 0

Webra
Webra

Reputation: 5

replace your line

import React from 'react';

with this one

const React = require("react")

Upvotes: -2

Micheal N.D
Micheal N.D

Reputation: 460

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.

Upvotes: -1

lena
lena

Reputation: 93778

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

Upvotes: 1

Mohan Ohanra
Mohan Ohanra

Reputation: 101

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

Upvotes: 4

Quentin
Quentin

Reputation: 943694

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.

Upvotes: 6

Related Questions