Create-react-app: Type error: Cannot find global value 'Promise'. TS2468

[soufDev]

Is this a bug report?

YES
(write your answer here)
When I tried to use lazy api from 16.6 version of react with Typescript, I get this Error

I'm using react-scripts 2.1.1 with typescript

and this typing file for 16.6 & 16.7.0 api

import * as React from 'react';

declare module 'react' {
  // React 16.6

  function memo<Props>(component: React.StatelessComponent<Props>): React.StatelessComponent<Props>;

  function lazy<P, Component extends React.ComponentType<P>>(
    importFn: () => Promise<Component | {default: Component}>,
  ): Component;

  const Suspense: React.ComponentType<{fallback?: React.ReactNode}>;

  // React 16.7

  type StateUpdateFunction<State> = (newState: State | ((oldState: State) => State)) => void;

  function useState<State>(
    initialState: State | (() => State),
  ): [State, StateUpdateFunction<State>];

 function useEffect(
    f: () => void | Promise<void> | (() => void | Promise<void>),
    keys?: any[],
  ): void;
  function useMutationEffect(
    f: () => void | Promise<void> | (() => void | Promise<void>),
    keys?: any[],
  ): void;
  function useLayoutEffect(
    f: () => void | Promise<void> | (() => void | Promise<void>),
    keys?: any[],
  ): void;

  function useContext<Context>(context: React.Context<Context>): Context;

  type Reducer<State, Action> = (state: State, action: Action) => State;
  function useReducer<State, Action>(
    reducer: Reducer<State, Action>,
    initialState: State,
    initialAction?: Action,
  ): [State, (action: Action) => void];

  function useCallback<Callback extends Function, R>(f: Callback, keys?: any[]): Callback;
  function useMemo<Value>(f: () => Value, keys?: any[]): Value;

  function useRef<T>(): {current: T | null};
  function useRef<T>(initial: T): {current: T};

  function useImperativeMethods<Ref, ImperativeMethods>(
    ref: React.Ref<Ref> | undefined,
    f: () => ImperativeMethods,
    keys?: any[],
  ): void;
}

Type error: Cannot find global value 'Promise'. TS2468

there is my code:

```import React, { Suspense, lazy } from 'react';
import { Spin } from 'antd';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Menu from './components/Header';
import './App.css';

const Home = lazy(() => import('./components/Home'));
function App() {
return (
<>

}>




);
}

export default App;```

Did you try recovering your dependencies?

Yes

[pladaria]

try adding "lib": ["es2018", "dom"], to tsconfig.json in compilerOptions section

tsconfig.json file:

{
    "compilerOptions": {
        ...
        "lib": ["es2018", "dom"],
        ...

[Timer]

Please read the TypeScript handbook to learn more about this.

[stunaz]

The question is : shouldn't those need to be added by default? I mean if cra by default support promise / async ... why cant we just add this config by default?

[Timer]

@stunaz we don't polyfill these by default, so this will be broken in older browsers. You need to tell TypeScript you don't care about these older browsers.

In v1 we used to polyfill this.

[soufDev]

@Timer as @stunaz said I would love if CRA generate this by default because I resolved the probleme by transpiling to ES6 or adding es2018, dom to the lib in tsConfig, but in my thought it should be supported by default, this why I opened this issue

[samvictor]

@Timer I agree, the default settings shouldn't lead to errors being thrown. That being said, I'll look into it.

[quantuminformation]

"lib": ["es2018", "dom"]
should be default

[developer239]

"lib": ["es2018", "dom"]
should be default

[mrmckeb]

@QuantumInformation @developer239 If either of you would like to create a PR for this and assign to me for review, that would be great. I think "es2018" is a sensible default.