Popular New Releases in Server Side Rendering
nuxt.js
fanqiang
ChromeGo一键翻墙包-ChromeGowindows版集成翻墙包
react-static
rax
v1.2.2
loadable-components
Popular Libraries in Server Side Rendering
by nuxt 
javascript
39155 NOASSERTION
The Intuitive Vue(2) Framework
by bannedbook kotlin
23529
翻墙-科学上网
by h2y python
11805 NOASSERTION
提供多款 Shadowrocket 规则，带广告过滤功能。用于 iOS 未越狱设备选择性地自动翻墙。
by vuejs javascript
10938 MIT
HackerNews clone built with Vue 2.0, vue-router & vuex, with server-side rendering
by react-static javascript
9762 MIT
⚛️ 🚀 A progressive static site generator for React.
by alibaba javascript
7675 NOASSERTION
🐰 Rax is a progressive framework for building universal application. https://rax.js.org
by teddysun shell
7483
Auto Install Shadowsocks Server for CentOS/Debian/Ubuntu
by gregberge javascript
6482 MIT
The recommended Code Splitting library for React ✂️✨
by remoteinterview javascript
5832 Apache-2.0
Zero is a web server to simplify web development.
Trending New libraries in Server Side Rendering
by vuejs typescript
5561 MIT
6kb subset of Vue optimized for progressive enhancement
by BuilderIO typescript
3098 MIT
The HTML-first framework. Initialize apps of any size with < 1kb JS
by micro-zoe javascript
2244 MIT
A lightweight, efficient and powerful micro front-end framework. 一款轻量、高效、功能强大的微前端框架
by zu1k go
1978 GPL-3.0
自动抓取tg频道、订阅地址、公开互联网上的ss、ssr、vmess、trojan节点信息，聚合去重后提供节点列表。欢迎star和follow
by ykfe typescript
1407 MIT
A most advanced ssr framework support React/Vue2/Vue3 on Earth that implemented serverless-side render specification.
by flareact javascript
1393 MIT
Edge-rendered React framework built for Cloudflare Workers
by brillout typescript
948 MIT
Like Next.js / Nuxt but as do-one-thing-do-it-well Vite plugin.
by UmeLabs html
855
每天20:00点更新免费SS/SSR节点
by dodois javascript
654 GPL-3.0
Doisnet OnlineAnonymity 是目前全网唯一的一款永久免费、节点最多且支持随意切换节点、永久更新、不限速、不限流量、不限设备、不限时长的VPN
Top Authors in Server Side Rendering
1
18 Libraries
2943
2
6 Libraries
6768
3
6 Libraries
2456
4
6 Libraries
695
5
5 Libraries
444
6
5 Libraries
40
7
5 Libraries
1786
8
4 Libraries
239
9
4 Libraries
34
10
4 Libraries
55
1
18 Libraries
2943
2
6 Libraries
6768
3
6 Libraries
2456
4
6 Libraries
695
5
5 Libraries
444
6
5 Libraries
40
7
5 Libraries
1786
8
4 Libraries
239
9
4 Libraries
34
10
4 Libraries
55
Trending Kits in Server Side Rendering
No Trending Kits are available at this moment for Server Side Rendering
Trending Discussions on Server Side Rendering
How to properly run gatsby with SSR in a production environment
503 ERROR The request could not be satisfied (AWS Amplify)
How to enable cache for getServerSideProps?
Page data from page-data.json for the failed page "/"
Element type is invalid: expected a string, using JSX to define a component
How to avoid API duplication when fetching data with nextjs?
In Next.js, How to Redirect page in axios interceptor?
Why React needs to check if the node is root before rendering?
Vue.js prefetch data with client side rendering
How to use Gatsbys wrapPageElement with Typescript in a local plugin?
QUESTION
How to properly run gatsby with SSR in a production environment
Asked 2022-Mar-14 at 14:03I have trouble finding any useful documentation on how to properly set up a gatsby side that is using SSR (server side rendering) in a custom production environment (not Gatsby Cloud or Netlify)
In their documentation for SSR there's a section
Server-Side Rendering requires a running NodeJS server. You can put NodeJS running gatsby serve behind a content delivery network (CDN) like Fastly, however that also requires additional infrastructure (like monitoring, logging, and crash-recovery).
So my general idea would be to put this all inside some Docker container and run gatsby serve
However according to the documentation for gatsby serve (https://www.gatsbyjs.com/docs/reference/gatsby-cli/#serve )this is not supposed to be used for production
At the root of a Gatsby site, serve the production build of your site for testing
Is it ok to use serve production? What kind of security issues do I need to keep in mind when using it? Is there a detailed documentation how to set this up in a custom environment?
ANSWER
Answered 2022-Mar-14 at 14:03No docs on the SSR mode on custom servers. But in general you'd want to use something like Express to serve the static files (not gatsby serve) and then you can look at gatsby-plugin-netlify and gatsby-plugin-fastify for inspiration as they support SSR.
The serving and runtime SSR logic you’d have to write yourself using those plugins I mentioned as inspiration. The framework doesn’t handle the serving of the app, platforms like Gatsby Cloud and Netlify do. Or in your case, a custom server.
You might find this useful https://github.com/wille/gatsby-plugin-express Should also know there are lots of super easy ways to deploy (Gatsby Cloud, Netlify, Vercel) so you don’t need your own server. The reason you can’t use serve command is things like caching, redirects, headers, etc.
QUESTION
503 ERROR The request could not be satisfied (AWS Amplify)
Asked 2022-Mar-12 at 05:29I have deployed a Next.js server side rendering app on AWS Amplify. I am new to AWS and don't know exactly why I am encountering this error. I have read so many articles and documentations but I am unable to solve this issue.
I am using getServerSideProps to get params and props from API etc. On Vercel and Netlify, my app is running fine but I am getting errors on Amplify AWS.
My app is loading static pages, but giving me an error on dynamic pages.
E.g. www.example.com/test-1
Here test-1 is a dynamic route "/:id"
The error I get:
503 ERROR The request could not be satisfied. The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner. If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
I know this error is specifically towards permissions, but I don't know how to configure them.
ANSWER
Answered 2021-Oct-10 at 06:10The problem was with my Lambda functions they were defined for my application and some of them were unrecognized fixing them and giving permissions to the user is the only solution.
QUESTION
How to enable cache for getServerSideProps?
Asked 2022-Mar-03 at 10:24We have few pages and components as server side rendering.
We were trying to use cache for few API responses.
1export async function getServerSideProps(context) {
2 const res = await getRequest(API.home)
3 return {
4 props: {
5 "home": res?.data?.result
6 },
7 }
8}
9Next.js version is 11.1.
Here can someone please suggest how can we implement cache?
ANSWER
Answered 2022-Mar-03 at 08:31You can set the Cache-Control header inside getServerSideProps using res.setHeader.
1export async function getServerSideProps(context) {
2 const res = await getRequest(API.home)
3 return {
4 props: {
5 "home": res?.data?.result
6 },
7 }
8}
9export async function getServerSideProps(context) {
10 // Add whatever `Cache-Control` value you want here
11 context.res.setHeader(
12 'Cache-Control',
13 'public, s-maxage=10, stale-while-revalidate=59'
14 )
15 const res = await getRequest(API.home)
16 return {
17 props: {
18 home: res?.data?.result
19 }
20 }
21}
22QUESTION
Page data from page-data.json for the failed page "/"
Asked 2022-Jan-26 at 18:01I get this error when I run gatsby build. I have not used "document" in my code. Can someone explain what this means?
ERROR
Page data from page-data.json for the failed page "/": {
"componentChunkName": "component---src-pages-index-js", "path": "/", "result": { "pageContext": {} }, "staticQueryHashes": [] }failed Building static HTML for pages - 2.990s
ERROR #95312
"document" is not available during server side rendering.
ANSWER
Answered 2022-Jan-26 at 18:01The reason why this issue appears is because somewhere in your code you are using document global object and, because gatsby develop is rendered by the browser, where there are window and document global objects, it compiles, however, when you run gatsby build, the code is compiled in the Node server, where there's no window or document variables because they are not even defined yet, they are client-side variables parsed in the SSR (Server-Side Rendering).
This is an extreme reduction of what's happening, you can find a more detailed explanation in Debugging HTML Builds docs.
To fix/bypass this issue, you only need to add the following condition where you are using document object.
1 if(window !== "undefined"){
2 // your document or window manipulation
3 }
4You can use both window or document in the condition, they are equivalent in terms of bypassing the server-side rendering.
If you are not using document in your project, the issue may still rise if some of your dependencies (third-party) are using it (i.e: canvas, maps, sliders that uses JavaScript calculations, etc). If that's your scenario, the way to bypass it is to ignore webpacks bundling by adding a null loader:
1 if(window !== "undefined"){
2 // your document or window manipulation
3 }
4exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
5 if (stage === "build-html" || stage === "develop-html") {
6 actions.setWebpackConfig({
7 module: {
8 rules: [
9 {
10 test: /bad-module/,
11 use: loaders.null(),
12 },
13 ],
14 },
15 })
16 }
17}
18Where /bad-module/ is a regular expression (test) (that's why is between slashes, /). In this case, you need to replace bad-module for the dependency folder name in node_modules.
QUESTION
Element type is invalid: expected a string, using JSX to define a component
Asked 2022-Jan-25 at 18:41Just following some basic guides and got issues already. I can't see the problem with the below code but i'm getting the error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of
Navbar.
Can someone point where i'm going wrong please? Will use server side rendering some point but for now i'm just trying to get the design and layout done.
1// _app.tsx
2
3import Layout from '../components/Layout'
4import '../styles/globals.css';
5
6import type { AppProps } from 'next/app'
7
8function MyApp({ Component, pageProps }: AppProps) {
9 return (
10 <Layout>
11 <Component {...pageProps} />
12 </Layout>
13 )
14}
15
16export default MyApp
171// _app.tsx
2
3import Layout from '../components/Layout'
4import '../styles/globals.css';
5
6import type { AppProps } from 'next/app'
7
8function MyApp({ Component, pageProps }: AppProps) {
9 return (
10 <Layout>
11 <Component {...pageProps} />
12 </Layout>
13 )
14}
15
16export default MyApp
17// index.tsx
18
19import type {NextPage} from 'next'
20
21const Home: NextPage = () => {
22 return (
23 <div>
24 <h1 className="text-3xl font-bold underline">
25 Header
26 </h1>
27 </div>
28 )
29}
30
31export default Home
321// _app.tsx
2
3import Layout from '../components/Layout'
4import '../styles/globals.css';
5
6import type { AppProps } from 'next/app'
7
8function MyApp({ Component, pageProps }: AppProps) {
9 return (
10 <Layout>
11 <Component {...pageProps} />
12 </Layout>
13 )
14}
15
16export default MyApp
17// index.tsx
18
19import type {NextPage} from 'next'
20
21const Home: NextPage = () => {
22 return (
23 <div>
24 <h1 className="text-3xl font-bold underline">
25 Header
26 </h1>
27 </div>
28 )
29}
30
31export default Home
32// Layout.jsx
33
34import Navbar from './Navbar';
35import Head from "next/head";
36
37const Layout = ({children}) => {
38 return (
39 <>
40 <Navbar />
41
42 <div className="bg-background h-full">
43 <Head>
44 <title>Test</title>
45 </Head>
46
47 <main>
48 {children}
49 </main>
50 </div>
51 </>
52 )
53}
54export default Layout
551// _app.tsx
2
3import Layout from '../components/Layout'
4import '../styles/globals.css';
5
6import type { AppProps } from 'next/app'
7
8function MyApp({ Component, pageProps }: AppProps) {
9 return (
10 <Layout>
11 <Component {...pageProps} />
12 </Layout>
13 )
14}
15
16export default MyApp
17// index.tsx
18
19import type {NextPage} from 'next'
20
21const Home: NextPage = () => {
22 return (
23 <div>
24 <h1 className="text-3xl font-bold underline">
25 Header
26 </h1>
27 </div>
28 )
29}
30
31export default Home
32// Layout.jsx
33
34import Navbar from './Navbar';
35import Head from "next/head";
36
37const Layout = ({children}) => {
38 return (
39 <>
40 <Navbar />
41
42 <div className="bg-background h-full">
43 <Head>
44 <title>Test</title>
45 </Head>
46
47 <main>
48 {children}
49 </main>
50 </div>
51 </>
52 )
53}
54export default Layout
55// Navbar.jsx
56
57import Link from "next";
58
59function Navbar() {
60 return (
61 <nav>
62 <ul>
63 <li>
64 <Link to="/">Home</Link>
65 </li>
66 <li>
67 <Link to="/">About</Link>
68 </li>
69 <li>
70 <Link to="/">Menu</Link>
71 </li>
72 <li>
73 <Link to="/">Gallery</Link>
74 </li>
75 </ul>
76 </nav>
77 )
78}
79export default Navbar
80ANSWER
Answered 2022-Jan-25 at 18:41correct your Link import
1// _app.tsx
2
3import Layout from '../components/Layout'
4import '../styles/globals.css';
5
6import type { AppProps } from 'next/app'
7
8function MyApp({ Component, pageProps }: AppProps) {
9 return (
10 <Layout>
11 <Component {...pageProps} />
12 </Layout>
13 )
14}
15
16export default MyApp
17// index.tsx
18
19import type {NextPage} from 'next'
20
21const Home: NextPage = () => {
22 return (
23 <div>
24 <h1 className="text-3xl font-bold underline">
25 Header
26 </h1>
27 </div>
28 )
29}
30
31export default Home
32// Layout.jsx
33
34import Navbar from './Navbar';
35import Head from "next/head";
36
37const Layout = ({children}) => {
38 return (
39 <>
40 <Navbar />
41
42 <div className="bg-background h-full">
43 <Head>
44 <title>Test</title>
45 </Head>
46
47 <main>
48 {children}
49 </main>
50 </div>
51 </>
52 )
53}
54export default Layout
55// Navbar.jsx
56
57import Link from "next";
58
59function Navbar() {
60 return (
61 <nav>
62 <ul>
63 <li>
64 <Link to="/">Home</Link>
65 </li>
66 <li>
67 <Link to="/">About</Link>
68 </li>
69 <li>
70 <Link to="/">Menu</Link>
71 </li>
72 <li>
73 <Link to="/">Gallery</Link>
74 </li>
75 </ul>
76 </nav>
77 )
78}
79export default Navbar
80import Link from "next/link";
81QUESTION
How to avoid API duplication when fetching data with nextjs?
Asked 2021-Dec-29 at 19:45I have a route that I may call either from server side rendering, or from client:
1export const getFooBar = async (): Promise<any> => {
2 const res = await fetch(`/foo/bar`, {
3 method: 'GET',
4 headers: CONTENT_TYPE_JSON,
5 })
6 if (!res.ok) {
7 //do something
8 }
9 //do something else
10}
11If I call this function from the server:
1export const getFooBar = async (): Promise<any> => {
2 const res = await fetch(`/foo/bar`, {
3 method: 'GET',
4 headers: CONTENT_TYPE_JSON,
5 })
6 if (!res.ok) {
7 //do something
8 }
9 //do something else
10}
11export const getServerSideProps: GetServerSideProps = async () => {
12 getFooBar().then(() => {
13 //do something
14 })
15}
16I got an error on because it is not an absolute URL. Solution is to create another function with slightly different URI:
1export const getFooBar = async (): Promise<any> => {
2 const res = await fetch(`/foo/bar`, {
3 method: 'GET',
4 headers: CONTENT_TYPE_JSON,
5 })
6 if (!res.ok) {
7 //do something
8 }
9 //do something else
10}
11export const getServerSideProps: GetServerSideProps = async () => {
12 getFooBar().then(() => {
13 //do something
14 })
15}
16export const getFooBar = async (): Promise<any> => {
17 const res = await fetch(`http://myapp/foo/bar`, {
18 method: 'GET',
19 headers: CONTENT_TYPE_JSON,
20 })
21 if (!res.ok) {
22 //do something
23 }
24 //do something else
25}
26Or to pass a prefix URL argument in getFooBar.
But is there a more generic way to add the absolute URL part if it's coming from server side rendering?
ANSWER
Answered 2021-Dec-29 at 16:16The proxy you have set up in next.config.js is only relevant for client-side requests. For requests initiated on the server (like inside getServerSideProps) you should directly call the external API.
Given the APP_API environment variable is not exposed to the browser (it's not prefixed with NEXT_PUBLIC_), you could use that as a condition to either use the direct API endpoint on the server, or point to the proxy endpoint on the client.
1export const getFooBar = async (): Promise<any> => {
2 const res = await fetch(`/foo/bar`, {
3 method: 'GET',
4 headers: CONTENT_TYPE_JSON,
5 })
6 if (!res.ok) {
7 //do something
8 }
9 //do something else
10}
11export const getServerSideProps: GetServerSideProps = async () => {
12 getFooBar().then(() => {
13 //do something
14 })
15}
16export const getFooBar = async (): Promise<any> => {
17 const res = await fetch(`http://myapp/foo/bar`, {
18 method: 'GET',
19 headers: CONTENT_TYPE_JSON,
20 })
21 if (!res.ok) {
22 //do something
23 }
24 //do something else
25}
26export const getFooBar = async (): Promise<any> => {
27 const url = process.env.APP_API ? `http://${process.env.APP_API}/bar` : '/foo/bar'
28 const res = await fetch(url, {
29 method: 'GET',
30 headers: CONTENT_TYPE_JSON,
31 })
32 // Remaining code
33}
34Note that you could also use other conditions to verify if you're in the client or server, for example using typeof window === 'undefined'.
QUESTION
In Next.js, How to Redirect page in axios interceptor?
Asked 2021-Dec-05 at 10:55I want to redirect page in axios interceptor.
However, when server-side rendering, I can't access to server side context in axios interceptor. So I try to use next/router. but it only works in client side.
How can I this?
Below is the function executed in the axios interceptor.
1// customAxios.ts
2const customAxios = axios.create();
3
4customAxios.interceptors.response.use((response) => response, responseErrorHandler);
51// customAxios.ts
2const customAxios = axios.create();
3
4customAxios.interceptors.response.use((response) => response, responseErrorHandler);
5// responseErrorHandler.ts
6const responseErrorHandler = (error: AxiosError): Promise<AxiosError> => {
7 if (error.response) {
8 if (error.message === TIMEOUT_MESSAGE) {
9 if (typeof window === 'undefined') {
10 // Redirect to /503 page in server side rendering
11 } else {
12 window.location.href = '/503';
13 }
14 }
15 }
16
17 return Promise.reject(error);
18}
19ANSWER
Answered 2021-Dec-05 at 10:55It is hard to give an answer without seeing your actual implementation of getServerSideProps or getStaticProps, but this might help. Your interceptor should probably throw a custom error you can identify in those methods and then use Next.js redirects
1// customAxios.ts
2const customAxios = axios.create();
3
4customAxios.interceptors.response.use((response) => response, responseErrorHandler);
5// responseErrorHandler.ts
6const responseErrorHandler = (error: AxiosError): Promise<AxiosError> => {
7 if (error.response) {
8 if (error.message === TIMEOUT_MESSAGE) {
9 if (typeof window === 'undefined') {
10 // Redirect to /503 page in server side rendering
11 } else {
12 window.location.href = '/503';
13 }
14 }
15 }
16
17 return Promise.reject(error);
18}
19// responseErrorHandler.ts
20const responseErrorHandler = (error: AxiosError): Promise<AxiosError> => {
21 if (error.response) {
22 if (error.message === TIMEOUT_MESSAGE) {
23 if (typeof window === 'undefined') {
24 throw new CustomError(); //Throw custom error here
25 } else {
26 window.location.href = '/503';
27 }
28 }
29 }
30
31 return Promise.reject(error);
32}
33And then, in the data fetching methods (needs to be adapted to Typesctipt):
1// customAxios.ts
2const customAxios = axios.create();
3
4customAxios.interceptors.response.use((response) => response, responseErrorHandler);
5// responseErrorHandler.ts
6const responseErrorHandler = (error: AxiosError): Promise<AxiosError> => {
7 if (error.response) {
8 if (error.message === TIMEOUT_MESSAGE) {
9 if (typeof window === 'undefined') {
10 // Redirect to /503 page in server side rendering
11 } else {
12 window.location.href = '/503';
13 }
14 }
15 }
16
17 return Promise.reject(error);
18}
19// responseErrorHandler.ts
20const responseErrorHandler = (error: AxiosError): Promise<AxiosError> => {
21 if (error.response) {
22 if (error.message === TIMEOUT_MESSAGE) {
23 if (typeof window === 'undefined') {
24 throw new CustomError(); //Throw custom error here
25 } else {
26 window.location.href = '/503';
27 }
28 }
29 }
30
31 return Promise.reject(error);
32}
33export async function getServerSideProps(context) {
34
35 try {
36 await customAxios.get(...)
37 } catch(e) {
38 if (e instanceof CustomError){
39 return {
40 redirect: {
41 destination: '/503'
42 }
43 };
44 } else {
45 //...
46 }
47 }
48
49 //...
50}
51QUESTION
Why React needs to check if the node is root before rendering?
Asked 2021-Oct-19 at 03:35I am learning about React internals from a talk by Paul O’Shannessy "Building React from scratch"
In "7:29" before explaining how rendering process work, he added these few lines of code which i really couldn't understand
1const ROOT_KEY = 'dlthmRootId";
2const instancesByRootId = {};
3let rootId = 1;
4
5function isRooot(node) {
6 if(node.dataset[RootKEY]) {
7 return true
8 }
9 else {
10 return false
11 }
12}
13He said that we need to make sure that no roots conflict!
I can't understand this part, what roots to conflict, is this related to server side rendering? or rendering to multiple roots instead of one root node in the app?
ANSWER
Answered 2021-Oct-19 at 03:35React app will be initialized in DOM with the code below.
1const ROOT_KEY = 'dlthmRootId";
2const instancesByRootId = {};
3let rootId = 1;
4
5function isRooot(node) {
6 if(node.dataset[RootKEY]) {
7 return true
8 }
9 else {
10 return false
11 }
12}
13import React from 'react';
14import ReactDOM from 'react-dom';
15import App from './App';
16
17ReactDOM.render(<App />, document.getElementById('root'));
18What it does is render React component into an element in DOM with the id 'root'.
Therefore, if there is any case where the root element will be duplicated or two React apps attempt to manipulate one single root element, that would be called root 'conflicts'.
QUESTION
Vue.js prefetch data with client side rendering
Asked 2021-Oct-14 at 12:54I know about ssr (server side rendering) in Vue, such as nuxt. It grabs data in serverPrefetch() function and renders content on server side, only after then the request is returning data to user and he is starting to download app.js.
But can we start loading data from backend immediatelly after user request, not waiting for download of vue script, and not stalling request before all data is loaded. So user is downloading app.js, while our server is doing work with sql requests and forming response.
ANSWER
Answered 2021-Oct-14 at 12:54As long as Nuxt is concerned - you can find a pretty good summary on the SSR (and client-side) options available in the following article. Spoiler alert - I think SSR is still the best shot with what you are trying to achieve. In the Nuxt world - NuxtServerInit and AsyncData are the men for the job.
Say you decided to stay away from SSR - what options do you have?
Have some super lightweight js loaded and ran before the Vue application that would fetch the data and share it with the app somehow (e.g. - saving it to the local storage). Would it really provide a speed advantage? I really doubt it, especially considering how fast the Vue app could load when cached in the client browser.
Dump the backend data into the server response itself. I mean, you could prefetch all the heavy stuff and stick it into your page as a json encoded object. That would save some time for initial requests for sure, but then - how large is that data chunk? Wouldn't it make the initial load too heavy, destroying the initial purpose? Those are the questions you should answer based on your particular use case.
QUESTION
How to use Gatsbys wrapPageElement with Typescript in a local plugin?
Asked 2021-Oct-13 at 19:34I'm trying to create a new Gatsby plugin. I started with developing it as a local plugin. In this plugin I want to provide a wrapPageElement for server side rendering and during runtime, so I've create the following configuration files:
gatsby-ssr.js:
1export { wrapPageElement } from "./src/wrapPageElement";
2gatsby-browser.js:
1export { wrapPageElement } from "./src/wrapPageElement";
2export { wrapPageElement } from "./src/wrapPageElement";
3src/wrapPageElement.tsx:
1export { wrapPageElement } from "./src/wrapPageElement";
2export { wrapPageElement } from "./src/wrapPageElement";
3import React from "react";
4import { GatsbyBrowser, GatsbySSR } from "gatsby";
5
6type WrapPageElement =
7 | GatsbyBrowser["wrapPageElement"]
8 | GatsbySSR["wrapPageElement"];
9
10export const wrapPageElement: WrapPageElement = ({ element, props }: any) => {
11 return <div {...props}>{element}</div>;
12};
13Now when I run my Gatsby project I get the following runtime error:
1export { wrapPageElement } from "./src/wrapPageElement";
2export { wrapPageElement } from "./src/wrapPageElement";
3import React from "react";
4import { GatsbyBrowser, GatsbySSR } from "gatsby";
5
6type WrapPageElement =
7 | GatsbyBrowser["wrapPageElement"]
8 | GatsbySSR["wrapPageElement"];
9
10export const wrapPageElement: WrapPageElement = ({ element, props }: any) => {
11 return <div {...props}>{element}</div>;
12};
13One unhandled runtime error found in your files. See the list below to fix it:
14
15Unknown Runtime Error
16
17Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `PageRenderer`.
18:
19
20No codeFrame could be generated
21When I don't try to render {element} within the wrapPageElement, for example a simple string, the wrapPageElement is successfully rendered. The problem seems to be related to element. Does somebody have an idea what is wrong here?
I'm on Gatsby version 3.14.0.
ANSWER
Answered 2021-Sep-28 at 04:29It seems to be unresolved (yet) according to this GitHub thread, where apparently types are not properly exported by Gatsby.
As a hacky workaround you can try:
1export { wrapPageElement } from "./src/wrapPageElement";
2export { wrapPageElement } from "./src/wrapPageElement";
3import React from "react";
4import { GatsbyBrowser, GatsbySSR } from "gatsby";
5
6type WrapPageElement =
7 | GatsbyBrowser["wrapPageElement"]
8 | GatsbySSR["wrapPageElement"];
9
10export const wrapPageElement: WrapPageElement = ({ element, props }: any) => {
11 return <div {...props}>{element}</div>;
12};
13One unhandled runtime error found in your files. See the list below to fix it:
14
15Unknown Runtime Error
16
17Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `PageRenderer`.
18:
19
20No codeFrame could be generated
21type Fn = (...args: Parameters<WrapPageElement>) => ReturnType<WrapPageElement>
22
23export const wrapPageElement: Fn = ({ element, props }: any) => {
24 return <div {...props}>{element}</div>;
25};
26Note: modified from the source in the GitHub's thread
Community Discussions contain sources that include Stack Exchange Network
Tutorials and Learning Resources in Server Side Rendering
Tutorials and Learning Resources are not available at this moment for Server Side Rendering
Share this Page
Get latest updates on Server Side Rendering