Monorepo Shared Config

[jd-carroll]

I have a monorepo with many features (projects / modules) which each have storybook stories. We run an independent Storybook instance in each of the features and then deploy it to an internal site for non-dev's to interact with.

Right now our .storybook/main.ts file looks like:

import { buildMainConfig } from '@project/client-storybook-utils';
export default buildMainConfig();

But it leads to a mess of errors (which are more annoying than anything):

@client-features/feature-1: Unexpected 'default'. Parameter 'options.storySort' should be defined inline e.g.:
@client-features/feature-1: export default {
@client-features/feature-1:   parameters: {
@client-features/feature-1:     options: {
@client-features/feature-1:       storySort: <array | object | function>
@client-features/feature-1:     },
@client-features/feature-1:   },
@client-features/feature-1: };
@client-features/feature-1: CSF Parsing error: Expected 'ObjectExpression' but found 'CallExpression' instead in 'CallExpression'.
@client-features/feature-1: {"type":"CallExpression","start":130,"end":158,"loc":{"start":{"line":4,"column":15,"index":130,"token":20},"end":{"line":4,"column":43,"index":158,"token":24},"lines":{"infos":[{"line"
...

Is there any way to avoid these errors?

I get that Storybook is trying to use static analysis to load (at the very least) the story sorting algorithm. But it would be nice to be able to have shared configuration + a story sorting algorithm.

Thanks!

[alvis]

I encountered the same issue. Interestingly, you can import shared config with a relative file path (e.g., import { buildMainConfig } from ‘../client-storybook-utils/lib/buildMainConfig.ts’;), but not via a package name. Storybook seems unable to resolve packages in the config file.

While not ideal, using a relative path can be a workaround in a monorepo setup.

I searched for similar bug reports in issues. #21701 seems to be related to this issue.

[AndreyMiloserdov]

Have the same problem with storybook 8.3.4

import { createDefaultStorybookMainConfig } from '@test-utils/storybook/config/main'

const storybookConfig = createDefaultStorybookMainConfig({
    stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(ts|tsx)'],
    staticDirs: [],
}, {
    module: {
        rules: [
            {
                test: /\.module\.(s)?css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                        },
                    },
                    'sass-loader',
                ],
            },
            {
                test: /\.scss$/,
                exclude: /\.module.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            {
                test: /\.(woff(2)?|eot|ttf|otf|)$/,
                type: 'asset',
            },
        ]
    }
});

export default storybookConfig;

Where

import path from 'path';
import { merge } from 'webpack-merge';
import type { StorybookConfig } from '@storybook/react-webpack5';
import { getLocalIdentName } from 'css-loader-shorter-classnames';
import type { Configuration} from 'webpack'

const getLocalIdent = getLocalIdentName();

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
const getAbsolutePath = (value: string) => path.dirname(require.resolve(path.join(value, 'package.json')));

export const createDefaultStorybookMainConfig: (storybookConfig: Partial<StorybookConfig>, webpackConfig?: Configuration) => StorybookConfig = (storybookConfig, webpackConfig) => ({
    stories: ['../tests/**/stories/**/*.stories.@(ts|tsx)'],
    addons: [
        getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
        getAbsolutePath('@storybook/addon-onboarding'),
        getAbsolutePath('@storybook/addon-links'),
        getAbsolutePath('@storybook/addon-essentials'),
        getAbsolutePath('@chromatic-com/storybook'),
        getAbsolutePath('@storybook/addon-interactions'),
        {
            name: 'storybook-css-modules',
            options: {
                cssModulesLoaderOptions: {
                    importLoaders: 1,
                    modules: {
                        getLocalIdent,
                    },
                },
            },
        },
    ],
    framework: {
        name: getAbsolutePath('@storybook/react-webpack5'),
        options: {},
    },
    webpackFinal: async (config: Configuration) => { 
        if (webpackConfig) {
            return merge(config, webpackConfig);
        }

        return config;
    },
    ...storybookConfig,
});

Storybook runs, works well, but mine console is fullfiled of an error

CSF Parsing error: Expected 'ObjectExpression' but found 'CallExpression' instead in 'CallExpression'.
{"type":"CallExpression","start":112,"end":993,"loc":{"start":{"line":3,"column":24,"index":112,"token":9},"end":{"line":33,"column":2,"index":993,"token":102},"lines":{"infos":[{"line":"import { createDefaultStorybookMainConfig } from '@test-utils/storybook/config/main'
","indent":0,"locked":false,"sliceStart":0,"sliceEnd":84},{"line":"","indent":0,"locked":false,"sliceStart":0,"sliceEnd":0},{"line":"const storybookConfig = createDefaultStorybookMainConfig({","indent":0,"locked":false,"sliceStart":0,"sliceEnd":58},{"line":"    stories:
['../stories/**/*.mdx', '../stories/**/*.stories.@(ts|tsx)'],","indent":4,"locked":false,"sliceStart":4,"sliceEnd":74},{"line":"    staticDirs: [],","indent":4,"locked":false,"sliceStart":4,"sliceEnd":19},{"line":"}, {","indent":0,"locked":false,"sliceStart":0,"sliceEnd"
:4},{"line":"    module: {","indent":4,"locked":false,"sliceStart":4,"sliceEnd":13},{"line":"        rules: [","indent":8,"locked":false,"sliceStart":8,"sliceEnd":16},{"line":"            {","indent":12,"locked":false,"sliceStart":12,"sliceEnd":13},{"line":"
   test: /\\.module\\.(s)?css$/,","indent":16,"locked":false,"sliceStart":16,"sliceEnd":43},{"line":"                use: [","indent":16,"locked":false,"sliceStart":16,"sliceEnd":22},{"line":"                    'style-loader',","indent":20,"locked":false,"sliceStart":20
,"sliceEnd":35},{"line":"                    {","indent":20,"locked":false,"sliceStart":20,"sliceEnd":21},{"line":"                        loader: 'css-loader',","indent":24,"locked":false,"sliceStart":24,"sliceEnd":45},{"line":"                        options: {","inden
t":24,"locked":false,"sliceStart":24,"sliceEnd":34},{"line":"                            modules: true,","indent":28,"locked":false,"sliceStart":28,"sliceEnd":42},{"line":"                        },","indent":24,"locked":false,"sliceStart":24,"sliceEnd":26},{"line":"
                },","indent":20,"locked":false,"sliceStart":20,"sliceEnd":22},{"line":"                    'sass-loader',","indent":20,"locked":false,"sliceStart":20,"sliceEnd":34},{"line":"                ],","indent":16,"locked":false,"sliceStart":16,"sliceEnd":18},{"l
ine":"            },","indent":12,"locked":false,"sliceStart":12,"sliceEnd":14},{"line":"            {","indent":12,"locked":false,"sliceStart":12,"sliceEnd":13},{"line":"                test: /\\.scss$/,","indent":16,"locked":false,"sliceStart":16,"sliceEnd":32},{"line"
:"                exclude: /\\.module.scss$/,","indent":16,"locked":false,"sliceStart":16,"sliceEnd":42},{"line":"                use: ['style-loader', 'css-loader', 'sass-loader'],","indent":16,"locked":false,"sliceStart":16,"sliceEnd":67},{"line":"            },","inde
nt":12,"locked":false,"sliceStart":12,"sliceEnd":14},{"line":"            {","indent":12,"locked":false,"sliceStart":12,"sliceEnd":13},{"line":"                test: /\\.(woff(2)?|eot|ttf|otf|)$/,","indent":16,"locked":false,"sliceStart":16,"sliceEnd":51},{"line":"
          type: 'asset',","indent":16,"locked":false,"sliceStart":16,"sliceEnd":30},{"line":"            },","indent":12,"locked":false,"sliceStart":12,"sliceEnd":14},{"line":"        ]","indent":8,"locked":false,"sliceStart":8,"sliceEnd":9},{"line":"    }","indent":4,"l
ocked":false,"sliceStart":4,"sliceEnd":5},{"line":"});","indent":0,"locked":false,"sliceStart":0,"sliceEnd":3},{"line":"","indent":0,"locked":false,"sliceStart":0,"sliceEnd":0},{"line":"export default storybookConfig;"
//.... AND A LOT OF OTHER CODE

This clogs up the console a lot.