Why do i get this error message on xstate createMachine

Question

I just created react app by using npx create-react-app my-app --template typescript

then installed xstate using npm install xstate --save

after importing import { createMachine } from "xstate"; i get the error provided on screenshot, couldn't find any answer to that problem, any ideas?

my code:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { createMachine } from "xstate";

function App() {
  return (
    <div>Hello</div>
  );
}

export default App;

ERROR in node_modules/xstate/dist/declarations/src/setup.d.ts:54:21
TS1139: Type parameter declaration expected.
    52 |     [K in RequiredSetupKeys<TChildrenMap>]: unknown;
    53 | }): {
  > 54 |     createMachine: <const TConfig extends MachineConfig<TContext, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>>(config: TConfig) => StateMachine<TContext, TEvent, Cast<ToChildren<ToProvidedActor<TChildrenMap, TActors>>, Record<string, AnyActorRef | undefined>>, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, ToStateValue<TConfig>, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>;
       |                     ^^^^^
    55 | };
    56 | export {};
    57 |

ERROR in node_modules/xstate/dist/declarations/src/setup.d.ts:54:27
TS1005: ';' expected.
    52 |     [K in RequiredSetupKeys<TChildrenMap>]: unknown;
    53 | }): {
  > 54 |     createMachine: <const TConfig extends MachineConfig<TContext, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>>(config: TConfig) => StateMachine<TContext, TEvent, Cast<ToChildren<ToProvidedActor<TChildrenMap, TActors>>, Record<string, AnyActorRef | undefined>>, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, ToStateValue<TConfig>, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>;
       |                           ^^^^^^^
    55 | };
    56 | export {};
    57 |

ERROR in node_modules/xstate/dist/declarations/src/setup.d.ts:54:35
TS1128: Declaration or statement expected.
    52 |     [K in RequiredSetupKeys<TChildrenMap>]: unknown;
    53 | }): {
  > 54 |     createMachine: <const TConfig extends MachineConfig<TContext, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>>(config: TConfig) => StateMachine<TContext, TEvent, Cast<ToChildren<ToProvidedActor<TChildrenMap, TActors>>, Record<string, AnyActorRef | undefined>>, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, ToStateValue<TConfig>, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>;
       |                                   ^^^^^^^
    55 | };
    56 | export {};
    57 |

ERROR in node_modules/xstate/dist/declarations/src/setup.d.ts:54:402
TS1005: ')' expected.
    52 |     [K in RequiredSetupKeys<TChildrenMap>]: unknown;
    53 | }): {
  > 54 |     createMachine: <const TConfig extends MachineConfig<TContext, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>>(config: TConfig) => StateMachine<TContext, TEvent, Cast<ToChildren<ToProvidedActor<TChildrenMap, TActors>>, Record<string, AnyActorRef | undefined>>, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, ToStateValue<TConfig>, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>;
       |

                                                                                                                                    ^      
    55 | };
    56 | export {};
    57 |

ERROR in node_modules/xstate/dist/declarations/src/setup.d.ts:54:404
TS1434: Unexpected keyword or identifier.
    52 |     [K in RequiredSetupKeys<TChildrenMap>]: unknown;
    53 | }): {
  > 54 |     createMachine: <const TConfig extends MachineConfig<TContext, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>>(config: TConfig) => StateMachine<TContext, TEvent, Cast<ToChildren<ToProvidedActor<TChildrenMap, TActors>>, Record<string, AnyActorRef | undefined>>, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, ToStateValue<TConfig>, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>;
       |

                                                                                                                                      ^^^^^^^
    55 | };
    56 | export {};
    57 |

ERROR in node_modules/xstate/dist/declarations/src/setup.d.ts:54:411
TS1128: Declaration or statement expected.
    52 |     [K in RequiredSetupKeys<TChildrenMap>]: unknown;
    53 | }): {
  > 54 |     createMachine: <const TConfig extends MachineConfig<TContext, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>>(config: TConfig) => StateMachine<TContext, TEvent, Cast<ToChildren<ToProvidedActor<TChildrenMap, TActors>>, Record<string, AnyActorRef | undefined>>, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, ToStateValue<TConfig>, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>;
       |


  ^
    55 | };
    56 | export {};
    57 |

ERROR in node_modules/xstate/dist/declarations/src/setup.d.ts:54:413
TS1128: Declaration or statement expected.
    52 |     [K in RequiredSetupKeys<TChildrenMap>]: unknown;
    53 | }): {
  > 54 |     createMachine: <const TConfig extends MachineConfig<TContext, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>>(config: TConfig) => StateMachine<TContext, TEvent, Cast<ToChildren<ToProvidedActor<TChildrenMap, TActors>>, Record<string, AnyActorRef | undefined>>, Toe<TConfig>, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TAce<TConfig>, TTag,tors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>;                         rizedObject<TActi


                                                       ^^
    55 | };
    56 | export {};
    57 |

ERROR in node_modules/xstate/dist/declarations/src/setup.d.ts:55:1
TS1128: Declaration or statement expected.
    53 | }): {
    54 |     createMachine: <const TConfig extends MachineConfig<TContext, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TInput, TOutput, TEmitted, ResolveTypegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmit<TGuards>, TDelay, TTag, TEmitted>>>(config: TConfig) => StateMachine<TContext, TEvent, Cast<ToChildren<ToProvidedActor<T<string, AnyActorRef | undefinChildrenMap, TActors>>, Record<string, AnyActorRef | undefined>>, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedOtateValue<TConfig>, TTag, TInpbject<TActions>, ToParameterizedObject<TGuards>, TDelay, ToStateValue<TConfig>, TTag, TInput, TOutput, TEmitted, ResolveTyObject<TActions>, ToParameteripegenMeta<TypegenDisabled, TEvent, ToProvidedActor<TChildrenMap, TActors>, ToParameterizedObject<TActions>, ToParameterizedObject<TGuards>, TDelay, TTag, TEmitted>>;
  > 55 | };
       | ^
    56 | export {};
    57 |

Answer 1

You must use TypeScript version 5 and higher, which includes support for const type parameters. See https://stately.ai/docs/typescript for more information.