[xstate/svelte] bundling of @xstate/svelte/lib/fsm with sveltekit & vite is broken

[benbender]

Description
If I create a new sveltekit-app:

1. npm init svelte@next xstate-sveltekit-repro
2. install its dependencies via npm i && npm add @xstate/svelte @xstate/fsm
3. add the example for the usage of @xstate/svelte/lib/fsm from the docs @ https://xstate.js.org/docs/packages/xstate-svelte/#usemachine-machine-with-xstate-fsm
4. build the app via npm run build
5. start it via npm preview

I get the following error:

> svelte-kit preview

> Cannot find module '[...]/xstate-sveltekit-repro/node_modules/@xstate/svelte/lib/fsm' imported from [...]/xstate-sveltekit-repro/.svelte-kit/output/server/app.js
Did you mean to import @xstate/svelte/lib/fsm.js?
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '[...]/xstate-sveltekit-repro/node_modules/@xstate/svelte/lib/fsm' imported from [...]/xstate-sveltekit-repro/.svelte-kit/output/server/app.js
Did you mean to import @xstate/svelte/lib/fsm.js?
    at finalizeResolution (internal/modules/esm/resolve.js:271:11)
    at moduleResolve (internal/modules/esm/resolve.js:694:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:805:11)
    at Loader.resolve (internal/modules/esm/loader.js:88:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:241:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:72:40)
    at link (internal/modules/esm/module_job.js:71:36)

Expected Result
The app should run with the production build.

Actual Result
@xstate/svelte/lib/fsm can't be imported

Reproduction
see above.

Additional context

• The app works in dev-mode. The problem seems to be rooted in the vite-build.
• Reproduced with NPM & PNPM
• Strangely the @xstate/svelte package doesn't seem to use rollup for bundling like the rest of the packages in this repo. Any reason for that?

[floratmin]

I just made it work with the description from:
https://xstate.js.org/docs/recipes/svelte.html

But contrary to the description the @rollup/plugin-replace breaks the build. Without this step everything seems to work.

[benbender]

@floratmin svelte@next is sveltekit, which uses vite as its bundler. Additionally I did no extra steps - as stated above. So I don't think both problems are related.

[floratmin]

No that's right I use it with SvelteKit.

[floratmin]

No I use it with the full xstate package, I tried it also with @sveltejs/adapter-static where it also worked.

[floratmin]

I just replaced xstate with @xstate/fsm and it does not work. I get the error :
'default' is not exported by node_modules/@xstate/fsm/es/index.js, imported by src/lib/state/login.ts

[floratmin]

@benbender This could related sveltejs/kit#928

[annaghi]

4. build the app via npm run build
5. start it via npm preview

I get the following error:

@benbender What happens when you run npm run preview?

[benbender]

Oh sh*t. You're right... Its still broken - my memory betrayed me as I thought that it broke when building. sorry for the noise!

Btw, my old workaround:

    import { useMachine } from '@xstate/svelte/lib/fsm.js';
    import * as pkg from '@xstate/fsm';

    const { createMachine, assign } = pkg.default ? pkg.default : pkg;

Works for now even if its not pretty...

[annaghi]

No problem :) Thanks for confirming!

With your workaround we have two possible solutions now! Good. 👍

[benmccann]

It's best to used named imports instead of default imports for this reason. Then it will work the same with both ESM and CJS