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
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
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')] | |
}; |
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; | |
} | |
}; |
// 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'; |
@tidusia Thanks, your config worked like a charm. I have one question though, why is babel-core
and babel-loader
needed as mentioned in your diff.
Also, I would like to point out, that if you are using path aliases via typescript, be sure to check this part of the documentation:
https://storybook.js.org/docs/riot/configure/webpack#typescript-module-resolution
you saved my day
Amazing, thank you!
For those who do not need Sass, I created an example repo with Next.js + Storybook + Tailwind + CSS Module support that does not require to modify the
webpackFinal
config.Here is a git diff that focus on the setup.