Storybook: Using `React.Provider` with `value={{components: any}}` causes `validateDOMNesting` error

[tyv]

Describe the bug
When using React Context Provider with value {components: ...} there is an error:

react-dom.development.js:21 Warning: validateDOMNesting(...): <ul> cannot appear as a descendant of <p>.
    in ul (created by EmptyBlock)
    in p (created by Context.Consumer)
    in Styled(p) (created by EmptyBlock)
    in div (created by Context.Consumer)
    in Styled(div) (created by Spaced)
    in Spaced (created by Context.Consumer)
    in Styled(Spaced) (created by EmptyBlock)
    in div (created by Context.Consumer)
    in Styled(div) (created by Spaced)
    in Spaced (created by Context.Consumer)
    in Styled(Spaced) (created by EmptyBlock)
    in div (created by Context.Consumer)
    in Styled(div) (created by EmptyBlock)
    in EmptyBlock (created by Ref)
    in div (created by Context.Consumer)
    in Styled(div) (created by Ref)
    in Ref (created by Sidebar)
    in div (created by Context.Consumer)
    in Styled(div) (created by Spaced)
    in Spaced (created by Context.Consumer)
    in Styled(Spaced) (created by Sidebar)
    in div (created by OverlayScrollbarsComponent)
    in div (created by OverlayScrollbarsComponent)
    in div (created by OverlayScrollbarsComponent)
    in div (created by OverlayScrollbarsComponent)
    in OverlayScrollbarsComponent
    in Unknown (created by Context.Consumer)
    in Styled(Component) (created by ScrollArea)
    in ScrollArea (created by Context.Consumer)
    in Styled(ScrollArea) (created by Sidebar)
    in nav (created by Context.Consumer)
    in Styled(nav) (created by Sidebar)
    in Sidebar
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer
    in Unknown (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Sidebar)
    in Sidebar (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout)
    in Unknown
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown (created by SizeMeRenderer(Component))
    in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
    in SizeMeRenderer(Component) (created by SizeMe(Component))
    in SizeMe(Component)
    in ThemeProvider
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Manager)
    in EffectOnMount (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

To Reproduce

const { Provider } = React.createContext<{ components: any }>({
  components: {}
});

export const Test: React.FC = () => (
  <div>
    <Provider value={{ components: {} }}>
        <div>1</div>
    </Provider>
  </div>
);

export default {
  title: 'Test',
  component: Test
};

Expected behavior
Demo with <div><div>1</div></div> is rendered

Screenshots

System:
Please paste the results of npx sb@next info here.

Environment Info:

  System:
    OS: macOS 10.15.5
    CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
  Binaries:
    Node: 12.8.0 - ~/.nvm/versions/node/v12.8.0/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.10.2 - ~/.nvm/versions/node/v12.8.0/bin/npm
  Browsers:
    Firefox: 77.0
    Safari: 13.1.1
  npmPackages:
    @storybook/addon-actions: ^6.0.1 => 6.0.1
    @storybook/addon-links: ^6.0.1 => 6.0.1
    @storybook/addons: ^6.0.1 => 6.0.1
    @storybook/react: ^6.0.1 => 6.0.1

[tyv]

Sorry for messing with name, was figuring out the exact behaviour.

So it is enough to provide it somewhere in story file, even might be not exported as part of story module, just used anywhere inside file. If I use any Context Provider with value {components: any} I am getting this error.

[tyv]

I discovered that description is not true and it happens in my specific case.
I am not sure yet, how my provider is caused that error like that has been thrown, but it is something with my codebase.

Sorry for noise, I am closing issue for now, and if I discover eventually some bugs in sb, I will reopen or create a new issue.

[mendeza]

Not sure the cause, but this is still an issue in v6.x, not using React.Provider (web-components/lit-html).

[agstover]

I was getting this issue when I was following along with the docs.

Had this:

import Button from './index'

// We create a “template” of how args map to rendering

const Template = (args) => <Button {...args} />;

// Each story then reuses that template
export const Primary = Template.bind({});

Primary.args = {
  onClick: null,
};

This produced the ValidateDomNesting error.

I realized that I didn't have the default export mentioned elsewhere in the docs. I added this and it fixed that error:

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

So I can't speak to what caused the error for y'all but it seems I didn't have all the necessary components of a story. If this is the case, the error message should be a lot more clear about this. Also if this is the case, it's hard to tell from the docs just what is required for a story file. The docs go through simple examples and it seems the default export and Template format just kind of pop in and out. For instance right after talking about default export the docs present this and they seem to suggest this could be a full file:

// Button.stories.js

import React from 'react';
import { Button } from './Button';

export const Primary=()=><Button primary label="Button"/>;

Primary.storyName='I am the primary';

After looking over the docs, I'm just not clear on what exactly is totally necessary to create a working Storybook file. The examples all suggest to me that they're complete files, but I suspect they may only be partials of a full file.

[mendeza]

All my Stories have the default export. Here's a complete example:

import { html } from 'lit-html';

export default {
  // "Buttons" sidebar component group
  title: 'Buttons/ActionButton',
  // This component must exist in `custom-elements.json`
  component: 'gui-action-button',
  // See: https://storybook.js.org/docs/react/essentials/controls#annotation
  // This determines control type in Story ui
  argTypes: {
    action: { control: { type: 'text' } },
    data: { control: { type: 'object' } },
    demoText: { control: { type: 'text'} },
    disabled: { control: { type: 'boolean' } },
    value: { control: { type: 'text' } },
  }
};
// use lit-html, not TSX
export const Default = ({ action, value, data, disabled, demoText }) => html`
<gui-action-button
  ?disabled=${disabled}
  @viewAction=${clickHandler}
  action=${action}
  data=${data}
  value=${value}
>
  ${demoText}
</gui-action-button>
`;

Default.parameters = {
  actions: {
    // Reflects (partially) in Story ui the event emitted onClick;
    // see browser console for complete event output
    handles: ['viewAction']
  }
}

Default.args = { 
  action: "doIt", 
  data: "{foo: 'bar'}",
  demoText: "edit this button label",
  disabled: false,
  value: "Stupendous",
};

const clickHandler = {
  // `handleEvent` is a required lit-html function name
  handleEvent(e: Event) {
    console.log(`GuiActionButton emitted 'viewAction'`, e);
  },
};

[azollai]

Hey @shilman. If you added to the 6.0.x Milestone, then why is this issue closed? (it still persists)