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.

Sign up for GitHub

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

Jump to bottom

Hot reload broken if Layout.tsx doesn't import route helper #14

Open
mttschltz opened this issue Jan 29, 2022 · 1 comment
Open

Hot reload broken if Layout.tsx doesn't import route helper #14

mttschltz opened this issue Jan 29, 2022 · 1 comment
Labels
bug Something isn't working

Comments

@mttschltz
Copy link
Owner

Problem

Noticed hot reload was not working when making changes to index.tsx. Narrowed it down to being caused by the useRoute import. Problem went away if I moved the function into index.tsx or if I imported from translate.tsx. Renaming didn't help.

This led me to try adding the import to Layout.tsx, where translate.tsx is also imported.

For now I've left the import there as a hack to keep hot reload working.

There's no error as far as I can see. In the browser console it still seems to log and identify which components have been updated.

Layout.tsx is used by gatsby-plugin-layout. Maybe that's related to the problem.

Can we remove that plugin? Or is there an issue on Github with a workaround?
@mttschltz mttschltz added the bug Something isn't working label Jan 29, 2022
mttschltz added a commit that referenced this issue Jan 30, 2022
@mttschltz
Fix matt-fyi hot reload using import hack
27e8887 
Imports useRoute in Layout.tsx. Without this, hot reload isn't working
when making changes to index.tsx. The logs appear and show the expected
component name that has changed, but the component is not actually
updated.

An issue has been created to find a proper solution:
#14
@mttschltz
Copy link
Owner Author

Not sure this will solve the problem, but could refactor to use wrapPageElement directly instead of via gatsby-plugin-layout: https://www.gatsbyjs.com/docs/how-to/routing/layout-components/#how-to-prevent-layout-components-from-unmounting

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

No branches or pull requests
1 participant
@mttschltz