docz: 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

docz-error

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 16 (6 by maintainers)

Most upvoted comments

@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:

Pull repo: https://github.com/ChristienGuy/docz-theme-provider-example.
yarn
yarn docz:dev
Go to localhost:3000
Go to “Button” doc
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.

ChristienGuy on Sep 10, 2018

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!

pedronauck on Sep 28, 2018

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

prasadsilva on Sep 17, 2018

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

ChristienGuy on Nov 7, 2018