[Bug] Stories with additional markup are breaking

[eyeseast]

Describe the bug

We have a collection of stories that were previously working but are now broken, and I'm not sure why. They're all using .svelte format. Here's an example:

<Template let:args>
  <Drawer {...args}>
    <div slot="content" class="content">
      <h2>Drawer Contents</h2>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
  </Drawer>
</Template>

code here

This happens with any component that contains non-component markup -- wrapping HTML, slotted elements or other markup.

Steps to reproduce the behavior

1. Clone the repo and npm i: https://github.com/MuckRock/documentcloud-frontend
2. npm run storybook

Screenshots and/or logs

Storybook initially loads, but it hits an error and exits when it tries to render the component above.

Here's the full error message I get:

% npm run storybook

> documentcloud-frontend@1.0.0 storybook
> storybook dev -p 6006

@storybook/cli v7.4.5

info => Serving static files from ././public at /
info => Starting manager..
info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
99% end closing watch compilationWARN Force closed preview build
ModuleParseError: Module parse failed: Unterminated string constant (269:196)
File was processed with these loaders:
 * ./node_modules/@storybook/addon-svelte-csf/dist/parser/svelte-stories-loader.js
 * ./node_modules/@storybook/preset-svelte-webpack/dist/svelte-docgen-loader.js
 * ./node_modules/svelte-loader/index.js
You may need an additional loader to handle the result of these loaders.
| //export defaultDrawer_stories;Drawer_stories.__docgen = {"version":3,"name":"Drawer.stories.svelte","data":[],"computed":[],"methods":[],"components":[],"description":null,"keywords":[],"events":[],"slots":[],"refs":[]};
|    const { default: parser } = require('/.../documentcloud-frontend/node_modules/@storybook/addon-svelte-csf/dist/parser/collect-stories.js');
>    const __storiesMetaData = parser(Drawer_stories, {"meta":{"title":"Add-Ons / Drawer"},"stories":{"Righthand":{"storyId":"add-ons-drawer--righthand","name":"Righthand","template":false,"source":"<Drawer visible anchor=\"right\">
|   <div slot=\"content\" class=\"content\">
|     <h2>Drawer Contents</h2>
    at handleParseError (/.../documentcloud-frontend/node_modules/webpack/lib/NormalModule.js:982:19)
    at /.../documentcloud-frontend/node_modules/webpack/lib/NormalModule.js:1101:5
    at processResult (/.../documentcloud-frontend/node_modules/webpack/lib/NormalModule.js:806:11)
    at /.../documentcloud-frontend/node_modules/webpack/lib/NormalModule.js:866:5
    at /.../documentcloud-frontend/node_modules/loader-runner/lib/LoaderRunner.js:407:3
    at iterateNormalLoaders (/.../documentcloud-frontend/node_modules/loader-runner/lib/LoaderRunner.js:233:10)
    at iterateNormalLoaders (/.../documentcloud-frontend/node_modules/loader-runner/lib/LoaderRunner.js:240:10)
    at /.../documentcloud-frontend/node_modules/loader-runner/lib/LoaderRunner.js:255:3
    at runSyncOrAsync (/.../documentcloud-frontend/node_modules/loader-runner/lib/LoaderRunner.js:143:11)
    at iterateNormalLoaders (/.../documentcloud-frontend/node_modules/loader-runner/lib/LoaderRunner.js:251:2)
    at iterateNormalLoaders (/.../documentcloud-frontend/node_modules/loader-runner/lib/LoaderRunner.js:240:10)
    at /.../documentcloud-frontend/node_modules/loader-runner/lib/LoaderRunner.js:255:3
    at /.../documentcloud-frontend/node_modules/loader-runner/lib/LoaderRunner.js:140:6
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Environment

• OS: MacOS 13.6 (Ventura)
• Node.js version: v18.17.1
• NPM version: 9.8.1
• Browser (if applicable): Chrome (though not actually loading)
• Framework: webpack

Additional context

Our full storybook configuration is here: https://github.com/MuckRock/documentcloud-frontend/tree/master/.storybook

[j3rem1e]

This has been fixed in this PR : https://github.com/storybookjs/addon-svelte-csf/pull/133 However, it's only available in the v4 branch of this plugin.

I'll try to backport it to a v3 branch

[j3rem1e]

@JReinhold do you know if the current github action can do a release on the v3 branch ?

[eyeseast]

Much appreciated. I wish I could just upgrade to Svelte 4, but that's a bigger project than I'd hoped, so a back port would help me out a ton.

[j3rem1e]

@eyeseast As a workaround, you can stick to v3.0.4, it's probably the latest working version with webpack in the v3 branch.

[eyeseast]

I kept hitting different errors when I tried to downgrade, so I settled for a temporary solution of using intermediate components with all the necessary markup, and then rendering those inside a <Template> or <Story>. Not ideal, but it'll work until I can get us upgraded to Svelte 4.

[benmccann]

@eyeseast any particular part that's making a Svelte 4 upgrade a big upgrade for you? We meant to make Svelte 4 generally pretty easy to upgrade for most users, so I wanted to check if there's anything we need to add to the migration guide or anything like that

[eyeseast]

@benmccann I think it's a dependency issue. I was working quickly, trying to solve this and not really looking at the upgrade process, and ran into errors that were hard to trace. I'm going to try again as soon as I get through a different project, so I should have more feedback then.

Is there a good place to report upgrade issues, if I do come across them? Don't want to clutter up this thread with unrelated stuff.

[benmccann]

You could post on the Svelte Discord and tag me. I have the same username there

[JReinhold]

Sorry I missed this @j3rem1e. Our tooling doesn't support backported releases, but we can definitely hack some branches together if we need it.

If it's impossible for @eyeseast to upgrade, then I'll look into releasing a new v3.

[eyeseast]

I'm going to try to get us upgraded to Svelte 4. That's where we should be an it's more efficient than trying to hack a backport. Will report back here if that fails. Appreciate your help here.

[j3rem1e]

I`m closing this issue as fixed. Feel free to reopen it if needed.