If you get to this article its because you are already familiar with Storybook and you want to move forward to the new and cool stuff :).
I will give you my simple old configuration and tell you my adventure of updating from v5.3 to v6.
Note: I think it should work for v5 also as I didn't change my Storybook config on updates to v5.3.
Well, my configuration for the v5.3 was:
// .storybook/config.js
import {addParameters} from '@storybook/react';
import '../src/styles/App.scss'; // all my app styles because I don't import them in each component
import './styles.scss'; // with some overrided styles for Storyb
import theme from './theme';
addParameters({
options: {theme}
});
// .storybook/main.js
module.exports = {
stories: ['../src/components/**/*.stories.js'],
};
// .storybook/theme.js
import {create} from '@storybook/theming';
import gigedsLogo from '../src/statics/logo.png';
export default create({
base: 'light',
brandTitle: 'Gigeds',
brandImage: gigedsLogo,
colorSecondary: '#de2020'
});
// .storybook/webpack.config.js
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
{
test: /\.(jpg|jpeg|png|svg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
limit: 1000000,
name: `statics/images/[name].[ext]`,
},
},
],
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'file-loader',
options: {
limit: 10000,
name: `statics/fonts/[name].[ext]`,
},
},
]
},
resolve: {
extensions: ['.js', '.jsx', '.json', '.css', '.scss'],
modules: [resolve('../node_modules')],
alias: {
components: resolve('../src/components'),
views: resolve('../src/views'),
statics: resolve('../src/statics'),
},
},
};
As you can see the configuration is very simple, without plugins and with some changes in the theme and custom Webpack configuration.
Imagine you have your Storybook working fine and you just updated it from v5.3 to v6, then run a script yarn sb
(in your case could be yarn storybook
) to check if everything works as expected... compiling... and BAM!
ERR! Error: You have both a "main" and a "config". Please remove the "config" file from your configDir
Hm... if I remove my config I need to load my styles and my custom theme somewhere π. Well, let's remove our config.js
and go to the documentation to see how to fix it.
Let's go to theme configuration documentation. Bingo! Install a couple of new packages yarn add --dev @storybook/addons @storybook/theming
Then create ./manager.js
to load your custom theme πͺ
// ./manager.js
@see https://storybook.js.org/docs/react/configure/theming#create-a-theme-quickstart
import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';
addons.setConfig({
theme: themes.dark,
});
NOTE: at the beginning I just copied and pasted all the stuff I had in my ./config.js
and then ran yarn sb
and got an error:
ERROR in ./src/styles/App.scss 2:0
Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
It was because I was importing App.scss
file which is not needed anymore in v6.
So, here we go again, run yarn sb
and...π BAM! Bloody terminalπ¨
A lot of errors, one per `.jsx` file which has `.scss` import.
My thought was to add webpack config somewhere. After a nice while of diving in the documentation I found custom webpack configuration which is pretty clear, but then I got a doubt to where to load all the stories, and the documentation doesn't mention anything about stories loading + webpack config at the same time. They are always treated separately. So I just added them in the same module.
// ./main.js
const custom = require('./webpack.config.js');
module.exports = {
stories: ['../src/components/**/*.stories.js'],
webpackFinal: (config) => {
return {
...config,
module: {
...config.module,
rules: custom.module.rules,
},
resolve: {
...config.resolve,
...custom.resolve,
}
};
},
};
Then run yarn sb
and... BOOM? (BAM! = bad, BOOM! = cool) The browser opened, Storybook loading... loading... loading... π we are still missing something... Let's check the terminal. Oh! A lot of warnings (one per component):
...
WARNING in ./src/components/alert/Alert.stories.js 10:4
Module parse failed: Unexpected token (10:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
...
Seems like babel-loader
is missing in our webpack config, which in my case with Storybook v5.3 was not needed, so let's add it.
// .storybook/webpack.config.js
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
module: {
rules: [
...
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader',
{
loader: 'eslint-loader',
options: {
cache: true,
emitWarning: true,
},
},
],
},
...
Now again run sb
, compiling... the browser opened... Storybook loading... loading... BOOM!π We got it! Storybook loaded with all the components π Easy ha? π
Summary
If you have the same configuration as me then:
- remove config.js
- create manager.js to load your theme
- in your main.js load stories and webpack configuration
- add babel-loader to your webpack configuration
More info: Migration documentation and Storybook configuration
Thanks for reading, comments are welcome.
Image by Antonios Ntoumas from Pixabay
Top comments (0)