How to Fix Storybook Broken Styles When Using Styled-JSX

#nextjs #storybook

Recently I've been tasked to fix a styling issue on a Next.js + Storybook project. Most of the React components where displaying fine when used inside of a Next.js page but wouldn't in Storybook. That was frustrating. The fix is to include the Babel and Webpack configs for Storybook within the .storybook directory. Here is how I did it:

First install babel-loader and babel-plugin-react-require using npm or yarn if they were not already installed. Then create a new file named .babelrc inside .storybook if it doesn't exist and paste the following:

{
  "presets": [
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "styled-jsx/babel",
      {
        "sourceMaps": true
      }
    ],
    "react-require"
  ]
}

Create a second file named webpack.config.js at the same location with the following content:

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jsx?|css)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        include: path.resolve(__dirname, '../'),
        use: [
          {
            loader: require('styled-jsx/webpack').loader,
          },
        ],
      },
    ],
  },
};