Adding plugin @storybook/addon-interactions break stories (Web Components)

[sr258]

As soon as I add the @storybook/addon-interactions plugin to .storybook/main.ts (at the end of the plugin list), I get the following error when displaying the story for one of my components:

Internal Error: expected template strings to be an array with a 'raw' field. Faking a template strings array by calling html or svg like an ordinary function is effectively the same as calling unsafeHtml and can lead to major security issues, e.g. opening your code up to XSS attacks. If you're using the html or svg tagged template functions normally and still seeing this error, please file a bug at https://github.com/lit/lit/issues/new?template=bug_report.md and include information about your build tooling, if any.

The issue only appears for one component and not all of them. I tried reproducing the issue in a minimal sample, but there everything works fine. The component having the issue is pretty complex and I can't put it online as its proprietary.

I use these tools:

• "@storybook/addon-essentials": "^7.5.3"
• "@storybook/addon-interactions": "^7.5.3"
• "@storybook/addon-links": "^7.5.3"
• "@storybook/blocks": "^7.5.3"
• "@storybook/jest": "^0.2.3"
• "@storybook/testing-library": "^0.2.2"
• "@storybook/web-components": "^7.5.3"
• "@storybook/web-components-vite": "^7.5.3"
• "lit": "^2.7.6"

The error message seems to be related to how the html and svg functions are used, but I've double-checked and my use of these functions is fine. Does anyone have an idea of what might be going on?

[break-stuff]

Have you tried updating your import to use the static functions?

import { html } from 'lit/static-html.js';

[fdendorfer]

Got the same problem. Tried it with static-html but didn't do anything

[DEfusion]

For me the issue was I was passing some components along as arguments for other components to render, they're not able to be serialized. I don't know why simply importing things from @storybook/test suddenly made it fail but it did. To get around it I used mapping for the arg. Bit more detail in this bug report but I don't think there is any way around it.