Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

validateDOMNesting Error

See original GitHub issue

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

Run storybook:serve
Open browser console.
View Error

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

Expected behavior No run time errors.

Screenshots Screen Shot 2020-08-19 at 10 23 57 AM

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® Core™ 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.

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:16 (9 by maintainers)

Top GitHub Comments

2reactions

dgonzalezrcommented, Aug 19, 2020

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",

1reaction

shilmancommented, Sep 10, 2020

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.

Top Results From Across the Web

validateDOMNesting(...): <tr> cannot appear as a child of <div>

It appears that it was all fault of webpack-dev-server, when building with simple webpack command, everything works as expected. – Bodzio. Oct 7 ......

validateDOMNesting(...): <tr> cannot appear as a child of ...

Getting an error message in console: Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>. See ProductDetails > table ...

validatedomnesting(...): <div> cannot appear as a child of ...

I'm using React, typescript, and Material UI. I cannot seem to fix the error no matter how I rearrange the order of the...

<tr> cannot appear as a child of <table>. Add a <tbody ...

Warning: validateDOMNesting(. ... but still getting the same error. ... Remove the table (leave the div), do you still get the error?

23 - Warning: validateDOMNesting(...):cannot appear as a child

Warning: validateDOMNesting (. ... Problem Solving Point. Problem Solving Point. 2.22K subscribers. Subscribe. Warning: validateDOMNesting (.