Unable to use Store server-side due to ESM

[timhall]

I'm really liking svelte/store, but it's a little tricky to get it working server-side due to ES modules. I was able to get it working with the following, but I'm wondering if there are other possibilities:

// Currently, store is exported as ES Module
const esm = require('@std/esm')(module, { esm: 'js' });
const { Store } = esm('svelte/store');

// Compile component
require('svelte/ssr/register')({ store: true });
const app = require('./src/App.html');

I was thinking there are a couple of possibilities:

• Bundle with compiler, use const { Store } = require('svelte') server-side
• Compile svelte/store with svelte/ssr/register

[Rich-Harris]

Hmm, yeah. Not sure how I overlooked that!

I'm not totally in favour of the first option — I think it's better if there's only one way to access it, otherwise it gets confusing, and we wouldn't want people accidentally importing directly from svelte on the client-side. I'm not quite sure what you mean by the second option?

A third option would be to rename store.js -> store.mjs and generate a UMD bundle from it called store.js. I'm not wild about the whole .mjs movement, but it does seem like a reasonable solution to this particular problem. Thoughts?

[Rich-Harris]

On second thoughts that would be a breaking change for people already importing from svelte/store.js. Perhaps the UMD version should be svelte/store.umd.js instead.

[btakita]

My 2¢

I converted my modules to *.mjs & it was a relatively smooth transition to native nodejs ES6 modules. For posterity, to paraphrase their justification, it was the "least bad" solution & distinguishes between files using ES module & node modules. *.mjs files also work seamlessly when using rollup or node.

Maybe I'm misunderstanding your reticence, but it's my understanding that import 'svelte/store' would resolve to svelte/store.mjs

I'm not familiar about the umd use case, but it seems natural to transpile svelte/store.umd.js from svelte/store.mjs

[Rich-Harris]

By 'breaking change' I mean that anyone doing this...

import { Store } from 'svelte/store.js';

...would find their apps misbehaving if there was no longer an ES module at that location. Maybe I'm the only person who does that so I shouldn't worry, but technically it violates semver...

[btakita]

You could have a deprecated svelte/store.js reference svelte/store.mjs, which would keep the change from breaking. That way there would be a heads up to change the reference.

[timhall]

My suggestion for option 2 would be for svelte/ssr/register to compile svelte/store, like the following:

// ES Module
const { Store } = require('svelte/store')

// Bundled / compiled
require('svelte/ssr/register')({ store: true });
const { Store } = require('svelte/store');

Not a great solution, but somewhat intuitive with the store: true option (at least for v1) and since register is being used anyways.

Another alternative, could put it under the ssr namespace

const { Store } = require('svelte/ssr/store')

But, universal is probably the best bet, so I'm for store.umd.js

[PixievoltNo1]

To add in favor of store.umd.js, it would be helpful not just on the server side, but on any project not using a bundler. One of Svelte's unspoken strengths is that you can get started with just svelte-cli (or gulp-svelte) and learn the rest of the tooling later, but you currently can't use Store that way.

I'd be willing to make a PR, but it would be the first thing I've ever done with Rollup.

[Rich-Harris]

As of 1.49.2 the package exposes svelte/store.umd.js

[Rich-Harris]

Just to clarify — that file creates a new global svelte variable with a Store property, or adds Store to an existing window.svelte, for the sake of future-proofing.

So you can use it like so:

<script src='https://unpkg.com/svelte/store.umd.js'></script>
<script>
  var store = new svelte.Store();
</script>