2

I am learning React.js and I converted this line into pure JavaScript using Babel's online converter:

const element = <div tabIndex="0"></div>;

became:

"use strict";


import { React } from "react";
var element = React.createElement("div", {
    tabIndex: "0"
});

console.log(element)

But when I run it in Webstorm, I get an exception:

import { React } from "react";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1072:16)
    at Module._compile (internal/modules/cjs/loader.js:1122:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47
eugen
  • 1,249
  • 9
  • 15
  • 1
    How do you import your javascript to your html? – boosted_duck Mar 09 '20 at 01:39
  • I am not importing javascript into html, I am just running pure JS in Webstorm. So this is not browser rendered error – eugen Mar 09 '20 at 01:46
  • 1
    In your HTML file try using type="module" in script. – AnandShanbhag Mar 09 '20 at 02:19
  • Thanks, but I am not using HTML file, all I am doing is running pure JavaScricpt code in WebStorm. I just want to log the variable. Could this be resolved somehow? – eugen Mar 09 '20 at 02:21
  • 1
    Javascript can be run either in browser or with Node.js. If you like to run your .js with Node.js from webstorm, right-click in the .js file and choose Run. – AnandShanbhag Mar 09 '20 at 02:28
  • Yes, this is exactly what I did, and here is the command run by the WebStorm: "C:\Program Files (x86)\nodejs\node.exe" C:\Users\..\test.js" – eugen Mar 09 '20 at 02:34
  • 1
    Try this solution; https://stackoverflow.com/questions/45854169/how-can-i-use-an-es6-import-in-node – AnandShanbhag Mar 09 '20 at 02:40
  • thanks, but I see that that issue is with the import keyword and I am not sure mine is – eugen Mar 09 '20 at 03:54
  • try this import React from "react"; – Chandra Shekhar Mar 09 '20 at 08:24
  • tried, it does not work – eugen Mar 09 '20 at 08:25
  • 3
    The `import` keyword is related to so called [ES modules](https://nodejs.org/api/esm.html#esm_ecmascript_modules). Node uses the CommonJS stlye module system (`require`, `module.exports`) by default. If you want to use ES modules in nodejs, you'll need Node version 12 or higher. In Node 12, you'll need to configure WebStorm to pass in the flag `--experimental-modules` to node. With Node 13 or higher, see [this previously linked answer](https://stackoverflow.com/a/45854500/996081). – cbr Mar 16 '20 at 00:07
  • 1
    This is a duplicate question of https://stackoverflow.com/questions/44213145/configure-babel-with-webstorm-to-use-es6-with-webstorm-node-js-project. Consider the solution explained in said question. – Dez Mar 16 '20 at 00:26
  • @Dez I followed the link but I could not determine if that contained an asnwer to my question. But below question provided an answer that solved. Maybe that link is also correct but I could not understand it well. – eugen Mar 16 '20 at 01:40

1 Answers1

2

First of all, let's make it clear that WebStorm is going to act as a wrapper around a JS interpreter (any interpreter you chose) and pipe any output back to you.

I'm going to stick to node 12.x.x for this example based on the ESM imports error you're getting, but you can also run Chrome in headless mode, phantomjs or anything else really, although it will be some work to pipe output.

Secondly, you will need to have installed react, either globally or accessible by node's module resolution scheme (node_modules as sibling, or any parent folder).

Finally, you need to pick a modules standard. There's an official one suitable for the browser where module resolution (importing react) is different, and also node's own, which has plenty of reading around it over here. Since we're using node, we can't pick the first one, but can only emulate it via esm or babel.

The line is gray with all this but we're still in vanilla JS territory here alright.

Now, we need to tell the interpreter that we want to be in a module scope with all our code, not send all exports to global. In the browser this is <script type="module">, but in node we either emulate it all with esm or babel, or we do this:

"C:\Program Files\nodejs\node.exe" --experimental-modules C:\Users\me\.WebStorm2019.3\config\scratches\scratch_4.mjs

Notice here that the file extension absolutely needs to be mjs. If it's not, that's a SyntaxError because we cannot use import statement outside a module.

If you choose esm, in my opinion that's a tad better because it also allows the .js extension:

"C:\Program Files\nodejs\node.exe" -r esm C:\Users\me\.WebStorm2019.3\config\scratches\scratch_4.js

With all the homework now done here is the configuration summary for WebStorm

configuration summary for WebStorm

sample output

Silviu-Marian
  • 10,565
  • 6
  • 50
  • 72
  • thanks, this works. Only one thing for a newbie like me was to install esm module, but that's just a minor thing – eugen Mar 16 '20 at 01:37