Issue with netlify-cms and chakra-ui

As the title says I’m having an issue with using both chakra-ui and netlify-cms. More specifically when I attempt to view a preview of one of my components It shows a blank page in the browser and upon looking in the elements tab of my chrome dev tools there’s an empty div returned.

Screen Shot 2022-04-16 at 5.51.29 PM

Any help or insight would be greatly appreciated!

Hi Lando,

Not enough info here for us to help you. We don’t know even what chakra-ui is (maybe you’d like to share a reference?), and the symptom you are seeing is not clearly related to even our CMS, which unfortunately is not very well supported right now (not maintained by Netlify anymore, and our Support team isn’t super clued about its advanced usage).

Anyhow, what I’d suggest in getting us more actionable reproduction steps is:

  • what your code looks like
  • what your CMS config looks like
  • what the CMS changes when it saves content

…and even then we may not be able to help, but we can at least help guide you as you debug further :slight_smile:

1 Like

Hello, thanks for your response.

Sorry, I should’ve clarified, but chakra-ui is a React component library/CSS framework.

Here’s how my CMS class is setup.

  () =>
    import("netlify-cms-app").then((cms) => {
      cms.init({ config });
      cms.registerWidget("color", ColorControl, ColorPreview);
      cms.registerPreviewTemplate("config", AppPreview);
    }),
  { ssr: false, loading: () => <p>Loading...</p> }
);

Everything works fine until I set up the ChakraProvider in _app.js

<ChakraProvider>
  <Component {...pageProps} />
</ChakraProvider>

Also, my main motivation for even using chakra-ui is to write CSS in the component directly instead of having to pass in the CSS file to netlify-cms to have my content previews styled correctly.

Thanks again!

Hi there! Thanks for your interest in Netlify CMS. Looks like you posted your question a little while ago, but that you haven’t received a solution yet. Here’s where you might get more help:

netlifycms.org - the site houses our extensive documentation that likely contains helpful information to get you back on track.

netlify cms slack - join our friendly slack channel and chat with other cms pros to get the help you need.

GitHub Issues - think you’ve found a bug, or would like to make a feature request? Make your voice heard here. Netlify CMS is open source - PRs and other contributions are also welcome!

Stack Overflow Check StackOverflow for questions tagged “Netlify CMS” if you don’t get an answer in the Slack or the GH issues. StackOverflow reaches a worldwide audience of knowledgeable people.

Your question will be left open here for anyone to comment - but we encourage you to check out the above resources if you are still looking for a solution!

In case anyone stumbles across this same issue, I was able to resolve the issue by placing my preview content in an iframe, this comment on a Github issue will go into more detail.