Storybook v8 not working in combination with Styled Components and twin.macro

[RobinUit]

Storybook v8 fails to run once twin.macro or a styled component that uses twin.macro is used in a component. This problem is not occurring when using Storybook v7.6.17 or when using Storybook v8 without twin.macro.

This problem occurs in my own project (using Babel) and in the provided official example.

Can be replicated by:

1. Cloning the storybook-styled-components-typescript example
2. Migrating to Storybook v8 using npx storybook@latest upgrade or manually
3. Running Storybook npm run storybook

The following error is displayed in the terminal:

ERROR in ./node_modules/import-fresh/node_modules/resolve-from/index.js 3:15-32
Module not found: Error: Can't resolve 'module' in '/Users/robin/Developer/Projects/Test/storybook-poc-rijksportaal/node_modules/import-fresh/node_modules/resolve-from'
 @ ./node_modules/import-fresh/index.js 3:20-43
 @ ./node_modules/cosmiconfig/dist/loaders.js 13:18-41
 @ ./node_modules/cosmiconfig/dist/index.js 16:15-35
 @ ./node_modules/babel-plugin-macros/dist/index.js 32:2-40
 @ ./node_modules/twin.macro/macro.js 1:24-54
 @ ./.storybook/preview.tsx 24:0-35 41:61-66 41:100-105
 @ ./storybook-config-entry.js 11:1647-1744 32:2-35:4 32:1646-35:3

ERROR in ./node_modules/jiti/dist/babel.js 1:104839-104856
Module not found: Error: Can't resolve 'module' in '/Users/robin/Developer/Projects/Test/storybook-poc-rijksportaal/node_modules/jiti/dist'
 @ ./node_modules/tailwindcss/lib/lib/load-config.js 36:23-52
 @ ./node_modules/tailwindcss/lib/public/load-config.js 11:20-49
 @ ./node_modules/tailwindcss/loadConfig.js 1:17-52
 @ ./node_modules/twin.macro/macro.js 14:17-50
 @ ./.storybook/preview.tsx 24:0-35 41:61-66 41:100-105
 @ ./storybook-config-entry.js 11:1647-1744 32:2-35:4 32:1646-35:3

ERROR in ./node_modules/jiti/dist/babel.js 1:105250-105263
Module not found: Error: Can't resolve 'v8' in '/Users/robin/Developer/Projects/Test/storybook-poc-rijksportaal/node_modules/jiti/dist'
 @ ./node_modules/tailwindcss/lib/lib/load-config.js 36:23-52
 @ ./node_modules/tailwindcss/lib/public/load-config.js 11:20-49
 @ ./node_modules/tailwindcss/loadConfig.js 1:17-52
 @ ./node_modules/twin.macro/macro.js 14:17-50
 @ ./.storybook/preview.tsx 24:0-35 41:61-66 41:100-105
 @ ./storybook-config-entry.js 11:1647-1744 32:2-35:4 32:1646-35:3

ERROR in ./node_modules/jiti/dist/jiti.js 1:71627-71644
Module not found: Error: Can't resolve 'module' in '/Users/robin/Developer/Projects/Test/storybook-poc-rijksportaal/node_modules/jiti/dist'
 @ ./node_modules/jiti/lib/index.js 6:15-38
 @ ./node_modules/tailwindcss/lib/lib/load-config.js 19:53-68
 @ ./node_modules/tailwindcss/lib/public/load-config.js 11:20-49
 @ ./node_modules/tailwindcss/loadConfig.js 1:17-52
 @ ./node_modules/twin.macro/macro.js 14:17-50
 @ ./.storybook/preview.tsx 24:0-35 41:61-66 41:100-105
 @ ./storybook-config-entry.js 11:1647-1744 32:2-35:4 32:1646-35:3

ERROR in ./node_modules/jiti/dist/jiti.js 1:72866-72887
Module not found: Error: Can't resolve 'perf_hooks' in '/Users/robin/Developer/Projects/Test/storybook-poc-rijksportaal/node_modules/jiti/dist'
 @ ./node_modules/jiti/lib/index.js 6:15-38
 @ ./node_modules/tailwindcss/lib/lib/load-config.js 19:53-68
 @ ./node_modules/tailwindcss/lib/public/load-config.js 11:20-49
 @ ./node_modules/tailwindcss/loadConfig.js 1:17-52
 @ ./node_modules/twin.macro/macro.js 14:17-50
 @ ./.storybook/preview.tsx 24:0-35 41:61-66 41:100-105
 @ ./storybook-config-entry.js 11:1647-1744 32:2-35:4 32:1646-35:3

ERROR in ./node_modules/jiti/dist/jiti.js 1:214825-214838
Module not found: Error: Can't resolve 'v8' in '/Users/robin/Developer/Projects/Test/storybook-poc-rijksportaal/node_modules/jiti/dist'
 @ ./node_modules/jiti/lib/index.js 6:15-38
 @ ./node_modules/tailwindcss/lib/lib/load-config.js 19:53-68
 @ ./node_modules/tailwindcss/lib/public/load-config.js 11:20-49
 @ ./node_modules/tailwindcss/loadConfig.js 1:17-52
 @ ./node_modules/twin.macro/macro.js 14:17-50
 @ ./.storybook/preview.tsx 24:0-35 41:61-66 41:100-105
 @ ./storybook-config-entry.js 11:1647-1744 32:2-35:4 32:1646-35:3

preview compiled with 6 errors
WARN Critical dependency: the request of a dependency is an expression
WARN Critical dependency: the request of a dependency is an expression
=> Failed to build the preview
99% end closing watch compilationWARN Force closed preview build
SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.
Run Storybook with --debug-webpack for more information.
    at starter (./node_modules/@storybook/builder-webpack5/dist/index.js:1:8088)
    at starter.next (<anonymous>)
    at Module.start (./node_modules/@storybook/builder-webpack5/dist/index.js:1:10083)
    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.

[massoudsalem]

There might be a problem with Babel or something similar, as I'm using vite-storybook-style components-twin.macro, and all of them are working fine.

[ben-rogerson]

I found that Storybook@8.6 now requires addon-webpack5-compiler-babel to work correctly. I've updated the example to latest and it's now working again 🎉

[ben-rogerson]

By the way, those errors meant that babel-plugin-macros wasn't being loaded. To see that I ran BABEL_SHOW_CONFIG_FOR=.storybook/preview.tsx npm run storybook and saw the babel config and found that the custom babel config wasn't being loaded.