Почему директива выдаёт ошибку (React + TS)?

Question

[Ostic]

Здравствуйте.
В Оф. док-ция
есть такая рекомендация, как

// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.

externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }

но когда я так делаю, то получаю ошибку типа

React is not defined

Убираешь - всё нормуль...
И попутно вопрос 2:
Почему там же в оф. доках используется
import * as React from 'react';
я же использую
import React from 'react';
Подскажите в чём дело и что я не так делаю или доки устарели, или ...

Comments

[Robur]

А когда вы так делаете, вы реакт подключаете руками на страницу?

[Ostic]

Robur, да, если я правильно понимаю о чем речь
import React from 'react';
а что, можно не подключать?

[Robur]

Ostic, если используете externals, вам надо загрузить react на странице с помощью тега<script>.
Ваше приложение будет ждать что реакт на странице уже откуда-то есть.
Это делается для того чтобы использовать кеш браузера и ускорять загрузку.
Не обязательно к использованию, минусы свои тоже есть.

Answer 1

[Антон Спирин]

1. В таком случае, React надо подключать к странице внешней библиотекой. Например так:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

2. У вас в tsconfig.js свойство allowSyntheticDefaultImports установленно в значении true.
Этот вариант удобней тем, что можно писать импорты вида:
import React, { useContext } from 'react';

Comments

[Ostic]

У вас в tsconfig.js свойство allowSyntheticDefaultImports установленно true.

вот и не угадали:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": false,
    "esModuleInterop": true,
    "jsx": "react",
    "locale": "ru",
    "lib": [
      "dom",
      "dom.iterable",
      "scripthost",
      "esnext"
    ],
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts",
    "dist"
  ]
}

[Антон Спирин]

Ostic, если свойство allowSyntheticDefaultImports не указано явно, оно берет значение из esModuleInterop. А esModuleInterop у вас в значении true.
Почитать о настройке компилятора можно тут.

[Ostic]

Антон Спирин,
да, посмотрел
если точнее, то
module === "system" or --esModuleInterop
можете пояснить директивы
1. allowSyntheticDefaultImports
2. esModuleInterop
я могу перевести, но не понимаю значения

[Антон Спирин]

Ostic,
allowSyntheticDefaultImports позволяет писать дефолтные импорты из модулей не имеющих дефолтных экспортов. Не влияет на код, просто отключает эту проверку.
esModuleInterop добавляет в код два хелпера __importStar и __importDefault

Код:

import * as React from 'react';

React.createElement('div', null);

по-умолчанию будет скомпилирован в:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
React.createElement('div', null);

с esModuleInterop: true в:

"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null)
      for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
React.createElement('div', null);

Код:

import React from 'react';

React.createElement('div', null);

c allowSyntheticDefaultImports: true будет скомпилирован в:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
react_1.default.createElement('div', null);

с esModuleInterop: true в:

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
react_1.default.createElement('div', null);