Блог

Я обновил свой проект с NextJS 10 до NextJS 12. Все работает, кроме сборника рассказов, в котором сейчас нет стилей.

Я использую styled-jsx библиотеку для создания встроенной css , используя ее как:

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

Он генерирует такие стили, как class="jsx-2615582530 search-result" . Перед обновлением он также будет встроен search-result.jsx-2615582530 в созданный сборник рассказов. Теперь имена стилей jsx есть, но стили исчезли.

Я обновил styled-jsx с 3.3.1 до 5.0.0 и далее до 12.0.3. Не менял никаких погрузчиков или еще чего-нибудь. Я предполагаю, что webpack мог быть легко обновлен.

Моя конфигурация:

 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;
};
 

и главное

 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',
  ],
};
 

Кроме того, если я включу стили, как <style>{styles}</style> без jsx реквизита, они будут включены в созданный сборник рассказов.

Только текст отображается странно:

Когда jsx есть, <style /> отсутствует в результирующей разметке вообще.

Предложения?

Новее styled-jsx требовалось следующее:

  import { StyleRegistry } from 'styled-jsx';
 

и

 -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>]
 

Это еще раз делает встроенные стили jsx присутствующими.