Blank page and JS error on navigation when an arg is named "background" and set to true

Describe the bug

When a React component has a prop named background, and when this prop is set to true in a story, navigating to this story fails. Instead, just after the story is displayed, the page becomes blank and there is a JS error:

Uncaught TypeError: value.replace is not a function
at parseValue (2.manager.bundle.js:361)
    at 2.manager.bundle.js:416
    at mountState (vendors~main.manager.bundle.js:103296)
    at Object.useState (vendors~main.manager.bundle.js:103918)
    at useState (vendors~main.manager.bundle.js:118346)
    at useColorInput (2.manager.bundle.js:415)
    at ColorControl (2.manager.bundle.js:499)
    at renderWithHooks (vendors~main.manager.bundle.js:102655)
    at updateFunctionComponent (vendors~main.manager.bundle.js:105026)
    at mountLazyComponent (vendors~main.manager.bundle.js:105347)

To Reproduce - With a demo repo

You can use the demo repo:

git clone https://github.com/phbernard/storybook-issue.git
cd storybook-issue
npm install
npm run storybook

Navigate to Button > Primary. The page disappears almost instantly and becomes blank. There is a JS error in the background.

To Reproduce - From scratch

To reproduce the issue from scratch, so you clearly see what’s going on:

npx create-react-app demo
cd demo
npx sb init
npm run storybook

In your browser, navigate to Button > Primary. You can see the demo button, as expected.

In src/stories/Button.js, Button.propTypes hash, add a new prop:

background: PropTypes.bool

In src/stories/Button.stories.js, Primary.args hash, add a new prop:

background: true

Navigate to Button > Primary again (you might need to refresh the page). This time, the page disappears almost instantly and becomes blank. There is a JS error in the background.

System

Output of npx sb@next info:

System:
  OS: Windows 10 10.0.19042
  CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Binaries:
  Node: 14.15.3 - C:\PROGRAM FILES\NODEJS\node.EXE
  npm: 6.14.9 - C:\PROGRAM FILES\NODEJS\npm.CMD
Browsers:
  Chrome: 90.0.4430.93
  Edge: Spartan (44.19041.906.0), Chromium (90.0.818.56)
npmPackages:
  @storybook/addon-actions: ^6.2.9 => 6.2.9
  @storybook/addon-essentials: ^6.2.9 => 6.2.9
  @storybook/addon-links: ^6.2.9 => 6.2.9
  @storybook/node-logger: ^6.2.9 => 6.2.9
  @storybook/preset-create-react-app: ^3.1.7 => 3.1.7
  @storybook/react: ^6.2.9 => 6.2.9

Additional context

The issue does not happen when:

• The background prop is renamed in src/stories/Button.js and src/stories/Button.stories.js (e.g. to background_)
• The background prop is set to false in src/stories/Button.stories.js

[shilman]

Thanks so much for the feedback @phbernard — makes a ton of sense and I’ll definitely address it tomorrow in the next iteration of sb repro!!!

The workaround to your problem is editing .storybook/preview.js:

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
+     color: /color$/i,
-     color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

@yannbf I’m thinking that we should probably change the defaults to be more conservative. WDYT?

[phbernard]

It works! Thank you @shilman!