StorybookDocs 5.2: Passed an incorrect argument to a color function, please pass a string representation of a color.

Describe the bug

If I switch on the “Docs”-Tab, I get this error message.

Passed an incorrect argument to a color function, please pass a string representation of a color.

Full stack trace [0].

To Reproduce

The “Docs”-Tab worked before as expected. I used Storybook Version 5.2.0-alpha.35 but upgraded to 5.2.1. [1]

The only configuration in .storybook/config.js that I had to change to make the other “Canvas”-Tab work was [2]:

-import { load, addParameters, addDecorator } from '@storybook/react';
-import { DocsPage } from '@storybook/addon-docs/blocks';
+import { configure, addParameters, addDecorator } from '@storybook/react';
+import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';

...

 addParameters({
-  docs: DocsPage,
+  docs: {
+    container: DocsContainer,
+    page: DocsPage,
+  },

...

-load(require.context('../src', true, /stories\.js$/), module);
-load(require.context('../src', true, /stories\.mdx$/), module);
+configure(require.context('../src', true, /stories\.js$/), module);

Expected behavior

The “Docs”-Tab should work after the migration.

Screenshot

Code

[0]

Error: Passed an incorrect argument to a color function, please pass a string representation of a color.

    at parseToRgb (polished.es.js:2183)
    at opacify (polished.es.js:3099)
    at fn (polished.es.js:2617)
    at convert (convert.js:178)
    at ensure (ensure.js:53)
    at DocsContainer (DocsContainer.js:85)
    at renderWithHooks (react-dom.development.js:15108)
    at mountIndeterminateComponent (react-dom.development.js:17342)
    at beginWork$1 (react-dom.development.js:18486)
    at HTMLUnknownElement.callCallback (react-dom.development.js:347)
error @ index.js:49

[1]

-    "@storybook/addon-a11y": "5.2.0-alpha.35",
-    "@storybook/addon-docs": "^5.2.0-alpha.35",
-    "@storybook/addon-knobs": "5.2.0-alpha.35",
-    "@storybook/addon-options": "5.2.0-alpha.35",
-    "@storybook/addon-storyshots": "5.2.0-alpha.35",
-    "@storybook/addon-storysource": "5.2.0-alpha.35",
-    "@storybook/cli": "5.2.0-alpha.35",
-    "@storybook/react": "5.2.0-alpha.35",
-    "@storybook/source-loader": "5.2.0-alpha.35",
+    "@storybook/addon-a11y": "^5.2.1",
+    "@storybook/addon-docs": "^5.2.1",
+    "@storybook/addon-knobs": "^5.2.1",
+    "@storybook/addon-options": "^5.2.1",
+    "@storybook/addon-storyshots": "^5.2.1",
+    "@storybook/addon-storysource": "^5.2.1",
+    "@storybook/cli": "^5.2.1",
+    "@storybook/react": "^5.2.1",
+    "@storybook/source-loader": "5.2.1",

[2]

import React, { Fragment } from 'react';
import { configure, addParameters, addDecorator } from '@storybook/react';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';
import { withA11y } from '@storybook/addon-a11y';

import { Style } from '../src';

addDecorator(withKnobs);
addDecorator(withA11y);

addParameters({
  docs: {
    container: DocsContainer,
    page: DocsPage,
  },
  options: {
    hierarchySeparator: /\//,
    hierarchyRootSeparator: '|',
    storySort: (a, b) => a[1].id.localeCompare(b[1].id),
  },
});

addDecorator(storyFn => (
  <Fragment>
    <Style />
    {storyFn()}
  </Fragment>
));

configure(require.context('../src', true, /stories\.js$/), module);

System

  System:
    OS: macOS Mojave 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    npm: 6.11.3 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 64.0.2
    Safari: 12.1.1
  npmPackages:
    @storybook/addon-a11y: ^5.2.1 => 5.2.1
    @storybook/addon-docs: ^5.2.1 => 5.2.1
    @storybook/addon-knobs: ^5.2.1 => 5.2.1
    @storybook/addon-options: ^5.2.1 => 5.2.1
    @storybook/addon-storyshots: ^5.2.1 => 5.2.1
    @storybook/addon-storysource: ^5.2.1 => 5.2.1
    @storybook/cli: ^5.2.1 => 5.2.1
    @storybook/react: ^5.2.1 => 5.2.1
    @storybook/source-loader": ^5.2.1 => 5.2.1

[rwieruch]

I got it. And I missed to include the crucial part in the bug report. During my migration I also changed:

 addParameters({
   options: {
+    theme: {
+      brandTitle: `My UI`,
+      brandUrl: '#',
+    },
-    name: `My UI`,
-    url: '#',
     hierarchySeparator: /\//,
     hierarchyRootSeparator: '|',
     storySort: (a, b) => a[1].id.localeCompare(b[1].id),
     ...

because if the warning in the developer console that said:

The options { name, url } are deprecated -- use  { theme.brandTitle, theme.brandUrl } instead.

I thought it had to be an object with two strings, but instead I should’ve checked the theming docs.

import { create } from '@storybook/theming';

...

addParameters({
  options: {
    theme: create({
      brandTitle: `My UI`,
      brandUrl: '#',
    }),
    hierarchySeparator: /\//,
    hierarchyRootSeparator: '|',
    storySort: (a, b) => a[1].id.localeCompare(b[1].id),
  },
});

Sorry again for wasting everyones time on this 😦 Looking forward to use the Docs feature!

[johnmccollum]

Just wanted to leave a quick note to say that I made exactly the same error with the theme - so your post helped me too. Thanks!