pageContext.Page is undefined in _default.page.server.js #712
Answered
by
brillout
RonnieTaz
asked this question in
Help & Questions
-
|
I am trying to switch over from a standard React App to SSR using this plugin. At the moment I'm stuck trying to render the pages. I get an undefined error from _default.page.server.js and after logging the page context, I found that Page is undefined. Any help on this will be appreciated. Here is my _default.server.page.js code const passToClient = ['pageProps', 'locale', 'urlPathname', 'PRELOADED_STATE'];
async function render(pageContext) {
const { pageHtml, emotionCss, locale } = pageContext;
// See https://vite-plugin-ssr.com/head
const { documentProps } = pageContext;
const documentHtml = escapeInject`<!DOCTYPE html>
<html lang="${locale}">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="description" content="${
(documentProps && documentProps.description) || 'Msosi ni nyama'
}" />
<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1" />
<meta name="theme-color" content="#CA242C" />
<meta property="og:site_name" content="Nyamnyam E-Commerce Store" />
<meta name="twitter:site" content="@nyamnyam_tz"/>
<meta name="apple-mobile-web-app-status-bar" content="#f2f2f2" />
<meta name="p:domain_verify" content="9aa15cdaaa59555ea768c65c67d9abba" />
<meta name="facebook-domain-verification" content="prji0zbsqmyczlm2swrpscx2g5u6sy" />
<link rel="apple-touch-icon" href="/icon-192x192.png" />
${emotionCss}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="manifest" href="/manifest.json" />
<link
href="https://fonts.googleapis.com/css?family=Work+Sans:400,500,600&display=swap"
rel="stylesheet"
>
<link
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600&display=swap"
rel="stylesheet"
>
<link
href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
>
<title>${(documentProps && documentProps.title) || 'NyamNyam'}</title>
</head>
<body>
<div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
</body>
</html>`;
return {
documentHtml,
pageContext: {
}
};
}
async function onBeforeRender(pageContext) {
console.log(pageContext);
const store = getStore();
const cache = createEmotionCache();
const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache);
const { Page, pageProps } = pageContext;
const pageHtml = renderToString(
<Provider store={store}>
<CacheProvider value={cache}>
<ThemeProvider theme={theme}>
<CssBaseline />
<PageShell pageContext={pageContext}>
<Page {...pageProps} />
</PageShell>
</ThemeProvider>
</CacheProvider>
</Provider>
);
const emotionChunks = extractCriticalToChunks(pageHtml);
const emotionCss = constructStyleTagsFromChunks(emotionChunks);
// Grab the initial state from our Redux store
const PRELOADED_STATE = store.getState();
return {
pageContext: {
PRELOADED_STATE,
pageHtml,
emotionCss
}
};
}And my log output |
Beta Was this translation helpful? Give feedback.
Answered by
brillout
Mar 15, 2023
Replies: 1 comment 5 replies
-
|
I believe having a thorough look at https://vite-plugin-ssr.com/render-modes will help you. |
Beta Was this translation helpful? Give feedback.
5 replies
-
|
After trying to trace things further, I came to realize, the locale being set from onBeforeRoute in the _default.page.route.js isn't passed over to the onBeforeRender hook. Any help on this? |
Beta Was this translation helpful? Give feedback.
-
|
I'm inclined to think it's a user land issue. |
Beta Was this translation helpful? Give feedback.
-
|
I tried loading a new project and that works fine but in the current one the |
Beta Was this translation helpful? Give feedback.
-
|
I believe having another .page.server was the cause for such a problem. I switched over to writing special query functions that can be inserted in default.page.server.jsx. The same also applies for .page.route |
Beta Was this translation helpful? Give feedback.
-
|
I'm not sure I understand, but thanks for circling back on this. |
Beta Was this translation helpful? Give feedback.
Answer selected by
RonnieTaz
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I believe having a thorough look at https://vite-plugin-ssr.com/render-modes will help you.