Por que recebo um erro com a importação Reagir

Eugene:

Estou aprendendo React.js e eu converti esta linha em puro JavaScript usando conversor online de Babel:

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

passou a ser:

"use strict";


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

console.log(element)

Mas quando eu executá-lo em WebStorm, eu recebo uma exceção:

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

Silviu-Marian:

Primeiro de tudo, vamos deixar claro que WebStorm vai agir como um wrapper em torno de um intérprete JS (qualquer intérprete que você escolheu) e canalizar qualquer saída traseira para você.

Eu vou ficar ao nó 12.xx para este exemplo com base nas importações ESM erro que você está recebendo, mas você também pode executar Chrome no modo headless , PhantomJS ou qualquer outra coisa, realmente, embora seja um trabalho para a saída da tubulação .

Em segundo lugar, você precisa ter instalado reagir, seja globalmente ou acessível por esquema de resolução módulo do nó (node_modules como irmãos, ou qualquer pasta pai).

Finalmente, você precisa escolher um módulo padrão. Há uma oficial apropriado para o navegador onde o módulo resolução (importação reagir) é diferente, e também nó próprio, que tem abundância de leitura em torno dele por aqui . Como estamos utilizando nó, não podemos escolher o primeiro, mas só pode imitá-lo via ESM ou babel .

A linha é cinza com tudo isso, mas ainda estamos em território baunilha JS aqui tudo bem.

Agora, precisamos dizer ao intérprete que queremos estar em um escopo módulo com todo o nosso código, não enviar todas as exportações para global. No navegador este é <script type="module">, mas no nó que quer imitar tudo com esm ou babel, ou fazemos isso:

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

Note aqui que a extensão do arquivo absolutamente precisa ser mjs. Se não for, isso é um SyntaxError porque não podemos usar declaração de importação fora de um módulo.

Se você escolher esm, na minha opinião isso é um pouco melhor, porque ele também permite que a .jsextensão:

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

---

Com todo o trabalho de casa feito agora aqui é o resumo da configuração WebStorm