Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

getLayout #18

Closed
merthanmerter opened this issue Aug 27, 2022 · 3 comments · Fixed by #21
Closed

getLayout #18

merthanmerter opened this issue Aug 27, 2022 · 3 comments · Fixed by #21
Labels
bug Something isn't working
Milestone

Comments

@merthanmerter
Copy link

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

@merthanmerter merthanmerter added the bug Something isn't working label Aug 27, 2022
@orionmiz orionmiz added this to the v0.4.0 milestone Aug 27, 2022
@orionmiz
Copy link
Collaborator

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
Copy link
Author

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

@orionmiz
Copy link
Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants