Knobs: Toggling boolean results in "Expecting an HTML snippet" error

[sfinevelir]

Describe the bug
Trying to get up and running with the Knobs addon. Have a very simple, straightforward story that works when Knobs is not enabled. When Knobs is enabled and I attempt to add a boolean prop to my component, toggling the checkbox in the Knobs panel results in an error:

Expecting an HTML snippet or DOM node from the story: "Bool Test" of "Boolean Test".

I have a gut feeling that this is somehow my fault, but even when I strip this down to as little code as possible, it still breaks. My code appears to be in line with the example code provided by Storybook and the Knobs addon documentation.

To Reproduce
Steps to reproduce the behavior:

1. Created a new story (CSF) in a working Storybook install: 0-BoolTest.stories.js titled Boolean Test
2. Imported a component BoolTest from file bool-test.js
3. Component renders as expected in Storybook
4. Import boolean function from knobs addon, add a boolean call as a prop in the component export.
5. Boolean checkbox renders in Storybook, but when clicked displays the error above.

Expected behavior
Toggling the boolean checkbox should update the prop with the correct true/false value, and the component should re-render inside Storybook reflecting the correct value.

Code snippets

// 0-BoolTest.stories.js
import React from "react";
import { boolean } from "@storybook/addon-knobs";
import BoolTest from "./bool-test";

export default {
  title: "Boolean Test",
  component: boolTest
};

export const boolTest = () => (
  <BoolTest booleanIsChecked={boolean("Bool is checked?", false)} />
);

// bool-test.js
import React from "react";

const BoolTest = props => {
  let output = props.booleanIsChecked ? "CHECKED" : "unchecked";
  return <h1>{output}</h1>;
};

export default BoolTest;

System:
Environment Info:

System:
OS: macOS 10.15.2
CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
Binaries:
Node: 11.15.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.7.0 - /usr/local/bin/npm
Browsers:
Chrome: 79.0.3945.130
Firefox: 72.0.2
Safari: 13.0.4
npmPackages:
@storybook/addon-actions: ^5.3.10 => 5.3.10
@storybook/addon-docs: ^5.3.10 => 5.3.10
@storybook/addon-knobs: ^5.3.9 => 5.3.9
@storybook/addon-links: ^5.3.10 => 5.3.10
@storybook/addon-viewport: ^5.3.10 => 5.3.10
@storybook/addons: ^5.3.10 => 5.3.10
@storybook/html: ^5.3.10 => 5.3.10
@storybook/react: ^5.3.10 => 5.3.10

Additional context
I am currently using addon-knobs 5.3.9 after intentionally rolling back from 5.3.11 for testing. 5.3.11 does not resolve this issue. Not seeing any other Storybook warnings or errors in the command line or browser Javascript console, and other components that don't use the Knobs addon are functioning as expected.

[shilman]

@sfinevelir what's up with both @storybook/html and @storybook/react being installed?

[sfinevelir]

@shilman A good question! Likely leftover from earlier testing/setup. I've only just started using Storybook over the last day or two, did a bit of kicking-the-tires. I've removed @storybook/html from my package.json and uninstalled the module, confirmed that it's gone by running npx -p @storybook/cli@next sb info again. Unfortunately, the bug persists. 🐛

[sfinevelir]

Revisited my entire codebase, and discovered that I was using @storybook/html in my preview.js file:

import { addDecorator } from "@storybook/html";

Not sure where that came from—likely copied/pasted from a tutorial or example code for an addon—nor am I sure why or how the entire Storybook managed to function correctly (including a few addons) in spite of that, but changing that to React fixed my issue:

import { addDecorator } from "@storybook/react";

Thanks for the hint, @shilman!