Storybook: validateDOMNesting Error

[zsteinerjc]

Describe the bug
Migrated existing Storybook instance to v6.0.13. Despite being a @story/vue project, get very large React DOM Nesting error that consumes most fo the browser console.

To Reproduce

1. Run storybook:serve
2. Open browser console.
3. View Error

Warning: validateDOMNesting(...): <ul> cannot appear as a descendant of <p>.

Expected behavior
No run time errors.

Screenshots

Code snippets
It shows up even when all stories are removed from the library.

System:
System:
OS: macOS 10.15.6
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
Yarn: 1.22.0 - /usr/local/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v12.16.1/bin/npm
Browsers:
Chrome: 84.0.4147.125
Firefox: 77.0.1
Safari: 13.1.2
npmPackages:
@storybook/addon-a11y: ^6.0.13 => 6.0.13
@storybook/addon-actions: ^6.0.13 => 6.0.13
@storybook/addon-backgrounds: ^6.0.13 => 6.0.13
@storybook/addon-controls: ^6.0.13 => 6.0.13
@storybook/addon-docs: ^6.0.13 => 6.0.13
@storybook/vue: ^6.0.13 => 6.0.13

Additional context
Add any other context about the problem here.

[dgonzalezr]

I'm getting the same with web components 🤔

  "@storybook/addon-actions": "^6.0.13",
  "@storybook/addon-essentials": "^6.0.13",
  "@storybook/addon-links": "^6.0.13",
  "@storybook/web-components": "^6.0.13",

[shilman]

Do you have a repro repo you can share?

[basher]

@shilman
Michael, I'm getting validateDOMNesting error with Storybook composition, which I'm trying out as a replacement for Storybook preview to to view HTML stories with Parcel bundler.

Parent storybook repo = https://github.com/basher/parcel-boilerplate-storybook-preview
HTML / Parcel storybook repo = https://github.com/basher/parcel-boilerplate-storybook

My validateDOMNesting is different:

Additionally, in the sidebar menu, my HTML Storybook stories are not showing due to this JSON.parse error:

[shilman]

cc @ndelangen

[ndelangen]

https://github.com/storybookjs/storybook/issues/12139#issuecomment-677494151
should be a relatively easy fix i think, the html structure seems incorrect.

It's likely to be found here:
https://github.com/storybookjs/storybook/blob/54a2f1641adf9348b96422c8a96d799a57a05c17/lib/ui/src/components/sidebar/RefBlocks.tsx#L229-L255

[ndelangen]

@bashar would you be interested in opening a PR to fix that?

[ndelangen]

regarding the JSON parse error.. I think what might be happening is that stories.json is resolved, but not valid json?

[basher]

@Basher would you be interested in opening a PR to fix that?

I'm confused?
Are you saying that the JS error in the console is caused by the Oh no, smething went wrong... message in the sidebar?

I wouldn't have a clue how to fix this.

[basher]

regarding the JSON parse error.. I think what might be happening is that stories.json is resolved, but not valid json?

Here's the JSON response, for the story that should be loaded from my HTML Storybook:

[ndelangen]

Here's the JSON response, for the story that should be loaded from my HTML Storybook:

That is not valid JSON, that's HTML..

if vercel can't serve the file, it should respond with a 404.

[ndelangen]

Are you saying that the JS error in the console is caused by the Oh no, smething went wrong... message in the sidebar?

Yes, pretty sure that's the cause.

[basher]

That is not valid JSON, that's HTML..

if vercel can't serve the file, it should respond with a 404.

Yes, it's HTML. But surely it's Storybook (composition) that's making the request for stories.json, not Parcel? 😕

We appear to be going round in circles here... and I'm concerned the original bug has been possibly hijacked by my specific issue, which on the face of it looks the same (i.e. console errors about invalid DOM nesting, but actually may not be.

All I want to do is find the correct way to view HTML stories in Storybook, whose CSS/JS/static dependencies are bundled with Parcel 2. In Storybook 5.3, I did that with standalone Storybook preview, but that is not supported in 6, so I thought composition might work.

I've opened a new composition discussion in case anyone else needs a similar setup.

Where do we go from here?

[ndelangen]

There's 2 issues indeed.

• the validateDOMNesting Error is definitely a problem in storybook. We're tracking that problem in this issue.
• the JSON parse error is not a storybook issue.

[basher]

UPDATE:

I just setup a brand new Storybook HTML repo as per default implementation - i.e. no Parcel bundler, no additional dependencies, no customisations whatsoever.

I can view this storybook OK using composition from my parent storybook repo.

I therefore think that I need to re-think my strategy when using Parcel to bundle static UI assets - i.e. CSS, JS, JSON, SVG, etc...

• I'll setup a repo that just does Parcel static UI asset bundling, then serve these at a specific URL - e.g. localhost:1234.
• And have a totally separate Storybook HTML repo where my HTML stories reside, and link to the static assets from localhost:1234.

Not ideal, as I would prefer to keep all UI code together (HTML stories + static assets), but I need to move on and get stuff working in Storybook V6 rather than continuing to work in 5.3, and I want to leverage docs & controls too.

[shilman]

Crikey!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.7 containing PR #12298 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[Bashar]

@Bashar would you be interested in opening a PR to fix that?

seems i was mentioned by mistake here :)