Chakra-UI not rendering correctly in redwood apps

[hyliancoder]

Hi there, I’m having troubles with redwood not generating my chakra’s data-emotion-css on most things.has anyone else came across this issue in redwood?

exact same code works fine elsewhere (cra, next…etc) so I know its not chakra (also already troubleshot it with their team on discord and he said its either emotion or redwood related, but it works everywhere else so I’m guessing its an issue with redwood missing something or rendering something different that I need to add in a babel or webpack config?

In this example I tried adding header sizes and also tried adding letterspacing. I have to manually add anything I need as rem sizing as nothing is being imported and then rendered into css from the main chakra theme, ive tried using the default theme and a custom theme to no avail.

For example, I should be able to do
<Heading size='2xl' letterSpacing='widest'>

and it should render the css (from the theme settings default or defined in the customtheme)

font-size: 4rem;
letter-spacing: 2.25rem;

but instead it renders it literally and drops back to defaults:

font-size: 2xl;
letter-spacing: widest;

but its wild because some of the styling works… just not some of the fields getting data from the theme dynamically that is causing issues, and overall a lot of the styling isnt being loaded the correct way on render.

demo app:
https://socialite-plum.vercel.app/

my chakra provider:
https://github.com/hyliancoder/socialite/blob/master/web/src/index.js

my layout where styles are being used:
https://github.com/hyliancoder/socialite/blob/master/web/src/layouts/HeaderLayout/HeaderLayout.js

my custom theme file:
https://github.com/hyliancoder/socialite/blob/master/web/src/theme/theme.js

my rendered css/html:

how it should be:

if anyone has encountered this and has any tips, its much appreciated!

[Tobbe]

I’m using theme-ui in my project. The setup looks really similar to chakra, and this is what my index.js looks like

import ReactDOM from 'react-dom'
import { RedwoodProvider, FatalErrorBoundary } from '@redwoodjs/web'
import FatalErrorPage from 'src/pages/FatalErrorPage'
import { ThemeProvider } from 'theme-ui'
import theme from './theme'

import Routes from 'src/Routes'

import './scaffold.css'
import './index.css'
import { CartProvider } from './contexts/CartContext'

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <FatalErrorBoundary page={FatalErrorPage}>
      <RedwoodProvider>
        <CartProvider>
          <Routes />
        </CartProvider>
      </RedwoodProvider>
    </FatalErrorBoundary>
  </ThemeProvider>,
  document.getElementById('redwood-app')
)

The reason I posted that is because on your description it does sound like something’s up with the provider. So maybe try pulling stuff out of your index file until you basically only have the provider and a basic chakra element and see if that works

[hyliancoder]

Yeah I tried changing the hiarchy up and down but I didn’t try to remove other providers to test. I’ll check that out.

[thedavid]

I know that @Robert is a fan of Chakra. Have you had any success installing it on Redwood, Robert?

---

Otherwise, here are a few resources that might help you track down the problem @hyliancoder If you are able to diagnose, we’d very much like to make sure this is fixed or at least documented to help others down the road!

• Doc about Redwood’s Webpack Config including sections on CSS and Tailwind (which seems a bit similar)
  • this might help track down the issue. And there’s examples for extending Webpack config by customizing in your project if needed (also a new yarn rw setup webpack command to generate boilerplate template)
  • also, this might be helpful to pass along to people at Chakra and/or Emotion to see if there’s anything missing and/or that could cause a conflict
• Here are a couple of examples of different CSS tools/libraries being implemented in Redwood that use Emotion:
  • Nprogress package
  • Theme UI
• Longshot: there’s been a long outstanding Issue open regarding Webpack and CSS order differing between dev and production build. See #549
  • I’m not sure if this is still an issue or, if so, would be causing your issue since it’s build time-related.
  • You can replicate the deploy build process for web with yarn rw build. Here’s the docs.

[hyliancoder]

Yeah I think its some kind of build time/order error with how chakra doesnt generate the css from its js files until build.

But taking inspo from the Theme-UI (which chakra is heavily influenced by) link you posted above, I was able to get styling working by doing this:

import { extendTheme } from '@chakra-ui/core';
import { tailwind } from '@theme-ui/presets';
const config = {
  ...tailwind,
  useSystemColorMode: false,
  initialColorMode: 'dark',
};

const customTheme = extendTheme({ config });

export default customTheme;

which an extra step that shouldnt be needed, since chakra usually provides that css. But it works for getting the styles for now anyway.