Error with storybook

[stouch]

We met difficulties to setup a Storybook on a Vite project that use stailwc. (https://storybook.js.org/docs/react/configure/frameworks#configure)

We can successfuly make tw working in our exported components in our dist directory (that we include in another project, so rollup works well).

But we got the following error when we are running RUST_BACKTRACE=full npm run storybook :

8:27:11 PM [vite] Internal server error: failed to handle: failed to invoke plugin: failed to invoke plugin on 'Some("/var/webprojects/our-uikit/.storybook/stories/TextField.stories.ts")'

Caused by:
    0: failed to invoke `/var/webprojects/our-uikit/node_modules/@swc/plugin-styled-components/swc_plugin_styled_components.wasm` as js transform plugin at /var/webprojects/our-uikit/node_modules/@swc/plugin-styled-components/swc_plugin_styled_components.wasm
    1: RuntimeError: call stack exhausted
  Plugin: vite:react-swc
  File: /var/webprojects/our-uikit/.storybook/stories/TextField.stories.ts

Is there any good practice to setup storybook using your lib ?

Here is our vite.config.ts :

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import dts from "vite-plugin-dts";
import stailwc from "stailwc/install";
import path from "path";

export default defineConfig({
  plugins: [
    dts(),
    react({
      plugins: [
        stailwc({
          engine: "styled-components",
          tailwindPath: path.join(__dirname, "tailwind.config.cjs"),
        }),
        ["@swc/plugin-styled-components", {}],
      ],
    }),
  ],

And here is our .storybook/main.tsx :

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["./stories/*.mdx", "./stories/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    'storybook-addon-swc',
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

Thanks a lot

[stouch]

In our specific config (vite + swc, see above), stailwc needs @swc/plugins-styled-components (instead of @swc/plugin-emotion in repo example) which is runtime-built with a specific version of swc_core depending on version... AND, in the meantime, last version of stailwc is built in runtime using [email protected] crates.io version (looking at its Cargo.toml) so this seems that this led to a conflict. To make stailwc work, we needed to keep @swc/core and @swc/plugin-styled-components fitting with swc_core crates.io version 0.76.X (https://swc.rs/docs/plugin/selecting-swc-core#v076x) which led us to use :

    "@swc/core": "^1.3.62",
    "@swc/plugin-styled-components": "^1.5.67",

This fixed our issue but it would be great to specify @swc/xxx versions in Vite examples of this repo. @arlyon

[stouch]

For the record, just by updating npm i @swc/plugin-styled-components from 1.5.67 to 1.5.68, my storybook is broken : so it seems to problems start with this commit https://github.com/swc-project/plugins/commit/05d992e88500a37f427e233508ea9b5ee04e0c8a in plugin-styled-components repo.

Careful use swc/plugin-styled-components version!

[arlyon]

For some context on why this error may happen, stailwc is unfortunately quite tightly coupled to the version of SWC being used to run it, as SWC is currently a very turbulent (pre-1.0) codebase. This types of errors will happen frequently, so my recommendation is to make sure to pin your versions. If you have known-working versions to report, I will add them to the compatibility chart on the readme.