storybook
storybook copied to clipboard
[Bug]: Unexpected closing tag on story
Describe the bug
The [Stack.Recursive](https://github.com/RCVarley/unexpected-closing-tag-error/blob/main/src/stories/ElStack.stories.ts story produces the error:
SyntaxError: Unexpected closing tag "div". It may happen when the tag has already been closed by another tag.
template: `
<ElStack v-bind="args" style="min-height: 20rem">
<div>This</div>
<div>is</div>
<div>
<div>a</div>
<div>recursive</div>
</div>
<div>stack</div>
</ElStack>`
The issue is with the nested div.
To Reproduce
Nest divs (or any other element) in a story template and view the story.
https://github.com/RCVarley/unexpected-closing-tag-error/blob/main/src/stories/ElStack.stories.ts
System
System:
OS: macOS 13.2.1
CPU: (10) arm64 Apple M1 Pro
Binaries:
Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
Browsers:
Chrome: 110.0.5481.177
Safari: 16.3
npmPackages:
@storybook/addon-essentials: ^7.0.0-beta.61 => 7.0.0-beta.61
@storybook/addon-interactions: ^7.0.0-beta.61 => 7.0.0-beta.61
@storybook/addon-links: ^7.0.0-beta.61 => 7.0.0-beta.61
@storybook/blocks: ^7.0.0-beta.61 => 7.0.0-beta.61
@storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1
@storybook/vue3: ^7.0.0-beta.61 => 7.0.0-beta.61
@storybook/vue3-vite: ^7.0.0-beta.61 => 7.0.0-beta.61
Additional context
No response
@chakAs3 do you think this is related to your recent vue3 changes?
I don't think so @shilman i remember answering someone about this issue it is 100% some other component in his code creates this issue and vue compiler complains about this. it can not be from the story as the story will through error in runtime not the build time, he must have some component in yarn cache with some issue.
i will add his story to the examples repo https://github.com/storybookjs/vue3-vuetify-examples/blob/main/src/stories/EStack.stories.ts
@chakAs3 thanks for getting back to us! I’ll clear my caches and then try a bunch of different barebones setups.
I’ll let you know how my testing goes.
@RCVarley it maybe some bug related to source snippet which is addressed in #21956
What I've observed is that the error only occurs when the args
attribute is passed by the render function. See some examples in this duplicated ticket
For us the issue only happen when we use the backtick (string litteral) in the template.. the error is gone when using single or double quote.