Bug: @xstate/svelte + @xstate/fsm does not work with vite

[andy1li]

Description

An error occurs when using @xstate/svelte and @xstate/fsm with vite.

Expected result

Well, at least the code from the official doc should work.

Actual result

Uncaught Error: Function called outside component initialization
    at get_current_component (index.js:956:15)
    at onDestroy (index.js:969:5)
    at useMachine (fsm.js:10:18)
    at instance (App.svelte? [sm]:13:27)
    at init (index.mjs:1876:11)
    at new App (App.svelte? [sm]:16:19)
    at createProxiedComponent (svelte-hooks.js:341:9)
    at new ProxyComponent (proxy.js:242:7)
    at new Proxy<App> (proxy.js:349:11)
    at main.ts:3:13

Reproduction

https://github.com/andy1li/xstate-bug-report

Additional context

"@xstate/fsm": "^2.0.0", "@xstate/svelte": "^2.0.0", "xstate": "^4.32.1"

[Andarist]

As a workaround you can use this in your project:

diff --git a/src/App.svelte b/src/App.svelte
index 6d05d22..a8798f7 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { createMachine, assign } from '@xstate/fsm'
-  import { useMachine } from '@xstate/svelte/lib/fsm'
+  import { useMachine } from '@xstate/svelte/es/fsm'
 
   const machine = createMachine({
     id: 'machine',

[andy1li]

Thank you, Andarist! I'll try it out~

[enyo]

The workaround described here didn't work for me.

EDIT: Actually, the issue was that I didn't have a direct dependency on @xstate/svelte so svelte couldn't properly preprocess the package. After adding it, all is working fine now.

[Andarist]

Since on the next branch, we discontinued @xstate/fsm package (see here) - I think that this issue can be closed now as it's no longer applicable.

@xstate/fsm continues to work so you don't need to refactor your code if you care about its lightweight bundlesize.