Xstate: Compilation issues with Typescript v3.8.2 & xstate v4.6.7

[Khaled-Ch]

I am using xstate version 4.6.7 and typescript version 3.8.2.
I am having the following issue during the compilation process of my project.

node_modules/xstate/lib/interpreter.d.ts:17:22 - error TS2589: Type instantiation is excessively deep and possibly infinite.

export declare class Interpreter<TContext, TStateSchema extends StateSchema = any, TEvent extends EventObject = EventObject, TTypestate extends Typestate<TContext> = any> implements Actor<State<TContext, TEvent>, TEvent>

[davidkpiano]

Is it possible to upgrade XState?

[Khaled-Ch]

typescript v3.8.2
xstate v4.7.8
Still same error.

[davidkpiano]

It's difficult to know what the issue is without seeing a reproducible code example, please

[Khaled-Ch]

Dependencies in package.json file:

"dependencies": {
"typescript": "^3.8.2",
"xstate": "^4.7.8"
}

tsconfig.ts file:

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false,
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2016",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./src"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

The error leads to this line 17 in interpreter.d.ts

export declare class Interpreter<TContext, TStateSchema extends StateSchema = any, TEvent extends EventObject = EventObject, TTypestate extends Typestate<TContext> = any> implements Actor<State<TContext, TEvent>, TEvent> {

[Andarist]

This is not a repro case though - to investigate we need to have a runnable, complete, repro case

[kpollich]

Hi all! I'm running into the same TypeScript compilation error as @Khaled-Ch.

Here's my dependency versions per package.json

"@xstate/react": "^0.8.1",
"antd": "^4.0.0-rc.5",
"next": "^9.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"styled-components": "^5.0.1",
"xstate": "^4.7.8"

I've pushed this up to a CodeSandbox, but I haven't used their server-side templates much. Hopefully it's functional for everyone!

https://codesandbox.io/s/github/kpollich/hangman

I've also pushed the code up to GitHub here: https://codesandbox.io/s/github/kpollich/hangman

The actual error output looks like this, and comes up during Next's TypeScript compilation I think:

69:25 Type instantiation is excessively deep and possibly infinite.
    67 |
    68 | const HomePage: NextPage = () => {
  > 69 |   const [state, send] = useMachine(gameMachine);
       |                         ^
    70 |
    71 |   return (
    72 |     <PageWrapper>
undefined

I've only just started playing with xstate today, so I apologize if I'm making a beginner mistake here. Please let me know if there's any other information or context I can provide!

[davidkpiano]

@kpollich @Khaled-Ch Can you please try with @xstate/react@next?

[Khaled-Ch]

For me solved by adding this to my tsconfig.json
"skipLibCheck": true
and used latest version from typescript and xstate as well
Now able to compile without any problems

[kpollich]

@davidkpiano Updating to @xstate/react@next fixed my issues. Thank you!

[davidalekna]

I'm also getting this error and updating to "@xstate/react": "^1.0.0-rc.3" doesn't solve my issue. I'm working with a component lib and when compiling with tsc this is being thrown when using ts v3.8.2.

Update -->

I can confirm that updating both @xstate/react@next and xstate@next solved the problem for me.

[adamkl]

@davidalekna Just an FYI, xstate@next, as per npm, refers to 4.7.0-rc6 from 4 months ago. So I think you fixed the problem by downgrading xstate.

I'm running @xstate/react@^1.0.0-rc.3 and xstate@^4.7.8 and still seeing the issue.

skipLibCheck in my tsconfig.json didn't seem to help either.

[adamkl]

A follow up; downgrading from [email protected] to [email protected] got me up and running again for now.

[RomainLanz]

Hey all 👋

I have the same issue with xstate & @xstate/vue. The error occurs after upgrading to typescript 3.8.2.

The exact error is:

ERROR in /Users/romainlanz/workspace/xxx/node_modules/xstate/lib/interpreter.d.ts(17,22):
17:22 Type instantiation is excessively deep and possibly infinite.
    15 |     sync?: boolean;
    16 | }
  > 17 | export declare class Interpreter<TContext, TStateSchema extends StateSchema = any, TEvent extends EventObjec
t = EventObject, TTypestate extends Typestate<TContext> = any> implements Actor<State<TContext, TEvent>, TEvent> {
       |                      ^
    18 |     machine: StateMachine<TContext, TStateSchema, TEvent, TTypestate>;
    19 |     /**
    20 |      * The default interpreter options:
Version: typescript 3.8.2

It seems to be an issue with TypeScript itself? https://github.com/microsoft/TypeScript/issues/34933

[CodingDive]

I also got the Type instantiation is excessively deep and possibly infinite error upon calling state.matches. It was working for a while with TypeScript 3.8.2 and I got the error out of the blue.
I saw that my global typescript installation was still on an older version (you can check with npm list -g --depth=0) and upgraded my app to TypeScript 3.8.3. I now no longer see the error which makes me think that they've either already fixed it or it's some sort of caching issue. 🤔

"xstate": "4.7.8"
"@xstate/react": "0.8.1",
"typescript": "^3.8.3"

Edit: Nevermind, no error was thrown only on the first compilation. Got the same error when making changes in watch mode. Going to downgrade TypeScript now 😬

[hyusetiawan]

I am having the same problem as well, tried: skiplibcheck and update to @next version. Still not working, I am hesitant to downgrade the typescript, any other workaround I've missed until it's fully fixed?

[lozandier]

Tried a simple state machine from the Intro to Xstate Egghead.io course as a sanity check

import {Machine} from 'xstate';


export const stopLightMachine = Machine({
  id: 'stopLight',
  initial: 'red',
  states: {
    red: {
      after: { 4000: 'yellow' },
    },
    yellow: {
      after: { 1000: 'green' },
    },
    green: {
      after: { 3000: 'red' },
    },
  },
});

Tried hooking it up in the middle of creating a simple demo of it working or not only to get the error TS2589: Type instantiation is excessively deep and possibly infinite. error using the latest version of TypeScript & XState (4.8)

import {LitElement, html, css, property, customElement, query} from 'lit-element';
import {classMap} from 'lit-html/directives/class-map';

import {stopLightMachine} from "./machines/stop-light"
import {interpret} from 'xstate'

@customElement('my-element')
class MyElement extends LitElement {

  service: any;
  state: any;

  static get styles() {
    return [
      css`
        p.red {
          color: red;
        }

        p.green {
          color: green;
        }


        p.yellow: {
          color: yellow;
        }
      `
    ];
  }


  connectedCallback(){
    super.connectedCallback()
    console.log('Yoooo')

  // Error occurs
    this.service = interpret(stopLightMachine).start()


  }

  render() {
    return html`<p class=${classMap({red: true, green: true, yellow: true})}>???</p>`
  }

}

The TSConfig used

{
  "compilerOptions": {
    "target": "es2017",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": ["es2017", "dom"],
    "declaration": true,
    "sourceMap": true,
    "inlineSources": true,
    "strict": false,
    "outDir": "./",
    "skipLibCheck": true,
    "noImplicitAny": true,
    "experimentalDecorators": true,
     "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true

  },
"include": [
    "**/*"
],
"exclude": [
    "node_modules"
]
}

@davidkpiano Example glitch this occurs (Node 8 & 12 was used): https://glitch.com/edit/#!/abundant-outrageous-neighborhood?path=my-element.ts:36:54

[RomainLanz]

It's a known issue in TypeScript @lozandier.

You need to downgrade your version to make it work for the moment.

[lozandier]

@RomainLanz Tried downgrading all the way to TypeScript 3.5 w/ no luck

Update: Using <script>window.process = { env: 'development' }</script> allowed things to work again strangely enough after I stopped trying to downgrade

[gunn4r]

I'm getting this same issue with:

 "@xstate/react": "0.8.1",
    "xstate": "4.8.0",
    "typescript": "3.7.5"

Error in node_modules/xstate/lib/interpreter.d.ts(17,22):
TS2589: Type instantiation is excessively deep and possibly infinite.

[dhmacs]

Same issue here 👋

• xstate 4.8.0
• @xstate/react 0.8.1
• typescript 3.7.5 and 3.8.3

[davidkpiano]

Please try xstate@latest (4.9.0) with the latest TypeScript. This should be fixed now.

[RomainLanz]

I confirm this is fixed on my application! Thanks! 🎉

[davidkpiano]

@RomainLanz Thanks for confirming!!

[gunn4r]

Can confirm fixed on mine as well. Thanks!