Antd5 not support ssr for turbo monerepo nextjs?

Caesar-APAX commented 1 year ago

Reproduction link https://github.com/AsuraLuo/Turbo-Nextjs-Antd-Ecommerce

Steps to reproduce https://github.com/AsuraLuo/Turbo-Nextjs-Antd-Ecommerce

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs'
import { Helmet } from 'react-helmet'

interface HeadlessProps {
  helmet: any
}

class HeadlessDocument extends Document<HeadlessProps> {
  get helmetHtmlAttrComponents() {
    return this.props.helmet.htmlAttributes.toComponent()
  }

  get helmetBodyAttrComponents() {
    return this.props.helmet.bodyAttributes.toComponent()
  }

  get helmetHeadComponents() {
    return Object.keys(this.props.helmet)
      .filter((el) => el !== 'htmlAttributes' && el !== 'bodyAttributes')
      .map((el) => this.props.helmet[el].toComponent())
  }

  render(): JSX.Element {
    return (
      <Html {...this.helmetHtmlAttrComponents}>
        <Head>{this.helmetHeadComponents}</Head>
        <body {...this.helmetBodyAttrComponents}>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

// It's compatible with static-site generation (SSG).
HeadlessDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render
  const cache = createCache()
  const originalRenderPage = ctx.renderPage

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) =>
        (
          <StyleProvider cache={cache}>
            <App {...props} />
          </StyleProvider>
        )
    })

  const initialProps = await Document.getInitialProps(ctx)
  // Generate the css string for the styles coming from jss
  const css = extractStyle(cache)

  return {
    ...initialProps,
    styles: (
      <>
        {initialProps.styles}
        <style
          id="jss-server-side"
          key="jss-server-side"
          dangerouslySetInnerHTML={{ __html: css }}
        />
      </>
    ),
    helmet: Helmet.renderStatic()
  }
}

export default HeadlessDocument

import { Button } from 'antd'   // SSR CSS Working
import { Button } from '@ecommerce/ui' // SSR CSS Not Working

zombieJ commented 1 year ago

Could you help simplify reproduce? It's too much for check.

AsuraLuo commented 1 year ago

@zombieJ 你可以直接克隆仓库，本地测试就知道问题 https://github.com/AsuraLuo/Turbo-Nextjs-Antd-Ecommerce

MadCcc commented 1 year ago

Cannot start your project.

Caesar-APAX commented 1 year ago

@MadCcc 不好意思，我这个是turbo项目，您启动nextjs，需要使用

pnpm dev --filter=@ecommerce/storefront

AsuraLuo commented 1 year ago

Cannot start your project.

@MadCcc ，您这边可以运行吗?

Caesar-APAX commented 1 year ago

@MadCcc Can you run dev with next repo?

ant-design / cssinjs

Antd5 not support ssr for turbo monerepo nextjs? #86