Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
MeLlamoPablo opened this issue Mar 13, 2019 · 5 comments
Closed

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

MeLlamoPablo opened this issue Mar 13, 2019 · 5 comments

Comments

@MeLlamoPablo
Copy link

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
Copy link
Member

johnnyreilly commented Mar 13, 2019

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
Copy link
Author

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
Copy link

n8sabes commented Apr 3, 2019

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
Copy link

n8sabes commented Apr 5, 2019

This issue appears narrow in on the root cause, a conflict between Typescript 3.4.1 and [email protected]:

microsoft/TypeScript#30663

@n8sabes
Copy link

n8sabes commented Apr 5, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants