In addition to the Storybook for React setup, you'll also need to install these packages:
npm i -D @babel/core babel-loader css-loader style-loader
-
-
Save Steve-Reid/27c560c64045dd7b7faf4a1dfe136ed6 to your computer and use it in GitHub Desktop.
Configure Storybook to work with Next.js, TypeScript, and CSS Modules
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const path = require('path'); | |
| module.exports = { | |
| stories: ['../stories/**/*.stories.js', '../stories/**/*.stories.tsx'], | |
| addons: ['@storybook/addon-actions', '@storybook/addon-links'], | |
| presets: [path.resolve(__dirname, './next-preset.js')] | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const path = require('path'); | |
| module.exports = { | |
| webpackFinal: async (baseConfig, options) => { | |
| // Modify or replace config. Mutating the original reference object can cause unexpected bugs. | |
| const { module = {} } = baseConfig; | |
| const newConfig = { | |
| ...baseConfig, | |
| module: { | |
| ...module, | |
| rules: [...(module.rules || [])] | |
| } | |
| }; | |
| // TypeScript with Next.js | |
| newConfig.module.rules.push({ | |
| test: /\.(ts|tsx)$/, | |
| include: [ | |
| path.resolve(__dirname, '../components'), | |
| path.resolve(__dirname, '../stories') | |
| ], | |
| use: [ | |
| { | |
| loader: 'babel-loader', | |
| options: { | |
| presets: ['next/babel'], | |
| plugins: ['react-docgen'] | |
| } | |
| } | |
| ] | |
| }); | |
| newConfig.resolve.extensions.push('.ts', '.tsx'); | |
| // | |
| // CSS Modules | |
| // Many thanks to https://github.com/storybookjs/storybook/issues/6055#issuecomment-521046352 | |
| // | |
| // First we prevent webpack from using Storybook CSS rules to process CSS modules | |
| newConfig.module.rules.find( | |
| rule => rule.test.toString() === '/\\.css$/' | |
| ).exclude = /\.module\.css$/; | |
| // Then we tell webpack what to do with CSS modules | |
| newConfig.module.rules.push({ | |
| test: /\.module\.css$/, | |
| include: path.resolve(__dirname, '../components'), | |
| use: [ | |
| 'style-loader', | |
| { | |
| loader: 'css-loader', | |
| options: { | |
| importLoaders: 1, | |
| modules: true | |
| } | |
| } | |
| ] | |
| }); | |
| return newConfig; | |
| } | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // If you need global CSS, you can import it here and Storybook will automatically include it in all stories. | |
| // You don't need this if you don't have any global CSS. | |
| import '../src/styles.css'; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment