After upgrading my project from NextJS 10 to NextJS 12, everything is functioning normally except for Storybook, which is now missing its styles.
I utilize the styled-jsx library to create embedded css, implementing it in this way:
const SearchResult = ({ onClick, vehicle }: SearchResultProps): JSX.Element => {
return (
<div className="search-result" data-testid="search-result" onClick={onClick}>
<style jsx>{styles}</style>
...
</div>
);
};
The generated styles look like
class="jsx-2615582530 search-result"search-result.jsx-2615582530 within the produced storybook. However, post-update, although the jsx style names are present, the actual styles seem to have disappeared.
I updated from styled-jsx version 3.3.1 to 5.0.0 and moved up to NextJS 12.0.3. I did not make any changes to loaders or anything else. It’s possible that webpack may have been upgraded during the process.
Here's my configuration:
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 here’s part of the main configuration:
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',
],
};
Additionally, when I include styles as
<style>{styles}</style>jsx prop, they do appear in the resulting storybook output.
However, the text appears strangely:
https://i.sstatic.net/wbbxQ.png
When using the jsx attribute, the <style /> element is entirely absent from the final markup.
Any suggestions on how to resolve this issue?