React chakra ui removing all styles from project

awfulminded commented 2 years ago

What version of `astro` are you using?

latest

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

I'm trying to use chakra ui, but at some point when using a jsx component, the whole project loses styles, including components from chakra. It only works once when I create the whole project from scratch, but it stops after the first page refresh

Jsx component im trying to add:

import React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
import { Button } from '@chakra-ui/react'

export default function Chakra() {
    return (
        <ChakraProvider>
            <Button colorScheme='blue'>Button</Button>
            <Button colorScheme='blue'>Button</Button>
        </ChakraProvider>
    )
}

index.astro:

---
import Layout from "../layouts/Layout.astro";
import Chakra from "../components/Chakra.jsx";
---

<Layout>
    <h1>Hello World</h1>
    <Chakra />
</Layout>

layout.astro

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="generator" content={Astro.generator} />
        <title>123</title>
    </head>
    <body>
        <slot />
    </body>
</html>

Link to Minimal Reproducible Example

.

Participation

[ ] I am willing to submit a pull request for this issue.

innocces commented 2 years ago

some problem.

bluwy commented 2 years ago

Here's a repro: https://stackblitz.com/edit/github-89mxgh

Looks like Chakra uses Emotion, which doesn't support renderToPipeableStream in SSR (https://github.com/withastro/astro/issues/4432#issuecomment-1260458609). Closing as it's a duplicate of https://github.com/withastro/astro/issues/4432

tropperstyle commented 1 year ago

Are we sure this is a duplicate?

1) Why do the styles load on the first (SSR) page load after the server boots, but not on subsequent SSR page loads? 2) It works in Remix, which uses renderToPipeableStream

I'm trying to dig into both of the above, but commenting here as I'm not convinced this is entirely an upstream issue.

kstulgys commented 1 year ago

@awfulminded You need this:

<Chakra client:load />

withastro / astro