Failed to server render when use Slice API

[junghyeonsu]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

hello.

I am trying to use the new slice api from the gatsby 5 version, but I get an SSR related error only in the development environment. (It works fine when building and serving.)

I tested the Slice component as a component that just renders text without anything special.

Error Message

Test Slice Component

Usage

I located test slice in docs/src/pages/component/index.tsx.

gatsby-node

I used the api by referring to the documentation without anything special.

package.json

I use gatsby 5.5.0 version

{
  "dependencies": {
    "@karrotmarket/karrot-ui-icon": "^0.0.0-20220907.1",
    "@mdx-js/mdx": "^2.1.5",
    "@mdx-js/react": "^2.1.5",
    "@seed-design/design-token": "workspace:^",
    "@seed-design/react-theming": "workspace:^",
    "@vanilla-extract/css": "^1.9.1",
    "@vanilla-extract/recipes": "^0.2.5",
    "clsx": "^1.2.1",
    "downshift": "^7.0.5",
    "gatsby": "^5.5.0",
    "gatsby-plugin-image": "^3.0.0",
    "gatsby-plugin-local-search": "^2.0.1",
    "gatsby-plugin-mdx": "^5.0.0",
    "gatsby-plugin-mdx-frontmatter": "^0.0.4",
    "gatsby-plugin-portal": "^1.0.7",
    "gatsby-plugin-seed-design": "workspace:^",
    "gatsby-plugin-sharp": "^5.0.0",
    "gatsby-plugin-sitemap": "^6.0.0",
    "gatsby-plugin-typegen": "^3.1.0",
    "gatsby-plugin-vanilla-extract": "^3.0.1",
    "gatsby-plugin-web-font-loader": "^1.0.4",
    "gatsby-remark-images": "^7.0.0",
    "gatsby-source-filesystem": "^5.0.0",
    "gatsby-transformer-json": "^5.0.0",
    "gatsby-transformer-sharp": "^5.0.0",
    "lodash": "^4.17.21",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-use-flexsearch": "^0.1.1",
    "rehype-autolink-headings": "^6.1.1",
    "rehype-slug": "^5.0.1",
    "remark-gfm": "^1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.7",
    "@storybook/addon-a11y": "^7.0.0-beta.19",
    "@storybook/addon-actions": "^7.0.0-beta.19",
    "@storybook/addon-docs": "^7.0.0-beta.19",
    "@storybook/addon-essentials": "^7.0.0-beta.19",
    "@storybook/addon-interactions": "^7.0.0-beta.19",
    "@storybook/addon-links": "^7.0.0-beta.19",
    "@storybook/builder-vite": "^7.0.0-beta.19",
    "@storybook/react": "^7.0.0-beta.19",
    "@storybook/react-vite": "^7.0.0-beta.19",
    "@types/node": "^17.0.45",
    "@types/react": "^18.0.20",
    "@types/react-dom": "^18.0.6",
    "@typescript-eslint/eslint-plugin": "^5.39.0",
    "@typescript-eslint/parser": "^5.39.0",
    "@vanilla-extract/babel-plugin": "^1.2.0",
    "@vanilla-extract/vite-plugin": "^3.7.0",
    "@vanilla-extract/webpack-plugin": "^2.2.0",
    "babel-loader": "^8.3.0",
    "eslint": "^8.24.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-json-format": "^2.0.1",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.8",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "eslint-plugin-storybook": "^0.6.8",
    "prettier": "^2.7.1",
    "storybook": "^7.0.0-beta.19",
    "typescript": "^4.8.4",
    "vite": "^4.0.3"
  }
}

Reproduction Link

https://github.com/daangn/seed-design/tree/chore/slice-api

Steps to Reproduce

1. Clone seed-desing project
2. Run yarn install at project root
3. Run yarn build to build packages
4. Run cd docs to move gatsby project folder
5. yarn dev to start dev server
6. you can see slice component at http://localhost:8000/component/
7. you can see error when reload page.

Expected Result

Reload page with no error and we should be able to see the test Text.

Actual Result

Error occurs when reloading.

Environment

System:
    OS: macOS 12.6.1
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - /private/var/folders/vn/kgj9ng916t58xr1nsxyq_64c0000gn/T/xfs-d0b4b9bd/node
    Yarn: 3.2.2 - /private/var/folders/vn/kgj9ng916t58xr1nsxyq_64c0000gn/T/xfs-d0b4b9bd/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Safari: 16.1

Config Flags

only DEV_SSR: true

[pieh]

Hi @junghyeonsu

I was able to get same error as reported with your reproduction and will be looking into it.

For now I can only explain why it happens on refresh - DEV_SSR does have a timeout in which it no longer wait on page to be fully SSRed after ~2s to not keep developer wait too long to be able to interact at least with client and we serve "shell" then, but continue going through SSR pipeline in background so it's ready when page is eventually refreshed. And when everything is actually ready we get error you reported

[pieh]

I opened #37542 with the fix (well, adding missing support for slices with DEV_SSR). I did verify that those changes do fix the problem on your repro.

Will be looking to get fix approved, merged and released after the weekend

[junghyeonsu]

Thank you very much for your quick response!! 👍
After merged, I will test it again!

[pieh]

Fix published in @next dist tag for testing - gatsby@5.6.0-next.2

[junghyeonsu]

awesome! It works well with DEV_SSR flag!
Thank you 👍