Refferenceerror: не удается найти переменную react

Я не совсем уверен, почему я получаю эту ошибку, поскольку реакция присутствует в node_modules и импортирована в указанный файл

enter image description here

Упомянутый файл App.js - это

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const unstated_1 = require("unstated");
const layouts_1 = __importDefault(require("./layouts"));
const App = () => (<unstated_1.Provider>
    <layouts_1.default />
  </unstated_1.Provider>);
exports.default = App;

Это вывод TypeScript ^. Не транспилированная версия выглядит следующим образом

import React from 'react'
import { Provider as StateProvider } from 'unstated'
import AppRoot from './layouts'

const App = () => (
  <StateProvider>
    <AppRoot />
  </StateProvider>
)

export default App

Структура моего проекта выглядит так

packages/
  native-app/
    node_modules/
    ios
    index.js
    src/
      App.tsx
    dist/
      native-app/
        src/
          App.js
      server/
  server/

Я чувствую, что это может быть связано с вложением в папку dist? Моя основная реакция на родной index.js импортирует приложение, подобное этому

import { AppRegistry } from 'react-native'
import App from './dist/native-app/src/App'

AppRegistry.registerComponent('MyApp', () => App)

Примечание: это похоже на монорепозицию, но я не использую ничего вроде рабочих пространств пряжи или lerna, пакеты устанавливаются внутри каждой папки, то есть native-app и server с некоторыми распространенными devDependencies, такими как typescript, tslint и prettier, установленными в корневой папке, где находится packages.

В проекте используется следующий tsconfig

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "lib": ["es2017"],

    "removeComments": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,

    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "alwaysStrict": true,

    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "exclude": [
    "scripts",
    "packages/native-app/dist",
    "packages/server/functions/dist"
  ]
}

И пакет json для native-app

{
  "name": "skimitar-app",
  "version": "1.0.0",
  "description": "Skimitar app",
  "private": true,
  "dependencies": {
    "asq-react-native-device": "1.2.2",
    "asq-react-native-facebook-log-in": "1.1.0",
    "asq-react-native-google-sign-in": "1.2.0",
    "asq-react-native-sensors": "1.1.0",
    "react": "16.4.2",
    "react-native": "0.56.0",
    "react-native-firebase": "4.3.8",
    "react-native-svg": "6.5.2",
    "unstated": "2.1.1"
  },
  "devDependencies": {
    "@types/react": "16.4.13",
    "@types/react-native": "0.56.17"
  }
}

Могу я увидеть ваш package.json?

xSkrappy 10.09.2018 10:35

Все тот же?

xSkrappy 10.09.2018 10:42

@xSkrappy должен быть внизу вопроса, может быть, нужно обновить?

Ilja 10.09.2018 10:43
3
3
4 843
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

При использовании React с TypeScript измените операторы импорта React следующим образом:

import * as React from 'react';

Вы также можете изменить параметр module в файле tsconfig.json на "es2015":

{
"compilerOptions": {
  "module": "es2015",
  ...

Это работает, но нужно ли делать это везде? В некоторых файлах есть import React, { useEffect } from 'react'

stephano 08.06.2020 21:11

Вам нужно будет либо использовать тот же импорт, либо, как упоминалось в другом месте, вы можете установить allowSyntheticDefaultImports в tsconfig, но это может работать только в зависимости от того, как создается ваш проект.

Marc Harry 18.06.2020 15:32

можно избежать использования «import * as…», установив «allowSyntheticDefaultImports»: true в разделе «compilerOptions» в tsconfig.json.

установка “allowSyntheticDefaultImports”: true не прошла.

Pablo 13.11.2019 17:52

Как говорится в документации, allowSyntheticDefaultImports (typescriptlang.org/docs/handbook/compiler-options.html) не влияет на код вывода.

Michael Bahl 05.10.2020 10:43

Другие вопросы по теме