Docz: Page crashes when switching Playground to html view

[oliverjam]

Bug Report

I have a Styled Components ThemeProvider wrapped around the whole page to provide theme context.

const ComponentWrapper = ({ children }) => {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

When I click the html tab on a Playground the whole page crashes as the theme context is missing.

I think this is a duplicate of #184, except we're using Docz V0.10.3.

Environment

• OS: macOS 10.13.6
• Node/npm version: Node 8.11.1/npm 6.1.0

[pedronauck]

Hi @oliverjam, do you're using the wrapper prop on doczrc.js to provide a Wrapper?

[oliverjam]

Yup

// doczrc.js
export default {
  wrapper: 'src/wrapper',
}

// src/wrapper.js
import { ThemeProvider } from 'styled-components'
import theme from './src/theme'

const Wrapper = ({ children }) => (
  <ThemeProvider theme={theme}>
    {children}
  </ThemeProvider>
)

[denisborovikov]

Seems the bug from mentioned #184 is back. Have the same issue in just updated 0.11.1. Struggled to update from 0.8.0 all this time and didn't notice since when the bug has happened again.

[pedronauck]

That's weird, because I tried in our styled-components example using a <ThemeProvider> as a wrapper and anything happened 😕

Can you give a small repo with the basic to this bug show up?

[ChristienGuy]

@pedronauck I've got the same issue on a bigger project but I've made a simple repro of the problem here: https://github.com/ChristienGuy/docz-theme-provider-example.

I have a custom wrapper under docz/wrapper.js which is referenced in the doczrc.js file. The doc comes from src/Button/Button.mdx which uses the component in src/Button/Button.js

You can recreate the problem with the following steps:

1. Pull repo: https://github.com/ChristienGuy/docz-theme-provider-example.
2. yarn
3. yarn docz:dev
4. Go to localhost:3000
5. Go to "Button" doc
6. Click HTML view on the playground.

You'll see the error Cannot read property 'primary' of undefined. In this instance primary belongs to the theme object prop given to <ThemeProvider>

I also have a quick deployed version here: https://docz-themeprovider-example.netlify.com/Button

Where you can try and click the HTML button and you'll see the same error

I think the problem is when a styled-component uses a value from the theme in <ThemeProvider>. I think the reason you might not be seeing it in your example is that your example doesn't use the passed in theme prop anywhere.

[prasadsilva]

Exact issue here. Is there a way to turn off the HTML tab in Playground component?

[pedronauck]

I was investigating here and I think that this happens because we use renderToStaticMarkup to transform to html and I don't know why with styled-components using theme this crash. Maybe is something related to render static, I'm trying to figure out how fix this!

[lasimonne]

Workaround

You can use styled-system themeGet function in your style declaration instead of using the passed down theme prop.
If there are no theme values it will return fallback value which your provide

import { themeGet } from 'styled-system'

const ButtonStyled = styled('button')`
  background-color: ${themeGet('colors.primary', 'tomato')}
`

[csantiago132]

@pedronauck @oliverjam @ChristienGuy @prasadsilva i had this issue and heres how i solved it,

when you place the wrapper in the config, under .docz folder, the path is written wrong. example

// doczrc.js
   ...
   wrapper: './src/setup/docz_wrapper/wrapper',
   ...

this writes (under .docz > app > root.js)

import React from 'react'
import { setConfig, hot } from 'react-hot-loader'
import Theme from 'docz-theme-default'

import { imports } from './imports'
import db from './db.json'

import Wrapper from './src/setup/docz_wrapper/wrapper'; // <------ writes this path

const Root = () => (
  <Theme
    db={db}
    imports={imports}
    hashRouter={false}
    websocketUrl="ws://127.0.0.1:60505"
    wrapper={Wrapper}
  />
)

// TODO: this is temporary until react-hot-loader fix hooks issues
setConfig({
  pureSFC: true,
})

export default hot(module)(Root)

I went to that file and fixed the path to

import Wrapper from '../../src/setup/docz_wrapper/wrapper'; // changed to `../../` to go to right folder

and problem solved

[ChristienGuy]

@csantiago132 Thanks for the tip, unfortunately this doesn't work for my case.

Have you managed to get this working when using a styled-component that utilises the theme prop in some way?

[csantiago132]

@ChristienGuy yes I have, even with Typescript. I started working on this just a few days but the setup is complete and running.

[pedronauck]

Even with the new version of styled-components and docz this keep happening guys?

[csantiago132]

I guess so, it’s only changing the path and the problem goes away, at least on my end

[ChristienGuy]

@csantiago132 I pulled your repo and the branch but it fails to compile docz at first.

I changed wrapper in doczrc.js to src/setup/docz_wrapper/wrapper matching what I have in my set up and it all works fine. So I don't think it's the path that's causing the issue. I did notice that you are currently using styled-components version 4.x. where I am using 3.x.x.

@pedronauck
My versions are:

docz: 0.12.9
styled-components: 3.4.10

Upgrading styled-components to 4.x does fix it for me, which is great!

Unfortunately for me I can't upgrade from styled-components on the project that this is an issue with.

[csantiago132]

@ChristienGuy ok this is good to know then

[pedronauck]

Closed in favor of the newest release and old issue.