-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
validateDOMNesting Error #12139
Comments
I'm getting the same with web components 🤔
|
Do you have a repro repo you can share? |
@shilman Parent storybook repo = https://github.com/basher/parcel-boilerplate-storybook-preview My Additionally, in the sidebar menu, my HTML Storybook stories are not showing due to this |
cc @ndelangen |
#12139 (comment) It's likely to be found here: storybook/lib/ui/src/components/sidebar/RefBlocks.tsx Lines 229 to 255 in 54a2f16
|
@Bashar would you be interested in opening a PR to fix that? |
regarding the JSON parse error.. I think what might be happening is that stories.json is resolved, but not valid json? |
I'm confused? I wouldn't have a clue how to fix this. |
That is not valid JSON, that's HTML.. if vercel can't serve the file, it should respond with a 404. |
Yes, pretty sure that's the cause. |
Yes, it's HTML. But surely it's Storybook (composition) that's making the request for 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? |
There's 2 issues indeed.
|
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...
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. |
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 Closing this issue. Please re-open if you think there's still more to do. |
seems i was mentioned by mistake here :) |
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
storybook:serve
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.
The text was updated successfully, but these errors were encountered: