The dev server is stuck when using a type alias for the module typesafe-actions

[MeLlamoPablo]

Hello! First of all, I would like to say that I'm not positive that this issue is caused by react-scripts. It might be an issue in babel-loader, in the module typesafe-actions, or even in typescript itself!

But I didn't know how to determine where to start, and I think that it's reasonable to open the issue here.

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

This issue is not related to anything in the Troubleshooting guide.

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 Starting the development server... 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.

Thank you so much for your help!

[MeLlamoPablo]

I have updated the dependencies in the demo repo:

diff --git a/package.json b/package.json
index 4981861..8eb25a4 100644
--- a/package.json
+++ b/package.json
@@ -3,17 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@types/jest": "24.0.6",
-    "@types/node": "11.9.4",
-    "@types/react": "16.8.4",
+    "@types/jest": "24.0.11",
+    "@types/node": "11.11.3",
+    "@types/react": "16.8.8",
     "@types/react-dom": "16.8.2",
     "react": "^16.8.2",
     "react-dom": "^16.8.2",
     "react-redux": "^6.0.1",
-    "react-scripts": "2.1.5",
+    "react-scripts": "2.1.8",
     "redux": "^4.0.1",
     "typesafe-actions": "^3.1.0",
-    "typescript": "3.3.3"
+    "typescript": "3.3.3333"
   },
   "scripts": {
     "start": "react-scripts start",

The bug is still happening, but now it is getting stuck on Files successfully emitted, waiting for typecheck results..., which leads me to think that this is an issue in fork-ts-checker-webpack-plugin.

[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

[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.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.