Create-react-app: "npm run build" hangs with "UnhandledPromiseRejectionWarning", using TypeScript and a functional component with `defaultProps`

[agwells]

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

$ npm --version
6.9.0

Environment

$ npx create-react-app --info

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 16.04.6 LTS (Xenial Xerus)
    CPU: x64 Intel(R) Core(TM) i7-2600 CPU @ 3.40GHz
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.12.3 - /usr/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Browsers:
    Chrome: flash.
Chromium 73.0.3683.75 Built on Ubuntu , running on Ubuntu 16.04
    Firefox: 66.0.1
  npmPackages:
    react: ^16.8.5 => 16.8.5 
    react-dom: ^16.8.5 => 16.8.5 
    react-scripts: 2.1.8 => 2.1.8 
  npmGlobalPackages:
    create-react-app: 2.1.8

Steps to Reproduce

This bug seems to require a fairly specific set of steps to reproduce it. I discovered it after upgrading my existing project from react-scripts 2.1.3 to 2.1.8, and after some effort, I was able to pinpoint which part of the project was causing the problem. I then reproduced the problem in minimal form.

The steps seem to be:

1. Set up a new Create React App project, with typescript.
2. Create one TypeScript source code file that declares an interface, and implements a function that uses that interface as its return type. Export the function, but not the interface.
3. Create another Typescript source code file, that implements a function. After the function body, add a static property to the function, that uses the return value of the function exported in step 2.
4. Save everything and run npm run build

Expected Behavior

The build process finishes successfully, in under 10 seconds, with output like this:

$ time npm run build

> [email protected] build /path/to/my/project
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  36.81 KB  build/static/js/2.f885ce20.chunk.js
  762 B     build/static/js/runtime~main.a8a9905a.js
  550 B     build/static/js/main.0748b6c2.chunk.js
  539 B     build/static/css/main.8e316ad3.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://bit.ly/CRA-deploy


real    0m6.182s
user    0m10.188s
sys 0m0.524s

Actual Behavior

The command runs, but never finishes until manually killed. A few seconds into its run, it prints this message:

$ time npm run build

> [email protected] build /code/cra-project
> react-scripts build

Creating an optimized production build...
(node:29773) UnhandledPromiseRejectionWarning: Error: Debug Failure. Diagnostic emitted without context
    at throwDiagnostic (/code/cra-project/node_modules/typescript/lib/typescript.js:80390:61)
    at handleSymbolAccessibilityError (/code/cra-project/node_modules/typescript/lib/typescript.js:80461:33)
    at Object.trackSymbol (/code/cra-project/node_modules/typescript/lib/typescript.js:80480:13)
    at lookupSymbolChain (/code/cra-project/node_modules/typescript/lib/typescript.js:34535:33)
    at symbolToTypeNode (/code/cra-project/node_modules/typescript/lib/typescript.js:34687:29)
    at typeToTypeNodeHelper (/code/cra-project/node_modules/typescript/lib/typescript.js:33966:27)
    at addPropertyToElementList (/code/cra-project/node_modules/typescript/lib/typescript.js:34352:59)
    at createTypeNodesFromResolvedType (/code/cra-project/node_modules/typescript/lib/typescript.js:34302:25)
    at createTypeNodeFromObjectType (/code/cra-project/node_modules/typescript/lib/typescript.js:34135:35)
    at createAnonymousTypeNode (/code/cra-project/node_modules/typescript/lib/typescript.js:34087:42)
(node:29773) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:29773) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Reproducible Demo

https://github.com/agwells/create-react-app-bug-example

// File from step 2 of reproduction steps
interface NotExportedInterface {}

export function exportedFunction(): NotExportedInterface {
  return {};
}

// File from step 3 of reproduction steps
import { exportedFunction } from './myfunction';

export function MyComponent() {
  return null;
}
MyComponent.defaultProps = {
  myProp: exportedFunction(),
};

[agwells]

I did some experimenting, and found that the problem seems to be with fork-ts-checker-webpack-plugin and the useTypescriptIncrementalApi setting. If I manually edit my node_modules/react-scripts/config/webpack.config.js file, and change useTypescriptIncrementalApi from true to false, then it compiles successfully.

Fortunately, it looks like I can work around it by slightly changing my code. If I do any of these things, it will also compile successfully:

• Change the component from a functional component to a class component
• Call the exported function in a different part of the code (anywhere but a static property of a function)
• Export the interface that's being used as a return type

So, it's probably a fairly rare issue. The main difficulty with it, is that the error message provided no information about which part of my code was causing the problem. I wound up having to add some console.dir() statements in /node_modules/typescript/lib/typescript.js to find out which file was causing this.

[agwells]

I also tried hacking my react-dev-utils to use the recently released version 1.0.0 of fork-ts-checker-webpack-plugin, because I saw in its changelogs that there had been some useTypescriptIncrementalApi-related changes since 1.0.0-alpha.6. However, that did not fix the problem.

[ianschmitz]

/cc @johnnyreilly have you seen this behavior?

[johnnyreilly]

No I haven't - I've asked @agwells to try seeing if he can reproduce it outside of create-react-app:

https://github.com/Realytics/fork-ts-checker-webpack-plugin/issues/234#issuecomment-476988479

I'm going to try and help @agwells investigate it if he's game.

[agwells]

With @johnnyreilly 's help, I've determined it's probably an underlying TypeScript bug. Specifically, this one: https://github.com/Microsoft/TypeScript/issues/29672

So I'll close this issue then. :)