Guys I have a problem I…

1 minute read

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.

I followed: 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


plays “It’s A Kind Of Magic” on Spotify

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: