JSX styles are not working for Storybook after an upgrade-CodePudding

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 . 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?

CodePudding user response：

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.