SSR in Develop #28138
Replies: 44 comments 139 replies
-
I've tested it on kent c dodds site and I see It didn't show without the flag |
Beta Was this translation helpful? Give feedback.
-
Regarding lazy bundling, is it expected to work with the MDX plugin yet? Seems like the MDX plugin still eagerly builds everything when |
Beta Was this translation helpful? Give feedback.
-
Hey everyone, I’m running into an issue that I’m fairly convinced is this issue (or related to SSR), but the additional debug features are not working on my end. Context: I’m building a website over at https://github.com/addisonschultz/Immaterial (immaterialcorp.com), and everything for the most part work and appears to be fine. The main issue I’m running into, is that when you navigate to certain pages from external links / navigating back from external links (immaterialcorp.com/cart OR immaterialcorp.com/product-name [this issue appears on all dynamically generated pages]), the CSS is not applied correctly. Looking into this, it seems that the incorrect After looking into this, it seems directly related to:
I was looking into this issue/PR, and was wondering if this experimental development build would help me figure out what was going on, but I’m not getting any logs, nor expected (incorrect css) behavior when running this (Again, my styles are only incorrect on prod). I’m a bit confused at what I should try or do next. I’ve even hard coded the styles into css to see if a forced element style would help, but the wrong Any help would be appreciated, even if it’s just help getting this dev feature working so I can debug more on my end. Thanks in advance! Expected (dev): Actual (prod / |
Beta Was this translation helpful? Give feedback.
-
I'm using exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /react-leaflet-geodesic/,
use: loaders.null(),
},
],
},
})
}
} This does not work with SSR in develop. How do I work around that issue with SSR in develop? |
Beta Was this translation helpful? Give feedback.
-
I have a hydration bug that didn't show up in development even though I'm using |
Beta Was this translation helpful? Give feedback.
-
Hello We are struggling with css delivery when using When This also happens when we type in URLs and try to load these directly, but it seems like the css is delivered as expected every time when visiting We are using following versions of related packages: Setting Please let me know if you need more information or if I should submit a bug report! Other than that, thank you for a great product and exciting features lately! Edit:
|
Beta Was this translation helpful? Give feedback.
-
My gatsby-config.js: module.exports = {
flags: {
DEV_SSR: false
},
siteMetadata: {
title: "Wordpress",
},
plugins: [
{
resolve: "gatsby-source-wordpress-experimental",
options: {
url: "http://localhost:8080",
},
},
"gatsby-plugin-sharp",
"gatsby-plugin-sitemap",
"gatsby-plugin-offline",
{
resolve: "gatsby-plugin-manifest",
options: {
icon: "src/images/icon.png",
},
},
"gatsby-transformer-sharp",
{
resolve: "gatsby-source-filesystem",
options: {
name: "images",
path: "./src/images/",
},
__key: "images",
},
],
}; info:
|
Beta Was this translation helpful? Give feedback.
-
Hi, After going from Gatsby 2.29.3 to 2.31.1, source map seems to be gone even with DEV_SSR: false. Chrome DevTools now only shows webpack commons.js in Sources. With flag DEV_SSR:false, the following reproduces the issue (yarn install + gatsby clean run between each case) Source missing in Chrome: Source showing in Chrome package.json Any idea if related to this flag? |
Beta Was this translation helpful? Give feedback.
-
Found a corner case that is not caught by DEV_SSR but handled correctly by "gatsby build" (build failing): I have a couple of worker threads that are compiled by webpack (with the help of "gatsby-plugin-workerize-loader"). |
Beta Was this translation helpful? Give feedback.
-
On the condition of that my understanding of SSR in DEV together with fast reload enabled is correct: the SSR-generated version of a page will differ while doing the hydration process because the fast reload -"version" got a 'shadow-modal' that the SSR-version lacks. The discrepancy between these two versions generates a warning like the on screenshotted below.
This shadow-modal is needed to present compilation/linting/etc warnings and errors on an overlay in the browser, so I get why it's there. But to mute this warning I'm wondering if it would be a good idea to add the fast reload modal to the SSR-rendered version, only in dev mode while both DEV_SSR and FAST_REFRESH is enabled, so the the SSR and CSR version doesn't have this diff? My motivation to suggest this is that I see we easily create diffs in the SSR and CSR output in our code base ourself, like when we conditionally determine things based on if we are on the server or in the browser (like accessing |
Beta Was this translation helpful? Give feedback.
-
Intermittently get this white page error on local environment, only occurs with the new DEV_SSR enabled. seems related to
|
Beta Was this translation helpful? Give feedback.
-
There's an issue with [gatsby-image] Issue with SSR, expected server HTML to contain a matching picture in div |
Beta Was this translation helpful? Give feedback.
-
Not sure if this is the right place to report but I'm consistently getting an error related to using the minified version of react when running in combination with vercel serverless functions. ie |
Beta Was this translation helpful? Give feedback.
-
Hi, I encountered this error today: I guess I need to use the solution described here: https://www.gatsbyjs.com/docs/debugging-html-builds/#how-to-check-if-window-is-defined |
Beta Was this translation helpful? Give feedback.
-
This feature is the bee's knees. It's helped me avoid and diagnose a couple of nasty prod bugs already. ⭐ |
Beta Was this translation helpful? Give feedback.
-
i found an issue related to this discussion with dev_ssr true. I resolved it, was from a timeout Have a look on |
Beta Was this translation helpful? Give feedback.
-
I'm also getting this error
|
Beta Was this translation helpful? Give feedback.
-
I just noticed that setting |
Beta Was this translation helpful? Give feedback.
-
Is
Issue #30750 |
Beta Was this translation helpful? Give feedback.
-
Is there a way to have output CSS with dev-ssr enabled? I see the html being rendered, but no css is emitted with my setup Can we use |
Beta Was this translation helpful? Give feedback.
-
when location.pathname rendered from Server is not ending by a trailing slash and window.location.pathname is ending by trailing slash from client it's result by aria-current mismatch from gatsby-link Somebody should to check that. I did a patch to resolve this mismatch here |
Beta Was this translation helpful? Give feedback.
-
Hi All I'm developing a new Gatsby theme and using yarn workspaces as dev environment. I have been developing sites in Gatsby before and I must say it has been extremely frustrating to have dev_ssr on and a huge pain compared to not having it. The main frustration is that whenever a change/mismatch big or small (sometimes very tiny) between the server and client occurs it just crashes and I have to create a new dev build. This sometimes happens if I just add/remove a console.log.. In the browser: in the terminal: The intention of giving the SSR errors right away without having to do builds to get them is awesome, but then the errors have to be descriptive or else they just slow down development a lot and are the cause of a lot of frustration. I hope this is of some use to you. |
Beta Was this translation helpful? Give feedback.
-
IntroHey team, I just spun up a new Gatsby project and I got six staging features. I theme with Chakra-ui and after chasing a bug for a while I discovered it was the feature Error Message react_devtools_backend.js:2842 Warning: Prop `className` did not match. Server: "chakra-heading css-0" Client: "chakra-heading css-1gfmyfr" Project Details
module.exports = {
// ..
flags: {
PARALLEL_SOURCING: true,
LMDB_STORE: false,
FAST_DEV: true,
DEV_SSR: true,
DEV_WEBPACK_CACHE: true,
PRESERVE_FILE_DOWNLOAD_CACHE: false,
},
// ...
}
//...
"dependencies": {
"@chakra-ui/icons": "^1.0.15",
"@chakra-ui/react": "^1.6.6",
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@mdx-js/mdx": "^1.6.22",
"@mdx-js/react": "^1.6.22",
"framer-motion": "^4.1.17",
"gatsby": "^3.11.1",
"gatsby-plugin-image": "^1.12.0",
"gatsby-plugin-layout": "^2.12.0",
"gatsby-plugin-manifest": "^3.12.0",
"gatsby-plugin-mdx": "^2.12.0",
"gatsby-plugin-prettier-eslint": "^1.0.6",
"gatsby-plugin-react-helmet": "^4.12.0",
"gatsby-plugin-react-svg": "^3.0.1",
"gatsby-plugin-sass": "^4.12.0",
"gatsby-plugin-sharp": "^3.12.0",
"gatsby-source-datocms": "^2.6.16",
"gatsby-source-filesystem": "^3.12.0",
"gatsby-transformer-sharp": "^3.12.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"sass": "^1.38.0"
},
/...
import './src/assets/sass/_index.scss';
import { CSSReset, ChakraProvider } from '@chakra-ui/react';
import React from 'react';
const theme = extendTheme({
// ...
fonts: {
heading: "'Montserrat Alternates', 'Montserrat', sans-serif",
body: 'Montserrat',
},
// ...
});
export const wrapRootElement = ({ element }) => (
<ChakraProvider theme={theme}>
<CSSReset />
{element}
</ChakraProvider>
);
import { Heading, Box } from '@chakra-ui/react';
import * as React from 'react';
// markup
const IndexPage = () => {
return (
<Box>
<Heading as="h2" size="2xl">
(2xl) In love with React & Next
</Heading>
</Box>
);
};
export default IndexPage; Thanks for all the hard work! 🙌 💪 |
Beta Was this translation helpful? Give feedback.
-
Hi: I set to True the FAST_REFRESH flag but didn't work. Thanks. |
Beta Was this translation helpful? Give feedback.
-
An issue I've experienced is that when
We have an in-house library built with styled components so I did suspect and rolled them back to a few versions to make sure it wasn't an issue there - which it wasn't. Turns out |
Beta Was this translation helpful? Give feedback.
-
I'm having a lot of trouble in finding the cause of DEV_SSR bugs It turns out that the page listed is not an issue and the .call error is even more obscure |
Beta Was this translation helpful? Give feedback.
-
We've re-enabled |
Beta Was this translation helpful? Give feedback.
-
I just upgraded to Gatsby 4.24 from 4.17, and I have to explicitly disable
I believe this is the same error reported #36678 with a reproduction link |
Beta Was this translation helpful? Give feedback.
-
Like @phil-lgr I am having a lot of trouble finding the cause of errors during SSR in develop. For example: Failed to Server Render (SSR)
Error message:
React.Children.only expected to receive a single React element child.
File:
node_modules/@emotion/stylis/dist/stylis.esm.js:602:1
Stack:
WebpackError: React.Children.only expected to receive a single React element child.
at node_modules/@emotion/stylis/dist/stylis.esm.js:602:1
at node_modules/styled-components/dist/styled-components.esm.js:1:13845
I'm fairly confident that the error is occurring in our component library, but have already sunk a few hours into trying to work out what this error in particular could be. Any suggestions for what to try next? |
Beta Was this translation helpful? Give feedback.
-
I’m not sure if this is the right place to ask but how is there any documentation on how to render SSR pages in production? I have a custom node sever that serves built pages but how do I server SSR pages as gatsby develop does? Gatsby develop is not meant to run in prod, is it? |
Beta Was this translation helpful? Give feedback.
-
This is an issue for discussing & reporting bugs for the upcoming SSR in development feature. The coming feature enables SSR in development so certain bugs that previously only show up in builds (like trying to access the
window
object) will now be seen during development which will help speed up fixing them.Original PR: #27432
Original issue: #25729
How to test
Add the
DEV_SSR
flag to yourgatsby-config.js
:Migrating custom webpack config
If you've added custom webpack logic for the
build-html
stage e.g. to exclude a module from loading, you'll also need to add these rules for thedevelop-html
stage.Beta Was this translation helpful? Give feedback.
All reactions