How can I use my own theme provider?

[AFK-Python]

I've been trying to use the provider from Fluent UI - see here for docs - but I can't quite seem to get it to work properly.

I've currently wrapped the Render component in the client.tsx file like so:

import {
  Provider as MSTeamsProvider,
  teamsTheme
} from "@fluentui/react-northstar";

... stuff ...

  return (
    <MSTeamsProvider theme={teamsTheme}>
      <Render config={config} data={data} />
    </MSTeamsProvider>
  )

This does allow me to style children components in the puck.config.tsx file with the teamsTheme; however, pages on the client side seem to render as vanilla html briefly (it ends up being pretty apparent on a reload), before re-rendering with the teamsTheme.

I tried wrapping the Client component in [...puckpath]/pages.tsx with the MS Teams provider, but this led to some errors that I wasn't sure how to go about fixing:

Server Error
Error: Cannot read properties of undefined (reading 'prototype')

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Is there a way I can avoid this re-render and have my components from the config display immediately with the theme I would like them to?

Interestingly enough, this re-render doesn't appear on the edit page - the components immediately appear as MS Teams styled there.

Apologies for the niche question, but I am not super familiar with Next and I'm having a little difficulty navigating how I would edit the starter repo code to accomplish this.

Thanks in advance,
Alex

[chrisvxd]

Hey @AFK-Python! I've not tried using Fluent UI before.

You're likely getting a flash of unstyled content (FOUC) using <Render> because the it renders on the server, but the Fluent UI theme isn't kicking in until JavaScript runs on the client.

The editor (<Puck>) doesn't render server-side, and only renders on the client once JavaScript kicks in - so although there's no FOUC, that's because it doesn't render on the server at all.

To test this, try disabling JavaScript in your browser. won't render anything. will be unstyled.

This sounds more like a Fluent UI + Next.js 13 (with App Router) issue than anything to do with Puck specifically - probably something with how the styles are injected on the server. I'd recommend looking into that specifically. If you're stuck, take Puck out of the mix entirely and see if you can get it working. Alternatively, you could try using the Next.js Pages Router instead of the App Router.

Hope that helps! Going to move this to Discussions.

[AFK-Python]

Hi @chrisvxd,

Thanks for the response!

You are correct in that it is a FOUC problem. I've gotten Fluent UI to work previously (in vanilla react), so I think your suggestion of checking out how styles are injected is the way to continue. I'll keep digging into this and hopefully find a solution to follow up with.

Thanks again,
Alex

[AFK-Python]

I was able to achieve the behavior I wanted by just removing the pre-rendering/server side rendering. I get this kinda defeats the purpose of Next, but it works well for my team's use case.

I made the following change to the client.tsx file:

const ClientTest: React.FC<{
  path: string;
  data: Data;
  isEdit: boolean;
}> = ({
  path,
  data,
  isEdit
}) => {
  if (isEdit) {
  ....
  
const Client = dynamic(() => Promise.resolve(ClientTest), {ssr: false})

export default Client;

and I updated the corresponding import:

import Client from "./client";

[chrisvxd]

Nice one! What is your use case, out of interest?

FYI we just created a Discord server, if you prefer to engage through that medium: https://discord.gg/D9e4E3MQVZ

(We'll continue to be active on GH)

[AFK-Python]

My team provides an app for teams where users can configure what their frontend looks like. This is currently done via JSON, which is pretty bad imo. Once I found this repo, I immediately brought it up as Wix for React is way better than JSON from the user perspective of creating their frontend. Additionally, we don't have that many 'pages' to work with and they are not too intensive so rendering optimization doesn't really matter for us.

It looks like I'll be able to push this feature upgrade for us, but tbd. If you're curious about the use case even more, please check out our repo for the MS Teams app.

[chrisvxd]

That sounds like a great use case!

And cool, so you work for @SAP? Would be awesome if Puck ends up in one of your projects.

[AFK-Python]

Yup, I do - I'll make sure to follow up if we do end up integrating it.