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

Port to Next.js 15 #341

Merged
merged 1 commit into from
Nov 13, 2024
Merged

Port to Next.js 15 #341

merged 1 commit into from
Nov 13, 2024

Conversation

torokati44
Copy link
Member

No description provided.

@torokati44 torokati44 force-pushed the nextjs-15 branch 2 times, most recently from 64bb20b to 427ff5c Compare October 21, 2024 15:26
@torokati44
Copy link
Member Author

Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

Do we care?

desktop: selectors.isDesktop,
mobile: selectors.isMobile,
};
if (typeof window !== "undefined") {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm getting a "runtime error" calling out this exact line, but I don't know how to disable SSR on 15...

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line 1 says "use client", shouldn't that be sufficient?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See the added line under this... :)
I thought so too, and I wish - but apparently, no. It's still "prerendered" unless I set { ssr: false } upon import, which is now only supported from other client components...?!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

@danielhjacobs
Copy link
Collaborator

Do we care?

If you go into Firefox preferences and disable PerformanceObserver (set dom.enable_performance_observer to false in about:config), does the website work?

@torokati44
Copy link
Member Author

If you go into Firefox preferences and disable PerformanceObserver (set dom.enable_performance_observer to false in about:config), does the website work?

It does, yeah.

@torokati44 torokati44 changed the title Attempt porting to Next 15 RC Attempt porting to Next.js 15 Oct 24, 2024
@torokati44
Copy link
Member Author

I would appreciate a lot if you could help finish this up sometime, @danielhjacobs - this is already a bit beyond my web and TS capabilities... 😶

src/app/page.tsx Outdated Show resolved Hide resolved
@torokati44 torokati44 force-pushed the nextjs-15 branch 2 times, most recently from 3b40fc2 to 97c02ae Compare November 13, 2024 00:27
@torokati44 torokati44 marked this pull request as ready for review November 13, 2024 00:36
@torokati44
Copy link
Member Author

I still get this sometimes (when reloading on the main landing page), but it seems basically insignificant to me...?
image

@torokati44
Copy link
Member Author

Oh, it's this: mantinedev/mantine#7008

But I'd leave it up to you, @danielhjacobs, to decide what to do about it.

@torokati44 torokati44 force-pushed the nextjs-15 branch 3 times, most recently from c7b0b6f to 3f69baa Compare November 13, 2024 10:05
@danielhjacobs
Copy link
Collaborator

danielhjacobs commented Nov 13, 2024

Do we even use the color scheme for anything? We always show ruffle-orange on ruffle-blue.

@danielhjacobs
Copy link
Collaborator

danielhjacobs commented Nov 13, 2024

I still get this sometimes (when reloading on the main landing page), but it seems basically insignificant to me...?

Change this line:

<html lang="en">

To:

<html lang="en" suppressHydrationWarning>

https://react.dev/reference/react-dom/hydrate#suppressing-unavoidable-hydration-mismatch-errors

Note, this only "works one level deep", so the only mismatch this will allow is on the html tag itself. That seems acceptable.

@torokati44
Copy link
Member Author

Do we even use the color scheme for anything? We always show ruffle-orange on ruffle-blue.

Honestly, I'm not even sure whether <ColorSchemeScript /> takes something from the browser/page and provides it to Mantine, or the other way around... 😶

@danielhjacobs
Copy link
Collaborator

Looking at the code, it seems like we just use MantineProvider as an easier way to manage our theme colors by putting them all in https://github.com/ruffle-rs/ruffle-rs.github.io/blob/master/src/theme.ts

@torokati44 torokati44 changed the title Attempt porting to Next.js 15 Port to Next.js 15 Nov 13, 2024
@danielhjacobs danielhjacobs merged commit 4daff9a into ruffle-rs:master Nov 13, 2024
1 check passed
@torokati44
Copy link
Member Author

Thank you again, @danielhjacobs! 🥳

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants