mainframev
commented
1 month ago @zailic hi 👋🏻
Try to add transpilePackages: ["@fluentui/react-components"] as it mentioned here
Closed zailic closed 1 month ago
mainframev
commented
1 month ago @zailic hi 👋🏻
Try to add transpilePackages: ["@fluentui/react-components"] as it mentioned here
zailic
commented
1 month ago hi @mainframev, yeesss it worked, thanks! I really appreciate your quick feedback on this. I guess this issue it could be closed...but (for a frictionless developer experience) I wonder if it wouldn't be better to keep this issue open until the documentation is updated as well?
mainframev
commented
1 month ago @sopranopillow 👋🏻 , can you confirm that suggested approach is ok?
I see that #30766 is still opened and with transpilePackages it works even without the plugin, so not sure if it's correct.
I can close this issue as duplicate of the mentioned above.
zailic
commented
1 month ago @mainframev, actually the issue is still present if i'm going further and trying to use styles. I've updated the reproduction sample. Could you please take a look?
mainframev
commented
1 month ago @zailic You can't use makeStyles directly in the server component, you would have to put it inside a separate client-component and import inside the page. Or you can enable 'use client' for page, but I assume that's not what you want. So something like this will work:
// page.tsx
import * as React from "react";
import { Button } from "@fluentui/react-components";
import Main from "./Main";
export default function Home() {
return (
<Main>
<Button>Hello everyone</Button>
</Main>
);
}
// Main.tsx
"use client";
import { makeStyles } from "@fluentui/react-components";
const useStyles = makeStyles({
main: {
height: "100vh",
},
});
export default function Main({ children }) {
const styles = useStyles();
return <main className={styles.main}>{children}</main>;
}
microsoft-github-policy-service[bot]
commented
1 month ago This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!
Library
React Components / v9 (@fluentui/react-components)
System Info
Are you reporting an Accessibility issue?
None
Reproduction
CodeSandbox Sample
Bug Description
Actual Behavior
I'm pretty sure the SSR setup recipe from fluentuiv9 docs it worked at some point, but it seems this is no longer valid: When I'm trying to run it, the next server reports an error like the screenshot above:
Of course if I'm adding the
'use client'directive the error will go away, but this will transform a server component into a client component and this is not what I want.Expected Behavior
V9 components should be allowed into RSC, as you mentioned on the docs:
Logs
Requested priority
Blocking
Products/sites affected
No response
Are you willing to submit a PR to fix?
no
Validations