Storybook and gatsby

[lukesmurray]

Storybook, Emotion, Gatsby. I've been struggling to add twin.macro to storybook in gatsby. I get warnings like the following

WARNING in ./node_modules/twin.macro/node_modules/babel-plugin-macros/dist/index.js 78:24-31
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/twin.macro/macro.js
 @ ./.storybook/preview.js
 @ ./.storybook/preview.js-generated-config-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

I tried to follow the instructions from emotion + storybook but it didn't quite work. I do have the twin.macro working in gatsby on its own though.

[lukesmurray]

In order to get storybook working with gatsby I followed the instructions from the gatsby site.

[ben-rogerson]

Interesting - any idea what needs to be updated in the repo to get this working?

[lukesmurray]

Not sure I can try to put together a minimal repro if you'd like to try and help determine the cause. My guess is an issue with the custom webpack config needed for gatsby storybook. All things considered if this is a niche use case I can close this issue. I was hoping the error message would look familiar and there would be a straightforward solution. Your library is absolutely fantastic otherwise.

[ben-rogerson]

Would be nice to change the error for sure - I would if I could :D
That error is being thrown from up the chain (even though it looks like it's coming from twin).

[lukesmurray]

Ok I got it working. Turns out there are limitations where queries aren't really working in gatsby so it isn't very convenient at the moment. Anyway here is the full example built on top of gatsby-emotion.

https://github.com/lukesmurray/gatsby-emotion-storybook

[ben-rogerson]

Nice one, great you got it working.
If you find a solution to the useStaticQuery problem, do you think you could report back? I'd like to know how to fix that too

[lukesmurray]

gatsbyjs/gatsby#28922 (comment) based on this comment it looks like its in the roadmap for gatsby

[lukesmurray]

Works with static queries now. Updated the readme. https://github.com/lukesmurray/gatsby-emotion-storybook

The instructions are pretty straightforward. Feel free to take out the relevant bits and make it an example . This is the relevant comment which provided the solution gatsbyjs/gatsby#26099 (comment)

[lukesmurray]

I think the only limitation is you need to run yarn build once before you run yarn storybook

[ben-rogerson]

That's great, thanks for reporting back on this 👍