Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to share Svelte store between hydrated components (in dev mode)

See original GitHub issue

According to the docs, hydrated components should be able to share a store:

With partial hydration you end up with multiple root components instead of one main component root. (Don’t worry, you can still use Svelte stores to allow them to easily share state across them.) ―

However I’m unable to get this to work. The hydrated component bundles appear to each have their own copy of the store. Do you have a working example you can share? Maybe even add it to the Elderjs/template?

This is a simplified version of my unsuccessful setup (inspired by the Svelte tutorial: writable stores):


import '../../components/CountDisplay.svelte';
import '../../components/CountIncrementer.svelte';
<CountDisplay hydrate-client={{ }} />
<CountIncrementer hydrate-client={{ }} />


import { writable } from 'svelte/store';
export const count = writable(0);


import { count } from './stores.js';
let count_value;

count.subscribe(value => {
  count_value = value;

<h1>The count is {count_value}</h1>


import { count } from './stores.js';

function increment() {
  count.update(n => n + 1);

<button on:click={increment}> + </button>

I didn’t get this to work. So instead I ended up sharing a store by exposing it to the window object onMount:


import { writable } from 'svelte/store';
const count = writable(0);

onMount(() => {
  window.count = count;

This way other hydrated components have access via window.count.subscribe/window.count.update/etc.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

tgerstleforevercommented, Mar 5, 2021

For anyone looking for this, it looks like you can set legacy mode in the elder.config.js to allow svelte stores to work in dev. You can set this to just run in legacy mode during development, since stores work in production already. module.exports = { … legacy: process.env.NODE_ENV === ‘development’ ? true : false, … }

You can also edit the dev server port by setting an env variable in the command like

SERVER_PORT=3001 npm run start

nickreesecommented, Sep 26, 2020

Yup, this was the issue.

Stores are only working with production builds where they are rolled up together. 😕


(Had to change a few of the file paths but got it working no prob)

This is a trade off of slower bundling during dev.

We could add a flag in the Elder.js config to always bundle together in watch mode and have it skip terser/babel.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Hydration not working in Layout.svelte #75 - GitHub
For instance I have a stores.js from which I export a writable store and it seems like two different components both get their...
Read more >
Docs • Svelte
In development mode (see the compiler options), a warning will be printed if no ... For values shared between multiple components, consider using...
Read more >
How to Use Svelte Stores to Share Data Between Components
Learn about how to use Svelte stores to share data between sibling components instead of passing data up and down the component hierarchy....
Read more >
Testing Svelte stores and mocking dependencies
I import stores into my components, but they are failing because the localstorage that hydrates the store is not available on import. I...
Read more >
Working with Svelte stores - Learn web development | MDN
Sometimes, your app state will need to be accessed by multiple components that are not hierarchically related, or by a regular JavaScript module ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found