S
SolidJS•15mo ago
Guillaume

Proxy error

Hi, I'm a beginner in Solid and I wrote a little app to learn it. https://github.com/gbagan/nim-machine/blob/test/src/App.tsx In this app, I have created a store state which contains an attribute config (line 42) Then, I wrote a function changeConfig which modifies the store (line 132) 
const changeConfig = (fn: (c: Config) => Config) => {
    setState(produce(state => {
      state.config = fn(state.config);
      state.victories = 0;
      state.losses = 0;
      state.isRunning = false;
      const graph = getGraph(state);
      state.machine = graphToMachine(graph, state.config.ballsPerColor);
    }))
  }
const changeConfig = (fn: (c: Config) => Config) => {
    setState(produce(state => {
      state.config = fn(state.config);
      state.victories = 0;
      state.losses = 0;
      state.isRunning = false;
      const graph = getGraph(state);
      state.machine = graphToMachine(graph, state.config.ballsPerColor);
    }))
  }
When, this function is called, I obtain the following message error: Uncaught TypeError: proxy must report the same value for the non-writable, non-configurable property 'Symbol("solid-proxy")' on the line state.config = fn(state.config). Initially I wrote this function differently (without using produce) and it worked fine. I'd like to understand this error and how to prevent it.
3 Replies
Guillaume
GuillaumeOP•15mo ago
I have fixed the problem by using a function fn that mutates the Config object instead of returning a new one (and modifying the calls of changeConfig accordingly). 
const changeConfig = (fn: (c: Config) => void) => {
  setState(produce(state => {
    fn(state.config);
    ...
const changeConfig = (fn: (c: Config) => void) => {
  setState(produce(state => {
    fn(state.config);
    ...
but I still don't understand the issue.
Maciek50322
Maciek50322•15mo ago
I see that you use changeConfig different ways 
changeConfig(c => setGraphType(c, e.currentTarget.value))
...
changeConfig(produce(conf => {
  (conf.graphType as KingType).width = Number(e.currentTarget.value);
}))
changeConfig(c => setGraphType(c, e.currentTarget.value))
...
changeConfig(produce(conf => {
  (conf.graphType as KingType).width = Number(e.currentTarget.value);
}))
the changeConfig already uses produce, I think using produce second time inside is the thing that breaks? If you want to pass control to the function caller, you can do something like that: 
const changeConfig: SetStoreFunction<Config> = (...configNextSetterArgs: any[]) => {
  batch(() => {
    (setState as any)("config", ...configNextSetterArgs);
    setState(produce(state => {
      state.victories = 0;
      state.losses = 0;
      state.isRunning = false;
      const graph = getGraph(state);
      state.machine = graphToMachine(graph, state.config.ballsPerColor);
    }))
  })
}
const changeConfig: SetStoreFunction<Config> = (...configNextSetterArgs: any[]) => {
  batch(() => {
    (setState as any)("config", ...configNextSetterArgs);
    setState(produce(state => {
      state.victories = 0;
      state.losses = 0;
      state.isRunning = false;
      const graph = getGraph(state);
      state.machine = graphToMachine(graph, state.config.ballsPerColor);
    }))
  })
}
I added ...configNextSetterArgs: any[], (setState as any), because typescript can't match the types for SetStoreFunction, probably because it's quite complex
Guillaume
GuillaumeOP•15mo ago
Thank you, that is exactly what I wanted

Did you find this page helpful?