blitz-js / next-superjson-plugin

SuperJSON Plugin for Next.js Pages and Components
198 stars 13 forks source link

getLayout #18

Closed merthanmerter closed 1 year ago

merthanmerter commented 1 year ago

Describe the bug

when using getLayout function causes a full reload and the layout wont load. instead of using function using the layout as component won't cause any problem.

Home.getLayout = (page) => { return <PrimaryLayout>{page}</PrimaryLayout> }

Expected behavior

Not performing a full reload and be able to render the layout component.

Reproduction link

No response

Version

0.3.0

Config

No response

Additional context

No response

orionmiz commented 1 year ago

Could you please upload full source codes occuring this bug?

Otherwise, let me know if the structure below is similar to your codes:

export default Home() {
  // something
}
Home.getLayout = (page) => { return <PrimaryLayout>{page}</PrimaryLayout> }

or

function Home() { // var declaration doesn't matter
  // something
}
export default Home;
Home.getLayout = (page) => { return <PrimaryLayout>{page}</PrimaryLayout> }

If you're in either of these cases, try this structure and check whether the bug is fixed or not.

function Home() { // var declaration doesn't matter
  // something
}
Home.getLayout = (page) => { return <PrimaryLayout>{page}</PrimaryLayout> }
export default Home;

pull request waiting for merge will fix this bug if my guess is correct.

merthanmerter commented 1 year ago

Hello turns out I was exporting before the function. That fixed. Thank you and sorry for unnecessary issue.

orionmiz commented 1 year ago

Don't feel sorry about that. This was a necessary issue.

There may be no bug if plugin was not applied.

Let me explain why this bug occurs.

If you're using these codes:

export default Home() {
  // something
}
Home.getLayout = (page) => { return <PrimaryLayout>{page}</PrimaryLayout> }

Plugin tranforms codes internally:

function Home() {
  // something
}
export default withSuperJSONPage(Home)
Home.getLayout = (page) => { return <PrimaryLayout>{page}</PrimaryLayout> }

In this case, Next.js deserializes page props before taking getLayout function, and it leads to a bug.

But with no plugin, it works well because Home.getLayout = ... statement mutates original page export.

So I added a feature pushing that default export to the end of the line.

Thanks for reporting the issue.