react-scripts imports all NodeJS types into browser-facing code

[jonrimmer]

Describe the bug

By default, the TypeScript template creates react-app-end.d.ts which includes:

/// <reference types="react-scripts" />

The react-scripts module in turn includes react-app.d.ts which has the following reference:

/// <reference types="node" />

This results in all NodeJS types being imported into the project, even if they have been excluded by setting "types": [] in the tsconfig.json. So, if I try to use setTimeout(), TypeScript sees both the DOM version of this function and the version from @types/node, which are not compatible (the latter returns an instance of the NodeJS.Timeout class instead of a numeric reference).

Even worse is that the @nodejs/types types import all the DOM types that are supported in the latest version of NodeJS. And since NodeJS supports all the same things as a modern version of Chromium, it results in very new things like BigUint64Array being treated as valid types, even if the project is explicitly targeting and older ES lib in tsconfig.json.

Did you try recovering your dependencies?

N/A

Which terms did you search for in User Guide?

typescript node types incorrectly included

Environment

  current version of create-react-app: 3.4.1
  running from /Users/jonathanrimmer/.npm/_npx/56315/lib/node_modules/create-react-app

  Binaries:
    Node: 13.8.0 - ~/.nvm/versions/node/v13.8.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.13.6 - ~/.nvm/versions/node/v13.8.0/bin/npm
  Browsers:
    Chrome: 86.0.4240.80
    Firefox: Not Found
    Safari: 14.0
  npmPackages:
    react: ^16.13.1 => 16.13.1 
    react-dom: ^16.13.1 => 16.13.1 
    react-scripts: 3.4.3 => 3.4.3 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. npx create-react-app cra-types-bug --template typescript
2. Open App.tsx
3. Add const handle: number = setTimeout(() => {}, 1000);

Expected behavior

It should work without errors.

react-scripts should reference only those specific NodeJS types, such as process that it makes available at build-time. It should not reference the entirety of NodeJS's type declarations.

Actual behavior

TypeScript thinks it is calling the Node version of setTimout and gives an error:

Reproducible demo

https://github.com/jonrimmer/cra-types-bug

1. git clone https://github.com/jonrimmer/cra-types-bug.git
2. cd cra-types-bug
3. yarn build

[malcolm-kee]

Just to clarify, in case anyone else found this issue by google, you can bypass the error by explicitly access the window object, e.g. window.setTimeout for the example above.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[ankon]

I believe the issue still exists, it just hasn't received any attention.