Styled-jsx: Trouble with 'styled-jsx/webpack' Loader and Storybook

Created on 1 Oct 2018  路  8Comments  路  Source: vercel/styled-jsx

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Using the new feature that enables importing regular css files causes Storybook to error:

styled-jsx/css: if you are getting this error it means that your `css` tagged template literals were not transpiled.

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

I've created an example project that shows the issue: https://github.com/ryanfitzer/styled-jsx-storybook-test

What is the expected behavior?

Storybook will render the components without a styled-jsx error.

Environment (include versions)

  • OS: macOS 10.12.6 (16G1510)
  • Browser: Google Chrome Version 69.0.3497.100 (Official Build) (64-bit)
  • styled-jsx (version): v3.0.3-canary.0 (ships with next v7.0.0)

Did this work in previous versions?

Feature wasn't available in previous versions.

picture ryanfitzer

Most helpful comment

@ryanfitzer

I may be wrong, but I think the problem is that storybook uses babel 6 while styled-jsx uses 7.
You can launch storybook but it's not processing the