risen228 / nextjs-effector Goto Github PK

I have the very basic use-case that doesn't work.

My _app.js:

import { withEffector } from 'nextjs-effector'
import * as effectorReact from 'effector-react/scope'


function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default withEffector(MyApp, { effectorReact })

And here is my page:

import { createDomain, forward } from 'effector'
import { useStore } from 'effector-react'

const d = createDomain()
const $s = d.createStore(0)
const change = d.createEvent()

$s.watch((v) => {
  // => here I get all changes correctly
  console.log(v)
})

forward({
  from: change.map(v => v),
  to: $s,
})

export default function Home({ test }) {
  // here value is always '0'
  const v = useStore($s)
  const next = () => {
    change(Math.random())
  }
  return (
    <div>
      {v}
      <button onClick={next}>Next value</button>
    </div>
  );
}

Home.getInitialProps = (context) => {
  return {
    // some props here...
  };
};

The same example works fine in common React app.

export const getServerSideProps = createGSSP({
  pageEvent: resolverGSSP,
  customize({ scope, context }) {
    const { res } = context
    const isIncorrect = scope.getState(searchModel.$isIncorrect) <- anyway and always is boolean

    if (isIncorrect && res) res.statusCode = 404

    return { notFound: isIncorrect }
  },
})

Got this:

Error: Error serializing props returned from getServerSideProps in "/[...resolver]".
Reason: Props must be returned as a plain object from getServerSideProps: { props: { ... } } (received: [object Undefined]).

Used this as example

DEMO: https://github.com/7iomka/nextjs-effector-issue-with-router-bindings

1. Go to My profile page (Gip)
2. Click to Go to home button on bottom of any page
3. Instead of navigation - nothing happened

I try to make a research and I found line with issue
https://github.com/7iomka/nextjs-effector-issue-with-router-bindings/blob/master/library/fabrics/get-initial-props.ts#L64

When state.clientScope is used as a scope on navigation on client side allSettled stacks and never resolved.
The only question is - why and how to figure out?
From how I know - allSettled stacks in execution when we have an issue with logic of effects execution, for example - infinite loops.
But in this case, I don't know.

Please help me to solve this problem, bro!

I have store something like:
export const $cookies = appDomain.createStore<CookiesType | null>(null);

In samples its data available only on server side, on client I get null.
But in components with useStore I get actual data.

Is it possible to init store on server side and then use it in samples on client?