JSX styles are not working for Storybook after an upgrade

Question

I upgraded my project from NextJS 10 to NextJS 12. Everything is working except for Storybook, which has no styles now.

I am using styled-jsx library to generate embedded css, using it as:

const SearchResult = ({ onClick, vehicle }: SearchResultProps): JSX.Element => {
  return (
    <div className="search-result" data-testid="search-result" onClick={onClick}>
      <style jsx>{styles}</style>
      ...
    </div>
  );
};

It generates styles like class="jsx-2615582530 search-result". Before the update, it would also embed a style search-result.jsx-2615582530 into the generated storybook. Now, the jsx style names are there, yet the styles are gone.

I upgraded styled-jsx from 3.3.1 to 5.0.0 and NextJS to 12.0.3. Did not change any loaders or anything. My guess, webpack might have easily gotten upgraded.

My config:

const webpack = require('webpack');

module.exports = ({ config }) => {
  // Fill in process.env on the client
  config.plugins.push(
    new webpack.DefinePlugin({
      'process.serializedEnv': {},
    })
  );

  // Sentry requires different packages for front and back end,
  // but in storybook we know it's always client side
  config.resolve.alias = {
    'sentry-alias': '@sentry/browser',
    '@/remoteConfig': './standardRemoteConfig',
  };

  config.module.rules.push({
    test: /\.md$/,
    loader: "raw-loader",
  }),

  config.externals = [...(config.externals || []), 'fs', 'net'];

  config.resolve.extensions.push('.md');

  config.resolve.fallback = {
    "https": false,
    "stream": false,
  };

  return config;
};

and main

module.exports = {
  core: {
    builder: 'webpack5',
  },
  stories: ['../stories/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-backgrounds',
    '@storybook/addon-knobs',
    '@storybook/addon-viewport',
    '@storybook/addon-a11y',
    'storybook-addon-paddings',
  ],
};

Further, if I include styles as <style>{styles}</style> without the jsx prop, they are included in the produced storybook.

Only, the text is displayed weird:

When jsx is there, <style /> is missing from the resulting markup, altogether.

Suggestions?

Answer 1

Newer styled-jsx required the following:

+import { StyleRegistry } from 'styled-jsx';

and

-export const decorators = [withPaddings, withRedux(), (story: Function) => <I18nextProvider i18n={i18n}>{story()}</I18nextProvider>]
+export const decorators = [(Story) => (
+  <StyleRegistry>
+    <Story />
+  </StyleRegistry>
+), withPaddings, withRedux(), (story: Function) => <I18nextProvider i18n={i18n}>{story()}</I18nextProvider>]

This yet again makes embedded jsx styles present.

Answer 2

For anyone who finds this, the solution for me was to update styled-jsx to 5.0.4, as we're on Next 12 and have styled-jsx explicitly listed as a dependency.

If you have styled-jsx in your package.json, make sure it's at the appropriate version (my guess is >=5.)