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

[rwieruch]

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]

Narrowing it further down:

1. I use the old storyOf API and hopefully I don't need to refactor this atm.
2. I use a custom .storybook/webpack.config.js [3]. I guess that's where I have to change something to make it work.
3. I am using Storybook's Storysource addon too.
4. I am using styled components, in case this matters.
5. I am using Storybook's Doc's preset [4].
6. I tried to remove [4] and used the manual configuration, but it didn't work for me.

---

[3]

const path = require('path');

module.exports = ({ config }) => {
  config.module.rules.push(
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader'],
    },
    {
      test: /stories\.(js|jsx)?$/,
      loader: require.resolve('@storybook/source-loader'),
      options: {
        injectParameters: true,
        inspectLocalDependencies: false,
        inspectDependencies: false,
      },
      enforce: 'pre',
    }
  );

  // https://github.com/storybookjs/storybook/issues/7092
  config.devtool = 'eval';

  return config;
};

[4]

module.exports = ['@storybook/addon-docs/react/preset'];

[shilman]

@rwieruch A few things:

You don't need to configure docs.{page,container} or source-loader if you're using the docs preset. Though I think this is unrelated.

Judging from the stack trace, this looks to be a problem with theming. It looks like you're using the default theme, and AFAIK nothing really changed in theming between the two versions. So I suspect that this is some kind of dependency issue. Have you tried deleting node_modules & reinstalling? Deleting lock file and reinstalling?

[rwieruch]

@rwieruch A few things:

You don't need to configure docs.{page,container} or source-loader if you're using the docs preset. Though I think this is unrelated.

Judging from the stack trace, this looks to be a problem with theming. It looks like you're using the default theme, and AFAIK nothing really changed in theming between the two versions. So I suspect that this is some kind of dependency issue. Have you tried deleting node_modules & reinstalling? Deleting lock file and reinstalling?

• remove docs.{page,container} :x:
• remove source-loader :x:
• remove docs.{page,container} and source-loader :x:
• rm -rf node_modules/ && rm -rf package-lock.json && npm install :x:

Unfortunately still same error output. Canvas works though.

[rwieruch]

~But you mentioned theming @shilman , so I commented the following in my .storybook/config.js and it worked ✅ :~

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

Edit: False alarm, didn't work by excluding the global style ... ❌ CC @shilman

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