Configuration within a monorepo

[Jeezy8]

Hey folks,

im having issues configuring storybook inside a monorepo. I have storybook in the root and then two packages inside packages/myApp and packages/base these two packages have their own tsconfig.json with baseUrl: './src' The issue is with the absolute imports within these packages. For their compilation everything works fine, vite picks up the absolute imports based on the baseUrl properly.

but for storybook out of the root it does not work. i tried to make it work using a rollup plugin as followed, but without any success:

.storybook/main.js

  async viteFinal(config, { configType }) {
    config.plugins = [
      ...config.plugins,
      pluginNodeResolve.nodeResolve({
        moduleDirectories: ['node_modules', 'packages/myApp/src'],
      }),
    ];
    return config;
  },

[verhichi]

also am having this problem, have not found a solution yet

[dannytce]

Would something like this help you?

viteFinal: async (config) => {
    return {
      ...config,
      resolve: {
        alias: [
          {
            find: '~/web',
            replacement: path.resolve(__dirname, '../../web/src'),
          },
          {
            find: '~/server',
            replacement: path.resolve(__dirname, '../../server/src'),
          },
        ],
      },
    }
  },

My setup is a bit different (I have a storybook as a standalone package, not in the root). Also each package has it's own paths resolution.

[filipesperandio]

Feels to me that this is not respecting managerHead/managerBody from the storybook config. From their docs, it is possible add a .storybook/manager-head.html with <base href="/storybook/" /> (as an example) that would be inserted into the final index.html and adjust the base path for subfolders setups.

I am new here, so couldn't pin point where that should happened though in the code.

[filipesperandio]

It would be somewhat analogous to https://github.com/eirslett/storybook-builder-vite/commit/255b7f93257ac2becb05e694618619082027211b