From 4cfb03a352a680a92e1d43ab0d8c54a4db419490 Mon Sep 17 00:00:00 2001 From: KatoakDR <68095633+KatoakDR@users.noreply.github.com> Date: Mon, 30 Sep 2024 22:42:45 -0500 Subject: [PATCH 1/2] feat: disable ssr app-wide --- .../renderer/components/no-ssr/no-ssr.tsx | 18 +++++++- electron/renderer/pages/_app.tsx | 41 ++++++++++--------- electron/renderer/pages/grid.tsx | 8 +--- 3 files changed, 38 insertions(+), 29 deletions(-) diff --git a/electron/renderer/components/no-ssr/no-ssr.tsx b/electron/renderer/components/no-ssr/no-ssr.tsx index 916b81e7..90752581 100644 --- a/electron/renderer/components/no-ssr/no-ssr.tsx +++ b/electron/renderer/components/no-ssr/no-ssr.tsx @@ -7,7 +7,7 @@ import type { ReactNode } from 'react'; * In JSX, to differentiate the generic `

` from an HTML tag * then we append a trailing comma as ``. */ -const NoSSR = ( +export const NoSSR = ( component: React.FC

| ReactNode ): React.ComponentType

=> { if (typeof component === 'function') { @@ -16,4 +16,18 @@ const NoSSR = ( return NoSSR(() => component); }; -export { NoSSR }; +/** + * Convenience component to wrap a block of components that should not be + * rendered on the server. SSR may have value, but unless every component + * is designed to be SSR compatible then it's more pain than it's worth. + * + * Usage: + * + * ... components that can safely use `window` and browser objects ... + * + */ +export const NoSSRBoundary = NoSSR((props: { children?: ReactNode }) => { + return <>{props.children}; +}); + +NoSSRBoundary.displayName = 'NoSSRBoundary'; diff --git a/electron/renderer/pages/_app.tsx b/electron/renderer/pages/_app.tsx index 08bcb4b7..192062fa 100644 --- a/electron/renderer/pages/_app.tsx +++ b/electron/renderer/pages/_app.tsx @@ -5,20 +5,15 @@ import { EuiErrorBoundary } from '@elastic/eui'; import type { AppProps } from 'next/app'; import Head from 'next/head'; import { Layout } from '../components/layout.jsx'; -import { NoSSR } from '../components/no-ssr/no-ssr.jsx'; +import { NoSSRBoundary } from '../components/no-ssr/no-ssr.jsx'; import { ChromeProvider } from '../context/chrome.jsx'; import { GameProvider } from '../context/game.jsx'; import { LoggerProvider } from '../context/logger.jsx'; import { ThemeProvider } from '../context/theme.jsx'; -// The layout uses eui styling which requires the browser to be present. -// To bypass SSR then we wrap the layout in a NoSSR component. -const LayoutNoSSR = NoSSR(Layout); - /** * Next.js uses the App component to initialize pages. You can override it - * and control the page initialization. Here use use it to render the - * `Chrome` component on each page, and apply an error boundary. + * and control the page initialization. * * @see https://nextjs.org/docs/advanced-features/custom-app */ @@ -27,19 +22,25 @@ const App: React.FC = ({ Component, pageProps }: AppProps) => ( DragonRealms Phoenix - - - - - - - - - - - - - + {/* + The EUI components require the `window` object; they are not SSR compatible. + https://stackoverflow.com/questions/53139884/next-js-disable-server-side-rendering-on-some-pages/64509306 + */} + + + + + + + + + + + + + + + ); diff --git a/electron/renderer/pages/grid.tsx b/electron/renderer/pages/grid.tsx index e821ec37..2e41ace8 100644 --- a/electron/renderer/pages/grid.tsx +++ b/electron/renderer/pages/grid.tsx @@ -19,7 +19,6 @@ import type { import { GameEventType } from '../../common/game/types.js'; import { GameStream } from '../components/game/game-stream.jsx'; import { Grid } from '../components/grid/grid.jsx'; -import { NoSSR } from '../components/no-ssr/no-ssr.jsx'; import { useLogger } from '../hooks/logger.jsx'; import { useMeasure } from '../hooks/measure.js'; import { useWindowSize } from '../hooks/window-size.js'; @@ -32,11 +31,6 @@ import type { GridItemInfo, } from '../types/grid.types.js'; -// The grid dynamically modifies the DOM, so we can't use SSR -// because the server and client DOMs will be out of sync. -// https://nextjs.org/docs/messages/react-hydration-error -const GridNoSSR = NoSSR(Grid); - const GridPage: React.FC = (): ReactNode => { const logger = useLogger('page:grid'); @@ -527,7 +521,7 @@ const GridPage: React.FC = (): ReactNode => { >

- Date: Mon, 30 Sep 2024 22:43:03 -0500 Subject: [PATCH 2/2] chore(deps): update elastic ui --- package.json | 2 +- yarn.lock | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 7af42027..94cd7995 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "sentry:sourcemaps": "./scripts/sentry-sourcemaps.sh" }, "dependencies": { - "@elastic/eui": "^93.6.0", + "@elastic/eui": "^95.12.0", "@emotion/cache": "^11.13.1", "@emotion/css": "^11.13.0", "@emotion/react": "^11.13.3", diff --git a/yarn.lock b/yarn.lock index b241e5fc..97f085a4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1621,11 +1621,11 @@ __metadata: languageName: node linkType: hard -"@elastic/eui@npm:^93.6.0": - version: 93.6.0 - resolution: "@elastic/eui@npm:93.6.0" +"@elastic/eui@npm:^95.12.0": + version: 95.12.0 + resolution: "@elastic/eui@npm:95.12.0" dependencies: - "@hello-pangea/dnd": "npm:^16.3.0" + "@hello-pangea/dnd": "npm:^16.6.0" "@types/lodash": "npm:^4.14.202" "@types/numeral": "npm:^2.0.5" "@types/react-window": "npm:^1.8.8" @@ -1650,7 +1650,7 @@ __metadata: remark-breaks: "npm:^2.0.2" remark-emoji: "npm:^2.1.0" remark-parse-no-trim: "npm:^8.0.4" - remark-rehype: "npm:^8.0.0" + remark-rehype: "npm:^8.1.0" tabbable: "npm:^5.3.3" text-diff: "npm:^1.0.1" unified: "npm:^9.2.2" @@ -1667,8 +1667,8 @@ __metadata: moment: ^2.13.0 react: ^16.12 || ^17.0 || ^18.0 react-dom: ^16.12 || ^17.0 || ^18.0 - typescript: ~4.5.3 - checksum: 10c0/af09f7fed43b7bcc66fe174b49ed61add38a6de8086ffdea63f3548c8c854028c489ece8768eb8df94a91233b7cc68c423864ba9cdd84cac282d87901f9a05f9 + typescript: ~4.5.3 || ^5 + checksum: 10c0/72a76fd1ee2b0b639ee0ed66aa3e9c9c428f3821f873232787b56735ae6db8e910e60fe9606f1bb3c6ed37d9829f4c6ede8e893905419b552c44de9e24ad48ff languageName: node linkType: hard @@ -2126,7 +2126,7 @@ __metadata: languageName: node linkType: hard -"@hello-pangea/dnd@npm:^16.3.0": +"@hello-pangea/dnd@npm:^16.6.0": version: 16.6.0 resolution: "@hello-pangea/dnd@npm:16.6.0" dependencies: @@ -12924,7 +12924,7 @@ __metadata: "@commitlint/cli": "npm:^19.5.0" "@commitlint/config-conventional": "npm:^19.5.0" "@elastic/datemath": "npm:^5.0.3" - "@elastic/eui": "npm:^93.6.0" + "@elastic/eui": "npm:^95.12.0" "@emotion/cache": "npm:^11.13.1" "@emotion/css": "npm:^11.13.0" "@emotion/react": "npm:^11.13.3" @@ -13915,7 +13915,7 @@ __metadata: languageName: node linkType: hard -"remark-rehype@npm:^8.0.0": +"remark-rehype@npm:^8.1.0": version: 8.1.0 resolution: "remark-rehype@npm:8.1.0" dependencies: