Почему я получаю ошибку при импорте React - PullRequest
Новая
       32

Почему я получаю ошибку при импорте React

2 голосов
/ 09 марта 2020

Я изучаю React. js, и я преобразовал эту строку в чистый JavaScript, используя онлайн-конвертер Babel: 

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

стал: 

"use strict";


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

console.log(element)

Но когда я бегу это в Webstorm, я получаю исключение: 

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

1 Ответ

2 голосов
/ 16 марта 2020

Прежде всего, давайте проясним, что WebStorm будет действовать как оболочка для интерпретатора JS (любого выбранного вами переводчика) и направлять любой вывод обратно к вам.

Я собираюсь придерживаться узла 12.xx для этого примера на основании получаемой вами ошибки импорта ESM, но вы также можете запустить Chrome в режиме без головы , фантом js или что-то еще на самом деле, хотя это будет некоторая работа для конвейерного вывода.

Во-вторых, вам понадобится установленный ответ, глобально или доступный по схеме разрешения модуля узла 1008 * ( node_modules как одноуровневая или любая родительская папка).

Наконец, вам нужно выбрать стандартный модуль. Есть официальный , подходящий для браузера, где разрешение модуля (реакция импорта) отличается, а также собственный узел, который имеет много чтения вокруг него здесь . Поскольку мы используем узел, мы не можем выбрать первый, но можем только эмулировать его с помощью esm или babel .

Линия серого цвета со всеми это, но мы все еще находимся на ванильной JS территории, хорошо.

Теперь нам нужно сказать интерпретатору, что мы хотим находиться в области видимости модуля со всем нашим кодом, а не отправлять весь экспорт в глобальный. В браузере это <script type="module">, но в узле мы либо эмулируем все это с помощью esm или babel, либо делаем это: 

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

Обратите внимание, что расширение файла обязательно должно быть m js , Если это не так, это SyntaxError, потому что мы не можем использовать оператор импорта вне модуля.

Если вы выберете esm, по моему мнению, это немного лучше, потому что он также допускает расширение .js: 

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

Со всеми домашними заданиями, сделанными сейчас, приведена сводная информация о конфигурации для WebStorm

configuration summary for WebStorm

sample output

...