storybook icon indicating copy to clipboard operation
storybook copied to clipboard

[Bug]: Unexpected closing tag on story

Open RCVarley opened this issue 1 year ago • 1 comments

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

RCVarley avatar Mar 06 '23 15:03 RCVarley

@chakAs3 do you think this is related to your recent vue3 changes?

shilman avatar Mar 17 '23 14:03 shilman

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 avatar Apr 01 '23 04:04 chakAs3

@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 avatar Apr 06 '23 12:04 RCVarley

@RCVarley it maybe some bug related to source snippet which is addressed in #21956

chakAs3 avatar Apr 06 '23 15:04 chakAs3

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

gluecksmensch avatar Apr 30 '23 11:04 gluecksmensch

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.

chuckmah avatar May 03 '23 15:05 chuckmah