Basic store example is not reactive

I'm struggling to understand why this code isn't reactive

import { createEffect, createMemo, createRoot } from "solid-js/dist/solid.js";
import {
  createStore,
  type Store,
  type SetStoreFunction,
} from "solid-js/store/dist/store.js";

interface FooWorld {
  readonly store: {
    foo: Store<FooWorldState>;
    setFoo: SetStoreFunction<FooWorldState>;
  };
}

/**
 * Bar state for a foo world.
 */
interface FooWorldState {
  bar: number;
}

namespace World {
  export function create(): FooWorld {
    return createRoot(() => {
      const [fooStore, setFooStore] = createStore<FooWorldState>({
        bar: 0,
      });

      const getBar = createMemo(() => fooStore.bar);

      createEffect(() => {
        console.log(`why don't I see this twice?`, getBar());
      });

      return {
        store: {
          foo: fooStore,
          setFoo: setFooStore,
        },
      };
    });
  }
}

const world = World.create();

setTimeout(() => {
  world.store.setFoo("bar", 1);
  console.log(`I see this!`, world.store.foo.bar);
}, 1000);

import { createEffect, createMemo, createRoot } from "solid-js/dist/solid.js";
import {
  createStore,
  type Store,
  type SetStoreFunction,
} from "solid-js/store/dist/store.js";

interface FooWorld {
  readonly store: {
    foo: Store<FooWorldState>;
    setFoo: SetStoreFunction<FooWorldState>;
  };
}

/**
 * Bar state for a foo world.
 */
interface FooWorldState {
  bar: number;
}

namespace World {
  export function create(): FooWorld {
    return createRoot(() => {
      const [fooStore, setFooStore] = createStore<FooWorldState>({
        bar: 0,
      });

      const getBar = createMemo(() => fooStore.bar);

      createEffect(() => {
        console.log(`why don't I see this twice?`, getBar());
      });

      return {
        store: {
          foo: fooStore,
          setFoo: setFooStore,
        },
      };
    });
  }
}

const world = World.create();

setTimeout(() => {
  world.store.setFoo("bar", 1);
  console.log(`I see this!`, world.store.foo.bar);
}, 1000);

I expect the createEffect to run twice, but it only runs once. What am I missing here?

4 Replies

peerreynders•5mo ago

I suspect that you are still pulling in the server version of Solid which isn't reactive. Compare to: https://stackblitz.com/edit/vitejs-vite-ut3nkg?file=src%2Fmain.ts&terminal=dev

peerreynders

StackBlitz

Vitejs - Vite (forked) - StackBlitz

Next generation frontend tooling. It's fast!

vveisardOP•5mo ago

That seems to be the case, but it's unclear to me why those imports are "still" resolving to the server versions of solid, despite being explicit Okay, I see the problem: solid-js/store/dist/store.js imports solid-js which then resolves to the server version because of conditional exports.

peerreynders•5mo ago

// file: index.ts
import { createEffect, createMemo, createRoot } from 'solid-js';
import {
  createStore,
  type Store,
  type SetStoreFunction,
} from 'solid-js/store';
// …

// file: index.ts
import { createEffect, createMemo, createRoot } from 'solid-js';
import {
  createStore,
  type Store,
  type SetStoreFunction,
} from 'solid-js/store';
// …

package.json:

{
  "name": "rt-cli",
  "version": "0.0.0",
  "description": "",
  "scripts": {
    "bundle": "esbuild index.ts --bundle --packages=external --platform=node --format=cjs --outfile=./index.cjs",
    "exec": "node --require solid-register ./index.cjs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "esbuild": "^0.21.5",
    "solid-js": "^1.8.17",
    "solid-register": "^0.2.5"
  }
}

{
  "name": "rt-cli",
  "version": "0.0.0",
  "description": "",
  "scripts": {
    "bundle": "esbuild index.ts --bundle --packages=external --platform=node --format=cjs --outfile=./index.cjs",
    "exec": "node --require solid-register ./index.cjs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "esbuild": "^0.21.5",
    "solid-js": "^1.8.17",
    "solid-register": "^0.2.5"
  }
}

$ pnpm run bundle

> [email protected] bundle /rt-cli
> esbuild index.ts --bundle --packages=external --platform=node --format=cjs --outfile=./index.cjs

  index.cjs  814b 

:zap: Done in 2ms

rt-cli$ pnpm run exec

> [email protected] exec /rt-cli
> node --require solid-register ./index.cjs

why don't I see this twice? 0
why don't I see this twice? 1
I see this! 1

$ pnpm run bundle

> [email protected] bundle /rt-cli
> esbuild index.ts --bundle --packages=external --platform=node --format=cjs --outfile=./index.cjs

  index.cjs  814b 

:zap: Done in 2ms

rt-cli$ pnpm run exec

> [email protected] exec /rt-cli
> node --require solid-register ./index.cjs

why don't I see this twice? 0
why don't I see this twice? 1
I see this! 1

vveisardOP•5mo ago

I also came up with the workaround to bundle beforehand, but I'm trying to use the bun runtime without bundling. I think this problem can only be truly fixed by a standalone reactivity package, which I know is in the works, so I'll close this post for now.

Gaming

Programming

Basic store example is not reactive