RefferenceError: Can't find variable React

Question

I'm not entirely sure why I am getting this error, as react is present in node_modules and imported in referenced file

Referred App.js file is this one

"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;

This is output from TypeScript ^. Non transpiled version is as follows

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

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

export default App

My project structure looks like this

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

I feel like this might be related to nesting inside dist folder? My main react native index.js imports App like this

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

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

Note: This looks like monorepo, but I am not using anything like yarn workspaces or lerna, packages are installed inside each folder i.e. native-app and server with some common devDependencies like typescript, tslint and prettier installed in root folder where packages are located.

Project uses following 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"
  ]
}

And package json for 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"
  }
}

@xSkrappy should be at the bottom of the question, maybe refresh needed? — Ilja
– Ilja, Commented Sep 10, 2018 at 8:43

Chris · Accepted Answer · 2020-10-05 15:17:35Z

16

When using React with TypeScript, change your React import statements like so:

import * as React from 'react';

You could also change the module option in the tsconfig.json file to "es2015":

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

edited Oct 5, 2020 at 15:17

Chris

6,6911 gold badge25 silver badges27 bronze badges

answered Sep 10, 2018 at 8:48

Marc Harry

2,43021 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

stephano Over a year ago

This works but do you have to do this everywhere? In some files I've got import React, { useEffect } from 'react'

Marc Harry Over a year ago

You would either need to change to using the same import or as mentioned elsewhere you might be able to set allowSyntheticDefaultImports in tsconfig but this might only work depending on how your project is being built.

Linden X. Quan · Accepted Answer · 2019-07-16 01:03:08Z

0

it’s possible to avoid using ‘import * as …’ by setting “allowSyntheticDefaultImports”: true in the ‘compilerOptions’ section in tsconfig.json

answered Jul 16, 2019 at 1:03

Linden X. Quan

8708 silver badges20 bronze badges

2 Comments

Pablo Over a year ago

setting “allowSyntheticDefaultImports”: true did not work.

Michael Bahl Over a year ago

As docs says allowSyntheticDefaultImports (typescriptlang.org/docs/handbook/compiler-options.html) don't take any effect of the emit code.

Collectives™ on Stack Overflow

RefferenceError: Can't find variable React

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related