Is it possible to use twin.macro with Vite and Storybook?

[socker210]

I am now developing some product with twin.macro. and I want to use storybook.

When i use twin.macro with storybook, I faced this error:

5:00:39 PM [vite] Pre-transform error: /virtual:/@storybook/builder-vite/vite-app.js: Cannot find module 'twin.macro' from '/virtual:/@storybook/builder-vite'
5:00:39 PM [vite] Pre-transform error: /sb-preview/runtime.js: Cannot find module 'twin.macro' from '/sb-preview'
5:00:39 PM [vite] Internal server error: /virtual:/@storybook/builder-vite/vite-app.js: Cannot find module 'twin.macro' from '/virtual:/@storybook/builder-vite'
  Plugin: vite:react-babel
  File: /virtual:/@storybook/builder-vite/vite-app.js

Versions

• twin.macro - ^3.4.1
• storybook - ^8.0.0
• vite - ^5.1.4

How can I solve this?

[ben-rogerson]

Hey there

Have you checked out the storybook examples listed in the twin readme?

styled-components (ts) / emotion / emotion (ts) 🎉

[ben-rogerson]

Let me know if you have any issues with storybook v8 - these examples use v7

[socker210]

Hi, @ben-rogerson

Yes, I checked that examples and It was my fault.

I used to babel-plugin-twin for twin.macro and It wasn't work with storybook and Vite environment.

I removed that plugin and It work well with Storybook V8.

Thank you for quick reply.