Guys I have a problem I…
Guys, I have a problem I’m confident it’s not related to Nx, but I need to pick your brains on this :slightly_smiling_face:
Context: • Nx monorepo with Storybook added to a publishable React lib (components) • Storybook is v5.3.18 with new style of configuration files (main.js, preview.js) • TypeScript enabled via Babel conf I ported as-is from the autogenerated old-style Storybook config files from the Nx schematic • MDX-only stories • Everything works as expected Problem: I’m using styled components for my components lib. Everything works until I introduce theming. https://styled-components.com/docs/advanced#theming
I followed: https://styled-components.com/docs/api#typescript and theming works in a kitchen-sink Nx app I have to help me debug Storybook problems.
Theming doesn’t work in Storybook stories and with the following code:
<Preview>
<Story name="Text only">
<ThemeProvider theme={themeLight}>
<Button disabled={false} variant="primary">
Click Me!
</Button>
</ThemeProvider>
</Story>
</Preview>
I get the following warning from Webpack:
WARNING in ./libs/components/src/styled/theme-light.ts 55:2-14
"export 'DefaultTheme' was not found in 'styled-components'
@ ./libs/components/src/lib/button/button.stories.mdx
@ ./libs/components sync ^\.\/(?:(?:|\/|(?:(?:(?!(?:|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(ts|md)x)$
@ ./libs/components/.storybook/generated-entry.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./libs/components/.storybook/preview.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js ./libs/components/.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true
I tried some things, but I’m out of options.
Any ideas? :thinking_face:
styled-components: styled-components: Advanced Usage
Responses:
plays “It’s A Kind Of Magic” on Spotify
https://dev.to/ryanlanciaux/use-a-themeprovider-component-in-storybook-3m63
and it works :face_palm:
nope, it works if I remove the DefaultTheme typing from the theme object
This might be an occurrence of a type-only import. An import that you have but only use for the type and never assign to a value
If it really is the issue (I’ve had that also with Webpack and a similar import in a NestJS app), then you can use “import type { … } from “…”.
That works with TypeScript 3.8+
I’m not sure why it happens with storybook and not with an app though
Indeed, no clue :slightly_smiling_face:
Just in case, I’ve just published an article about this :stuck_out_tongue: https://medium.com/@dSebastien/leveraging-type-only-imports-and-exports-with-typescript-3-8-5c1be8bd17fb