The type of setState is a object when it is built and deployed to Cloudflare pages while locally it is a function.

[KamaniBhavin]

I'm working on a small project using Next.js with Zustand for state management. According to the Zustand documentation, I've implemented the recommended slices pattern for managing the state of the homepage and used a React Context Provider to initialize the state per request on the client side. Everything functions correctly in the local environment. However, upon deploying to Cloudflare Pages, the application encounters the following error in production:

Uncaught (in promise) TypeError: n is not a function
    at newThread (547-e9d8032a3d6453c9.js:1:7484)
    at page-be148b264a2b751f.js:1:21448
    at i (670-347df856400603d5.js:37:87666)
    at 670-347df856400603d5.js:37:99929
    at Set.forEach (<anonymous>)
    at r (670-347df856400603d5.js:37:99918)
    at 670-347df856400603d5.js:37:90479
    at r.setState (670-347df856400603d5.js:37:99635)
    at initialize (547-e9d8032a3d6453c9.js:1:1068)
    at page-be148b264a2b751f.js:1:21499

Locally, the function causing the error works as expected, but in production, it's incorrectly recognized as an object. I'm unsure why this discrepancy occurs between the local build and the production environment.

The repository with the code is available here: KamaniBhavin/pitch-black-ui

To be specific about the part where the error occurs: https://github.com/KamaniBhavin/pitch-black-ui/blob/4572b9bb4a0548dfc7312f37f392b3ca1e34de2f/src/stores/home-page-store/chat-window-slice.ts#L39

Any insights or suggestions to resolve this issue would be greatly appreciated.

[KamaniBhavin]

The set function from Zustand, which is responsible for updating the state, is not functioning correctly, and all Zustand functions are being recognized as objects. This leads me to believe there may be an issue with how I've configured the store. Previously, I used a different store configuration which worked fine in production. However, due to a requirement for cross-store communication, I transitioned to using the slices pattern, which is when these issues began.

[KamaniBhavin]

It turns out the issue was related to how I configured the slices. Initially, I set up the slices as a function that returned a state creator, as illustrated in the incorrect example below:

❌
function createSliceA(): StateCreator<...> {
  return (set, get) => ({

  })
}

export function store() {
  return createStore<TStore>()(
    immer((...args) => ({
      ...createSliceA()(...args),
      ...createSliceB()(...args),
    })),
  );
}

The correct configuration involves defining the slices directly as functions, which fixed the problem. Here's the corrected code:

✅
const createSliceA = (set, get) => ({

})

export function store() {
  return createStore<TStore>()(
    immer((...args) => ({
      ...createSliceA(...args),
      ...createSliceB(...args),
    })),
  );
}