Page crashes when switching Playground to html view

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

[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.

[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!