How to fix: valtio-history not working?

[piouson]

Please help...

repo example - https://github.com/piouson/ssr-example

1. Init project

   npm init ssr-app ssr-example
   
   ✔ Select ssr framework version (v6 or v7): › v7(Recommend...)
   ✔ Select a framework: › nestjs-react18-ssr
   ✔ Select build tools which you want to use › Rspack
   
   cd ssr-example
   npm i
   npm i -D @swc/cli @swc/core
   npm i valtio-history@0.3.5

2. web/store/modules/search.ts

   - import { proxy } from 'valtio'
   + import { proxyWithHistory } from 'valtio-history'
   
   - export const state = proxy({
   + export const state = proxyWithHistory({ 

3. web/components/search/index.tsx

   // ...
   + import { state } from "@/store/modules/search";
   
   + const json = (obj) => JSON.parse(JSON.stringify(obj));
   
   function Search() {
     const { searchState } = useStore<{ searchState: typeof state }>();
     const snap = useSnapshot(searchState);
   + const proxySnap = useSnapshot(state);
   + console.log({ snap: json(snap), searchState: json(searchState), state: json(state), proxySnap: json(proxySnap) });
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       searchState.value.searchText = e.target.value;
   +   state.value.searchText = e.target.value;
     };
     const toSearch = () => {
   +   proxySnap.undo(); // ✔ works client-side
   +   snap.undo(); // ❌ Uncaught ReferenceError: proxyObject is not defined
     };
   // ...

4. npm start
   

[zhangyuang]

I haven't used valtio-history before, but it seems to use a proxy object from the valtio library at its core. The information I can provide is that searchState is an object wrapped by a valtio proxy. Therefore, you should look for the problem in your own usage, or investigate the source code of the SSR framework.

[piouson]

Alright, thanks for sharing the framework link. Do you have other helpful resources for contributing to the repo. I might need better understanding first.

Did you know that valtio computed properties with getter also do not work, maybe they are related? Maybe I can investigate computed properties issue first, since valtio-history is not used in template..

[zhangyuang]

can you provide a reproduce about computed proerty in valtio？ 发自我的iPhone

…

------------------ Original ------------------ From: piouson ***@***.***> Date: Wed,Dec 3,2025 10:44 PM To: zhangyuang/ssr ***@***.***> Cc: yuuang ***@***.***>, Comment ***@***.***> Subject: Re: [zhangyuang/ssr] How to fix: valtio-history not working?(Discussion #358) Alright, thanks for sharing the framework link. Do you have other helpful resources for contributing to the repo. I might need better understanding first. Did you know that valtio computed properties with getter also do not work, maybe they are related? Maybe I can investigate computed properties issue first, since valtio-history is not used in template.. image.png (view on web) — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[zhangyuang]

Refer to the official document about computed property, this phenomenon is expected. Snapshot will freeze value.

[piouson]

that's not right.
the behaviour of direct snapshot is not the same as the behaviour of useStore snapshot. they should be the same regardless of the contradictory document.

See updated code example to compare direct snapshot with useStore snapshot, it's not right: https://github.com/piouson/ssr-example@getter

[zhangyuang]

I find this problem, fix it in ssr-plugin-react@7.0.6

[piouson]

you so awesome!!

[piouson]

after testing valtio-history some more, I think the cloning in ssr and in valtio-history, and the server-side logic in ssr messes with the function bindings.. any function I tie to state does not work with useStore

export const state = proxyWithCustomHistory({
  text: '',
  undo() {/* ... */},
  redo() {/* ... */},
  ...getters
})
export const history = () => {
  state.undo() // does not work
  state.redo() // does not work
}
export const history2 = () => {
  const { state2 } = useStore<{ state2: any }>()
  state2.undo() // does not work
  state2.redo() // does not work
}

I had to write a custom history library using useStore, something like:

export const state = proxy({ text: '', ...getters })
export const undo = () => {
  const { state } = useStore<{ state: any }>()
  // undo logic with useStore state works
}
export const redo = () => {
  const { state } = useStore<{ state: any }>()
  // redo logic with useStore state works
}