SolidJS•9mo ago

How do I use solid for reactivity without a build step?

I like solid as a frontend library, and I want to use it as a "vanilla" state management library for reactivity. However, I'm confused why running this script without bundling does nothing:

import { createRoot, createSignal, createEffect } from "solid-js";

const root = createRoot(() => {
  const [counter, setCounter] = createSignal(0);
  createEffect(() => {
    console.log(counter());
  });

  return {
    counter,
    setCounter,
  };
});

root.setCounter(1);

import { createRoot, createSignal, createEffect } from "solid-js";

const root = createRoot(() => {
  const [counter, setCounter] = createSignal(0);
  createEffect(() => {
    console.log(counter());
  });

  return {
    counter,
    setCounter,
  };
});

root.setCounter(1);

After I bundle (using rollup or bun) and run the script, my effect runs and logs the value of counter, like I expect. How does bundling make reactivity work, even without using babel?

4 Replies

foolswisdom•9mo ago

I assume you are running this in node? The library exports a version with updates disabled (effects are just stubs in this version), for use with server side web. You need to set the appropriate flags to import the browser version I'm not sure what those are exactly, having never done it myself, but it's definitely been discussed arround here before, perhaps you can do a search

vveisardOP•9mo ago

Okay, so the root cause is conditional exports of the package.json. With node you can use the --conditions flag. Not sure for bun. I'll see what I can do, thanks!

vveisardOP•9mo ago

Found a post in a GitHub related to this, posting in case anyone stumbles across this Discord forum post https://github.com/solidjs/solid/discussions/1065#discussioncomment-2979082

GitHub

Difference between the node and browser environment · solidjs solid...

Hi, please look at this very simple and meaningless code (playground). This code use only regular Solid functions, there is no compilation and code transformations. As you can see, the createMirror...

Jarred•9mo ago

The —conditions flag was added in Bun v1.0.30, which released about 8 hours ago

Gaming

Programming

How do I use solid for reactivity without a build step?