Docz: add baseComponents fail, Cannot read property 'border' of undefined

[LilyZhou36]

Bug Report

After adding

TypeError: Cannot read property 'border' of undefined
borderRight
node_modules/gatsby-theme-docz/src/components/Sidebar/styles.js:31
  28 | zIndex: 1,
  29 | minWidth: 0,
  30 | maxHeight: '100vh',
> 31 | borderRight: t => `1px solid ${t.colors.border}`,

Error: [useColorMode] requires the ThemeProvider component
▶ 18 stack frames were collapsed.
(anonymous function)
  37 |  *
  38 |  * Let's warn if we find service workers in development.
  39 |  */
> 40 | if (`serviceWorker` in navigator) {

To Reproduce
To reproduce get the same error as mine, clone this themesDir example
https://github.com/doczjs/docz/tree/master/examples/with-themes-dir
Add a index.js under theme/gatsby-theme-docz/ folder, index.js content:

import React from 'react'
import { theme, useConfig, ComponentsProvider } from 'docz'
import { ThemeProvider } from 'emotion-theming'
import baseComponents from 'gatsby-theme-docz/src/components'

const componentsMap = {
  ...baseComponents
}

const Theme = ({ children }) => {
  const config = useConfig()
  return (
    <ThemeProvider theme={config}>
      <ComponentsProvider components={baseComponents}>
        {children}
      </ComponentsProvider>
    </ThemeProvider>
  )
}

const themeConfig = {
  colors: {
    primary: 'tomato',
    secondary: 'khaki',
    gray: 'lightslategray',
  },
}

export default theme(themeConfig)(Theme)

yarn, then yarn dev, you'll get error message.

Or you can clone from my sandbox
https://github.com/LilyZhou36/Docz-Sandobx
Please notify me if there's no error on your side

Expected behavior

Add default theme without any error

Environment

• docz version: next
• OS: OSX 10.13.6

[rakannimer]

Hey @LilyZhou36

Your code looks correct, the problem seems to be that you're importing ThemeProvider from emotion-theming instead of theme-ui.

Could you give https://github.com/LilyZhou36/Docz-Sandobx/pull/1 a try ?

[LilyZhou36]

Hey @LilyZhou36

Your code looks correct, the problem seems to be that you're importing ThemeProvider from emotion-theming instead of theme-ui.

Could you give LilyZhou36/Docz-Sandobx#1 a try ?

Thanks a lot! That works perfectly. One more thing, I copied ThemeProvider from emotion-theming from https://www.docz.site/docs/gatsby-theme. I don't know if import from emotion-theming makes more sense there. Thanks!

[rakannimer]

One more thing, I copied ThemeProvider from emotion-theming from docz.site/docs/gatsby-theme.

Thanks for pointing that out ! Looks like a bug in the docs. I'll make sure to get it fixed 👍

[LilyZhou36]

@rakannimer
Hi, I am so sorry to mention this issue again.
It seems like that the fix from last time only works partly.
To reproduce this issue:
add index.js with content

import React from "react";
import { theme, useConfig, ComponentsProvider } from "docz";
import { ThemeProvider } from "theme-ui";
import baseComponents from "gatsby-theme-docz/src/components";

const Theme = ({ children }) => {
  const config = useConfig();
  return (
    <ThemeProvider theme={config}>
      <ComponentsProvider components={baseComponents}>
        {children}
      </ComponentsProvider>
    </ThemeProvider>
  );
};

const themeConfig = {
  colors: {
    primary: "tomato",
    secondary: "khaki",
    gray: "lightslategray"
  }
};

export default theme(themeConfig)(Theme);

under https://github.com/doczjs/docz/tree/master/examples/with-themes-dir.

Or just clone my sandbox
https://github.com/LilyZhou36/Docz-Sandobx

If we do 'yarn docz dev', from getting page, we click its component -> Alert, http://localhost:3001/src-components-alert-alert, page, the component page won't load. It will show as:

Thank you!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[garretteklof]

What was the resolution here? I'm having trouble creating my own theme with the examples given in the docs. I'm getting the same errors as above as well as bizarre behavior like the main container turning slate blue (#6363CE, to be exact) - I have tried multiple alternatives, like shadowing gatsby-theme-docz/theme/index.js directly to no avail. Only thing that seems to work is not shadowing gatsby-theme-docz/index.js but overriding themeConfig in doczrc.js - though this is not the level of control I'm looking for. Thanks for any help in advance.

[nejcm]

There is a bug in the docs. You need to pass config.themeConfig to ThemeProvider.
Hope this helps.

[chrystal-lyu]

There is a bug in the docs. You need to pass config.themeConfig to ThemeProvider.
Hope this helps.

Hi @nejcm do you mean to change config inside <ThemeProvider theme={config}> into config.themeConfig as follows?

import React from "react";
import { theme, useConfig, ComponentsProvider } from "docz";
import { ThemeProvider } from "theme-ui";
import baseComponents from "gatsby-theme-docz/src/components";

const Theme = ({ children }) => {
  const config = useConfig();
  return (
    <ThemeProvider theme={config.themeConfig}>
      <ComponentsProvider components={baseComponents}>
        {children}
      </ComponentsProvider>
    </ThemeProvider>
  );
};

const themeConfig = {
  colors: {
    primary: "tomato",
    secondary: "khaki",
    gray: "lightslategray"
  }
};

export default theme(themeConfig)(Theme);

Unfortunately I'm still getting the error:
Error: [useColorMode] requires the ThemeProvider component

How did you fix it?

[nejcm]

Hey @chrystal-lyu. Yes. You need to shadow this index.js file and you can see how it is done there.

Regarding the useColorMode. I also had that error if I had the theme-ui dep. installed. Just uninstall it as it is already a part of the default theme and you can import it anyway. I did no investigate why this happens but I suspect the default theme uses a different version which is not compatible.

UPDATE: I installed the same version of theme-ui as the default theme uses and it works. So it is a problem with different versions. Current version is: "theme-ui": "^0.2.38"

[chrystal-lyu]

@nejcm Thanks for sharing your solution! Unfortunately I still could not get it work after several attempts (both installing "theme-ui": "^0.2.38" or remove it). My current shadowing index.js file which lives under my project's src/gatsby-theme-docz looks like this:

import React from 'react'
import { theme, useConfig, ComponentsProvider } from 'docz'
import { Styled, ThemeProvider } from 'theme-ui'
import baseComponents from "gatsby-theme-docz/src/components"

const Theme = ({ children }) => {
  const config = useConfig()
  return (
    <ThemeProvider theme={config.themeConfig}>
      <ComponentsProvider components={baseComponents}>
        <Styled.root>{children}</Styled.root>
      </ComponentsProvider>
    </ThemeProvider>
  )
}

const themeConfig = {
  colors: {
    primary: "tomato",
    secondary: "khaki",
    gray: "lightslategray"
  }
};

export default theme(themeConfig)(Theme)

And my doczrc.js file looks something like this:

export default {
  title: 'some project',
  description: 'some description',
  indexHtml: 'public/index.html',
  propsParser: false,
  ignore: ['README.md', '**/blog/**'],
  public: './public',
  themeConfig: {
    colors: {
      primary: '#3742fa',
    },
    initialColorMode: 'light',
  },
  menu: ["intro", "general"]
}

Error: [useColorMode] requires the ThemeProvider component still shows up.
Removing themeConfig inside doczrc.js doesn't help either.
Is it something I did wrong in my doczrc.js file?

[nejcm]

@chrystal-lyu Don't forget to uninstall it with your package manager to remove it.

My stack trace was showing that the error was happening in the Header component.

[nejcm]

@chrystal-lyu I will publish my theme in the next day or two. Will paste the link here and you can take a look at it.

[chrystal-lyu]

@nejcm thank you for pointing out the correct way of uninstalling packages! It is now working after I did yarn remove theme-ui. Turned out it was actually due to inconsistent theme-ui versions like you mentioned. Thanks again!

[nejcm]

This is my extended theme: link.
Good luck with yours.