2

Error says as this **import React, {Component} 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_enter code heremain_module.js:17:11**
LazyOne
  • 158,824
  • 45
  • 388
  • 391
mithelan
  • 190
  • 9

2 Answers2

3

Looks as if you are trying to run your React application with Node.js, by right-clicking your component .js file is choosing Run. This is not supposed to work; you have to transpile/build your application, start a server it's hosted on and then open the server URL in browser. For applications created with create-react-app, please follow the instructions from https://www.jetbrains.com/help/webstorm/2020.1/react.html#react_running_and_debugging

Muthukumar
  • 8,679
  • 17
  • 61
  • 86
lena
  • 90,154
  • 11
  • 145
  • 150
0

I am assuming you are trying to create your react app from scratch without using create-react-app cli. In that case, the ES6 imports and exports won't work because node.js doesn't support these imports/exports out of the box. They currently follow CommonJS module system. For you to achieve ES6 imports/exports you have to use babel to transpile your code from ES6 to ES5. Or according to your node version (newer version typically), there might be couple of things you can try, as mentioned in the following excellent answer on stackoverflow itself:-

https://stackoverflow.com/a/39436580/8130690

Lakshya Thakur
  • 8,030
  • 1
  • 12
  • 39