How to share a webpack config between next.js and Storybook

README.md

These files show one way to make the next.js "with-global-stylesheet" example work with the amazingly awesome Storybook ecosystem.

Specifically, the three files below replace the next.config.js file, in the "with-global-stylesheet" example.

More generically, they demonstrate how to share webpack configuration extensions between next.js and Storybook.

A massive THANK YOU to tmeasday for all his help to get these working!

next.config.js

// next.config.js

// extension of next.js' webpack config, per:
// https://github.com/zeit/next.js/#customizing-webpack-config

// This file is not going through babel transformation.
// So, we write it in vanilla JS
// (But you could use ES2015 features supported by your Node.js version)

// Current config is to support a Global Stylesheet, per
// https://github.com/zeit/next.js/blob/v3-beta/examples/with-global-stylesheet/next.config.js

// The actual loaders live in ./webpack-extensions.js
// so that they can be shared with .storybook/webpack.config.js

const path = require('path')
const glob = require('glob')

const extensionRules = require('./webpack-extensions')

module.exports = {
  webpack: (config, { dev }) => {
    // any next.js specific rules can be pushed in here
    // NOTE: ORDER matters
    //       the emit-file-loader must be pushed before the rules in webpack-extension.js are pushed
    config.module.rules.push(
      {
        test: /\.(css|scss)/,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]'
        }
      }
    )
    // each rule in the shared webpack-extension.js will be pulled in here
    extensionRules.forEach(
      (rule) => config.module.rules.push(rule)
    )
    return config
  }
}

webpack-extension.js

//webpack-extension.js

// extends rules for:
// next.config.js
// .storybook/webpack.config.js

const path = require('path')
const glob = require('glob')

module.exports = [
  {
    test: /\.css$/,
    use: ['babel-loader', 'raw-loader', 'postcss-loader']
  }
,
  {
    test: /\.s(a|c)ss$/,
    use: ['babel-loader', 'raw-loader', 'postcss-loader',
        { loader: 'sass-loader',
          options: {
            includePaths: ['styles/*', 'node_modules']
              .map((d) => path.join(__dirname, d))
              .map((g) => glob.sync(g))
              .reduce((a, c) => a.concat(c), [])
          }
        }
      ]
    }
  ]

webpack.config.js

// .storybook/webpack.config.js

// extension of storybook's webpack config, per:
// https://storybook.js.org/configurations/custom-webpack-config/#extend-mode

const path = require('path')
const glob = require('glob')

const extensionRules = require('../webpack-extensions')

module.exports = {
  module: {
    rules: extensionRules
    }
}

The file name webpack-extension.js is missing an 's'