React18/NextJS12搭配easy-peasy5.2.0出现maybeGetServerSnapshot函数报错

环境与报错详情 #

使用以下版本组合时：

• easy-peasy: 5.2.0
• NextJS: 12.1.6
• React: 18.1.0

调用easy-peasy原生的useStoreState时抛出错误：

TypeError: maybeGetServerSnapshot is not a function` when calling their native `useStoreState`.
export default function Counter() {
> 4 |   const count = useStoreState((state) => state.counter.count);
    |                               ^
  5 |   const increment = useStoreActions((actions) => actions.counter.increment);

排查情况 #

• 未找到easy-peasy相关的问题讨论帖，仅发现其他状态库存在类似报错，但无直接关联
• 有一个广泛引用的NextJS + easy-peasy示例运行正常，但该示例使用的是各库的旧主版本
• 必须保留当前指定的React和NextJS版本，无法降级

相关代码片段 #

SSR状态代码 #

export function getServerSideProps() {
    const store = initializeStore()

    const data = ['apple', 'pear', 'orange', 'nuts']
    store.getActions().inventory.setItems(data)

    return {
        props: {
            ssrStoreState: store.getState()
        }
    }
}

客户端状态初始化代码 #

export default function WrappedApp({ Component, pageProps }) {
    const store = useStore(pageProps.ssrStoreState)

    return (
        <StoreProvider store={store}>
            <Component {...pageProps} />
        </StoreProvider>
    )
}

组件中使用状态的代码 #

import { useStoreState, useStoreActions } from "easy-peasy";

export default function Counter() {
  const count = useStoreState((state) => state.counter.count);
  const increment = useStoreActions((actions) => actions.counter.increment);

  return (
    <div style={{ margin: "2rem" }}>
      <h1>Counter</h1>
      <p>value = {count}</p>
      <button onClick={increment}>Increment counter</button>
    </div>
  );
}

自定义store实例化代码（store/store.js） #

function initStore(preloadedState = initialState) {
    return createStore(
        persist(
            storeModel,
            { allow: ['shop'] }
        ),
        { initialState: preloadedState }
    )
}

export const initializeStore = (preloadedState) => {
    let _store = store ?? initStore(preloadedState)

    // 导航到带有初始状态的页面后，合并现有状态与新状态并创建新store
    if (preloadedState && store) {
        _store = initStore({
            ...store.getState(),
            ...preloadedState,
        })
        // 重置当前store
        store = undefined
    }

    // SSG和SSR场景下始终创建新store
    if (typeof window === 'undefined') return _store
    // 客户端仅创建一次store
    if (!store) store = _store

    return _store
}

export function useStore(initialState) {
    const store = useMemo(() => initializeStore(initialState), [initialState])
    return store
}

请求解决思路 #

目前报错指向NextJS与easy-peasy同步状态到React时的内部问题，但报错信息有限，陷入困境，恳请提供适配当前版本的解决方法。

内容的提问来源于stack exchange，提问作者FollowMeMaybe