Stuck when using a type alias for the module typesafe-actions

[MeLlamoPablo]

I originally opened this issue in facebook/create-react-app#6467, but upon further investigation I assume that this issue is related to fork-ts-checker-webpack-plugin.

So if you may allow me, I'm gonna go ahead and copy and paste the content of the issue:

Environment

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
  Binaries:
    Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
    Yarn: 1.13.0 - /usr/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
  Browsers:
    Firefox: 65.0
  npmPackages:
    react: ^16.8.2 => 16.8.2 
    react-dom: ^16.8.2 => 16.8.2 
    react-scripts: 2.1.5 => 2.1.5 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to Reproduce

This issue is related to creating a type alias and using it.

When I develop with redux and typesafe-actions, I spotted a common pattern:

// actions.ts
import { createStandardAction } from "typesafe-actions";

export interface MyActionPayload {
    foo: string;
}

const myAction = createStandardAction()<MyActionPayload>("MY_ACTION");

// MyComponent.tsx
import { MyActionPayload } from "./actions";

interface DispatchProps {
    performMyAction: (payload: MyActionPayload) => void;
}

So I decided to abstract it to:

// actions.ts
import { createStandardAction } from "typesafe-actions";

export interface MyActionPayload {
    foo: string;
}

const myAction = createStandardAction()<MyActionPayload>("MY_ACTION");

// MyComponent.tsx
import { myAction } from "./actions";
import { Dispatcher } from "./Dispatcher";

interface DispatchProps {
    performMyAction: Dispatcher<typeof myAction>;
}

// Dispatcher.ts
import { ActionType } from "typesafe-actions";

export type Dispatcher<T> = (payload: ActionType<T>["payload"]) => void;

For some reason this does not work. The dev server gets stuck on Files successfully emitted, waiting for typecheck results... forever. However, if we inline Dispatcher it does work as expected.

// actions.ts
import { createStandardAction } from "typesafe-actions";

export interface MyActionPayload {
    foo: string;
}

const myAction = createStandardAction()<MyActionPayload>("MY_ACTION");

// MyComponent.tsx
import { myAction } from "./actions";

interface DispatchProps {
    performMyAction: (payload: ActionType<typeof myAction>["payload"]) => void;
}

There is no Typescript error, the server is just stuck. I have set up a demo repo; in order to reproduce the bug just do:

$ git clone https://github.com/MeLlamoPablo/dev-server-bug-test-repo
$ cd dev-server-bug-test-repo
$ yarn
$ yarn start

As the repo's README.md says, you can find the working version in the working branch.

I noticed that react-scripts doesn't use fork-ts-checker-webpack-plugin, but react-dev-utils/ForkTsCheckerWebpackPlugin. In order to be able to switch the checker plugin, we can just run yarn eject and we'll find the webpack config files in config/webpack.config.js.

Thank you so much for your help!

[johnnyreilly]

Given it gets stuck with Files successfully emitted, waiting for typecheck results... which is part of the create-react-app TypeScript infrastructure I have a feeling this may be cra specific.

Can you repro this with just fork-ts-checker-webpack-plugin?

Slightly out of date but here's a simple example to start you off:

https://github.com/TypeStrong/ts-loader/tree/master/examples/fork-ts-checker-webpack-plugin

[MeLlamoPablo]

Can you repro this with just fork-ts-checker-webpack-plugin?

No, I can't. I pushed a branch to my repo: fork-ts-checker-webpack-plugin and it still gets stuck, but that must be for another reason because I can't get the simplest of hello worlds running. If I apply this diff:

diff --git a/src/index.tsx b/src/index.tsx
index c24e9d8..add4adf 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(<div>Hello world!</div>, document.getElementById("root"));

The server still gets stuck on Files successfully emitted, waiting for typecheck results.... But now it is using fork-ts-checker-webpack-plugin and not react-utils/ForkTsCheckerWepackPlugin as you can see here.

[n8sabes]

Any new insights on this? I recently upgraded packages and now experiencing this same "Files successfully emitted, waiting for typecheck results..." message and horridly long build times that tax the proc. The problem occurs with TypeScript 3.4.1 and rolling back to TypeScript 3.3.3333 resolves the issue. It may be related to the new incremental build option..??

[n8sabes]

This issue appears narrow in on the root cause, a conflict between Typescript 3.4.1 and styled-components@4.2.0:

microsoft/TypeScript#30663

[n8sabes]

This issue was just resolved and should be closed. See: microsoft/TypeScript#30663