SolidJS•11mo ago

reactivity works in vite dev but fails in vite build

Hi guys

I am in in quite the rabbit hole and love a sanity check, I've tried multiple refactors, but the issue is my solids reactivity is not working...

In both environments

I see the console.log printed every time the button is clicked
I can inspect the store in the console to confirm the data is in the right state

vite dev

vite dev

i see the correct state of open/closed in the
```
<Show>
```
```
<Show>
```
component

vite build

vite build

I do not see the correct state in the
```
<Show>
```
```
<Show>
```
component (only the initial state)

store.ts

type ClosableMenu = 'settings'
type SolidStoreState = {
  user?: User
  needsLogin: boolean
  openMenus: Record<ClosableMenu, boolean> & { menuCount: number }
  onLoad?: number
}
export const [solidStore, setSolidStore] = createStore<SolidStoreState>({
  needsLogin: true,
  openMenus: {
    menuCount: 0,
    settings: false
  }
})
export const openMenu = (menu: ClosableMenu) => {
  setSolidStore('openMenus', (openMenus) => ({
    ...openMenus,
    menuCount: openMenus.menuCount + 1,
    [menu]: true
  }))
}
export const closeMenu = (menu: ClosableMenu) => {
  setSolidStore('openMenus', (openMenus) => ({
    ...openMenus,
    menuCount: openMenus.menuCount - 1,
    [menu]: false
  }))
}
export const toggleMenu = (menu: ClosableMenu) => (solidStore.openMenus[menu] ? closeMenu(menu) : openMenu(menu))

type ClosableMenu = 'settings'
type SolidStoreState = {
  user?: User
  needsLogin: boolean
  openMenus: Record<ClosableMenu, boolean> & { menuCount: number }
  onLoad?: number
}
export const [solidStore, setSolidStore] = createStore<SolidStoreState>({
  needsLogin: true,
  openMenus: {
    menuCount: 0,
    settings: false
  }
})
export const openMenu = (menu: ClosableMenu) => {
  setSolidStore('openMenus', (openMenus) => ({
    ...openMenus,
    menuCount: openMenus.menuCount + 1,
    [menu]: true
  }))
}
export const closeMenu = (menu: ClosableMenu) => {
  setSolidStore('openMenus', (openMenus) => ({
    ...openMenus,
    menuCount: openMenus.menuCount - 1,
    [menu]: false
  }))
}
export const toggleMenu = (menu: ClosableMenu) => (solidStore.openMenus[menu] ? closeMenu(menu) : openMenu(menu))

app.tsx

const App = () => {
  createEffect(() => {
    console.log('app settings is', solidStore.openMenus.settings)
  })
  return (
    <div class={styles.App}>
      <header class={styles.header}>
        <button onClick={() => toggleMenu('settings')}>Settings</button>
        <Show
          when={solidStore.openMenus.settings}
          fallback={<h6>settings closed {solidStore.openMenus.settings.toString()}</h6>}
        >
          <h1>Settings open</h1>
        </Show>
      </header>
    </div>
  )
}

const App = () => {
  createEffect(() => {
    console.log('app settings is', solidStore.openMenus.settings)
  })
  return (
    <div class={styles.App}>
      <header class={styles.header}>
        <button onClick={() => toggleMenu('settings')}>Settings</button>
        <Show
          when={solidStore.openMenus.settings}
          fallback={<h6>settings closed {solidStore.openMenus.settings.toString()}</h6>}
        >
          <h1>Settings open</h1>
        </Show>
      </header>
    </div>
  )
}

This seems like a pretty fundamental issue, but just wondering if anyone had any ideas around this :hidethepain:

is this a vite issue perhaps?

Hulkster in HeavenOP•2/15/25, 10:59 PM

~~for all future searchers reactivity is wonky in routes i will post a summary when i fix this bug lol~~ nope.mp3

Hulkster in HeavenOP•2/16/25, 2:21 AM

my latest refactor i tried making signals out of each property, but it still doesnt work despit console logging

the solid never rerenders with the correct state perhaps this is an issue with my configuration of vite build... :Thinking3D:

peerreynders•2/16/25, 3:11 AM

One red flag:

I suspect that needs to be:

React Components render … over and over and over again.
Solid Components create DOM Elements (nested in an effect) exactly once to never run again. is the result from a component; is a "thunk" that creates that result when and where it is needed (like late binding).

Also use not inside component JSX.

peerreynders•2/16/25, 4:04 AM

My re-imagining of your first example:
https://playground.solidjs.com/anonymous/1bb5ee67-d852-4fed-b828-1d200ef268bb

The problem with creating the store as a module global is that it won't be created under a reactive root/owner. You likely want to create that store inside a Provider and then make the functions available via

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Hulkster in HeavenOP•2/16/25, 10:01 PM

Thank you for the help @peerreynders :cheers:

I have fiddled with your fiddle to more accurately represent my file structure.
https://playground.solidjs.com/anonymous/27b4ad67-6edc-488d-95db-1f93410043ad

One think i thing i think i am learning from this process is that the previous toggleMenu had the potential to cause reactivity issues

The linter was giving me warnings since is being referenced as a dynamic value, but was not being created in a reactive context so could cause issues during the build?

But despite my attempts at understanding whats going on, I could not get the window to show in the build version of the app. I think im gonna try to restart from a blank new vite project because the playground at least shows a POC that my approach should work....

I tried usingContext/memos and signals just to see all of these variants work, but never in build

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

zulu•2/17/25, 8:03 AM

try updating the solid related packages to more recent version if not already doing that