Lazy Loading and CreateRoot

[tulip pasture]

I create and manage state in a file - store.js.

export const cart = createRoot(() => { const [items, setItems] = createSignal({}); ... });

This variable is imported into various components - including one that is lazy loaded.

However, the lazy loaded component seems to reference/create a whole new "cart" variable, albeit one inheriting the current state of the existing one. Essentially, reactivity in all other (previously loaded) components "disconnects". It's not clear to me whether that's because they are still referencing the previous version, or some other issue.

If I stop loading the component lazily, the problem goes away.

Interestingly, this is not an issue when running in dev mode with a vite localhost. It only occurs on a production build, remove server.

Is my approach (trying to share state between lazily loaded and non-lazily loaded components) fundamentally wrong?

Or is something else at play?

Regards
John

[wind kernel]

It's not wrong, this is supposed to be a supported pattern. I believe there's something amiss in the bundling process that needs investigating. As a workaround, I would suggest using a context to share the state.

[tulip pasture]

Thanks. Should I report this as a possible bug on the GitHub repo? I can try to create a small example project if that helps.

[wind kernel]

Yes, please. A small reproduction repo will help.