Some Afk Guy Posts - Answer Overflow

Some Afk Guy

•Created by Some Afk Guy on 2/15/2025 in #support

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 In vite dev: * i see the correct state of open/closed in the <Show> component In vite build: * I do not see the correct state in the <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?

7 replies

Gaming

Programming