Type error with rxjs and connected-react-router

[sneljo1]

Description

I am encountering several Type errors when use router actions from connected-react-router. Someone else already made an issue over at connected-react-router. But I believe it to be an issue with the ActionType, since this is being used to type the epics. It still works but it throws an error.

This is the full output from Typescript, it's always pretty similar.

  Overload 1 of 20, '(...args: (SchedulerLike | CallHistoryMethodAction<[string, PoorMansUnknown?]>)[]): Observable<CallHistoryMethodAction<[string, PoorMansUnknown?]>>', gave the following error.
    Argument of type 'PayloadAction<PlaylistActionTypes.SEARCH, { query?: string | null | undefined; tag?: string | undefined; refresh: boolean; } & PlaylistIdentifier>' is not assignable to parameter of type 'SchedulerLike | CallHistoryMethodAction<[string, PoorMansUnknown?]>'.
      Type 'PayloadAction<PlaylistActionTypes.SEARCH, { query?: string | null | undefined; tag?: string | undefined; refresh: boolean; } & PlaylistIdentifier>' is not assignable to type 'CallHistoryMethodAction<[string, PoorMansUnknown?]>'.
        Types of property 'type' are incompatible.
          Type 'PlaylistActionTypes.SEARCH' is not assignable to type '"@@router/CALL_HISTORY_METHOD"'.
  Overload 2 of 20, '(...args: CallHistoryMethodAction<[string, PoorMansUnknown?]>[]): Observable<CallHistoryMethodAction<[string, PoorMansUnknown?]>>', gave the following error.
    Argument of type 'PayloadAction<PlaylistActionTypes.SEARCH, { query?: string | null | undefined; tag?: string | undefined; refresh: boolean; } & PlaylistIdentifier>' is not assignable to parameter of type 'CallHistoryMethodAction<[string, PoorMansUnknown?]>'.ts(2769)

Mandatory info

• Are you extending internal types to enable type-free syntax with createReducer?

// If yes PASTE HERE your types.d.ts
declare module 'typesafe-actions' {
  interface Types {
    RootAction: RootAction;
  }
}

• Did you checked compatibility notes and migration guides?

How to Reproduce

CodeSandbox Link

https://codesandbox.io/s/react-redux-typescript-realworld-app-4c0fj

Please check the loadDataOnAppStart.

Expected behavior

Adding routeractions in Epics should not throw any errors.

Suggested solution(s)

Project Dependencies

These are my dependencies, not the one in the sandbox. But it has similar behavior.

• Typesafe-Actions Version: 5.1.0
• TypeScript Version: 3.8.3
• tsconfig.json:

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "dom",
      "es2015",
      "es2016",
      "es2017"
    ],
    "allowJs": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "esModuleInterop": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "suppressImplicitAnyIndexErrors": true,
    "strictPropertyInitialization": false,
    "strictNullChecks": true,
    "noImplicitThis": true,
    "importHelpers": true,
    "noEmitHelpers": true,
    "moduleResolution": "node",
    "pretty": true,
    "strict": false,
    "jsx": "react",
    "typeRoots": [
      "./types",
      "node_modules/@types"
    ],
    "sourceRoot": "/",
    "baseUrl": ".",
    "paths": {
      "@common/*": [
        "src/common/*"
      ],
      "@main/*": [
        "src/main/*"
      ],
      "@renderer/*": [
        "src/renderer/*"
      ],
      "@assets/*": [
        "src/assets/*"
      ],
      "@types": [
        "src/types/index"
      ]
    },
    // prod
    "sourceMap": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "./types",
    "**/*.babel.js"
  ],
  "formatCodeOptions": {
    "indentSize": 4,
    "tabSize": 4
  }
}

Environment (optional)

• Browser and Version: XXX
• OS: XXX
• Node Version: XXX
• Package Manager and Version: XXX