Storybook @storybook/addon-storysource not working

[lkmadushan]

Describe the bug The addon is not working with the following configuration as per the documentation.

const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    core: {
        builder: 'webpack5',
    },
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-postcss',
        '@storybook/addon-essentials',
        {
            name: '@storybook/addon-storysource',
            options: {
                rule: {
                    // You can specify directories
                    include: [path.resolve(__dirname, '../resources/js')],
                },
                loaderOptions: {
                    prettierConfig: { printWidth: 80, singleQuote: true },
                },
            },
        },
    ],
    stories: ['../resources/js/**/*.stories.js'],
    webpackFinal: async (config) => {
        // your app's webpack.config.js
        const custom = await require('../node_modules/laravel-mix/setup/webpack.config.js')()

        config.plugins.push(new MiniCssExtractPlugin())

        // TODO: I don't know we actually need this.
        config.plugins.push(new webpack.ProvidePlugin({
            process: 'process/browser',
        }))

        return {
            ...config,
            module: {
                ...config.module,
                rules: custom.module.rules
            },
            resolve: {
                ...config.resolve,
                alias: custom.resolve.alias,
            }
        }
    },
}

To Reproduce Used the above configuration with Laravel inertia stack.

Laravel: 8.53.0 Laravel Mix: 6.0.27 Vue: 3

System

Environment Info:

  System:
    OS: macOS 11.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 7.20.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 92.0.4515.131
    Safari: 14.1.1

[moracabanas]

Do you use PostCSS 8? I am having issues with the same stack, had to use storybook for webpack 5. Inertia is requiring Webpack 5 , but also Postcss 8 which requires different plugin configuration in storybook. Check this out.

I am missing something in my stack because in my case I can´t understand how to import Tailwind and Postcss-import in storybook the same way laravel mix does. Tailwind is just not working but stories does.

You are using webpackFinal I assume it is loading mix config maybe this is what I am missing.

You can check my stackoverflow question so maybe you can find something I didn't see.

I bet your main issue could be you set Postcss plugin config is set like this:

module.exports = {
  addons: ['@storybook/addon-postcss'],
};

But you need to set it up like this for Postcss 8+

module.exports = {
  addons: [
-   '@storybook/addon-postcss',
+   {
+     name: '@storybook/addon-postcss',
+     options: {
+       postcssLoaderOptions: {
+         implementation: require('postcss'),
+       },
+     },
+   },
  ]
}

I have absolut no idea about how Tailwind and Postcss should be configured in Storybook with our stack, Laravel mix is not even using autoprefixer, I bet this is because JIT mode but I don't really know.

Hope this helps!

[lkmadushan]

@moracabanas yeah, I am using PostCSS 8. but it doesn't work even if I add your changes. did you have a chance to setup it properly?