Failed to server render when use Slice API

junghyeonsu commented 1 year ago

Preliminary Checks

[X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
[X] 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

Clone seed-desing project
Run yarn install at project root
Run yarn build to build packages
Run cd docs to move gatsby project folder
yarn dev to start dev server
you can see slice component at http://localhost:8000/component/
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 commented 1 year ago

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 commented 1 year ago

I opened https://github.com/gatsbyjs/gatsby/pull/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 commented 1 year ago

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

pieh commented 1 year ago

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

junghyeonsu commented 1 year ago

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

gatsbyjs / gatsby