[Bug]: Yarn 4 PnP with Storybook 8 => @storybook/addon-essentials not work

[dark-kitt]

Describe the bug

I recently started to add Storybook 8 and run in the following issue.

import type { StorybookConfig } from '@storybook/vue3-vite';

const config: StorybookConfig = {
  stories: ['../src/docs/**/*.mdx', '../src/components/**/*.stories.ts'],
  addons: [
    '@storybook/addon-links',
    '@chromatic-com/storybook',
    // '@storybook/addon-essentials',
    '@storybook/addon-interactions'
  ],
  framework: {
    name: '@storybook/vue3-vite',
    options: {
      docgen: 'vue-component-meta'
    }
  }
};

export default config;

As you can see the @storybook/addon-essentials is not added, because it throws the following ERROR:

✘ [ERROR] Could not read from file: /Users/done/Workspace/vue-ts-kitt/.yarn/__virtual__/@storybook-blocks-virtual-76de42567a/3/.yarn/berry/cache/@storybook-blocks-npm-8.0.10-6f477cd35f-10c0.zip/node_modules/@storybook/blocks/dist

    ../../.yarn/berry/cache/@storybook-addon-docs-npm-8.0.10-a4fac154e7-10c0.zip/node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs:3:61:
      3 │ import { CodeOrSourceMdx, AnchorMdx, HeadersMdx, Docs } from '@storybook/blocks';
        ╵                                                              ~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Could not read from file: /Users/done/Workspace/vue-ts-kitt/.yarn/__virtual__/react-dom-virtual-c3570acd48/3/.yarn/berry/cache/react-dom-npm-18.3.1-a805663f38-10c0.zip/node_modules/react-dom/client

    .yarn/__virtual__/@storybook-react-dom-shim-virtual-9fe4787d9d/3/.yarn/berry/cache/@storybook-react-dom-shim-npm-8.0.10-319d8d5c7b-10c0.zip/node_modules/@storybook/react-dom-shim/dist/react-18.mjs:2:21:
      2 │ import ReactDOM from 'react-dom/client';

Please, help? What shall I do? 🤷‍♂️ And it's actually only the @storybook/addon-essentials plugin that doesn't work.

To Reproduce

I'm trying to add Storybook 8 here: https://github.com/dark-kitt/vue-ts-kitt

System

Storybook Environment Info:

  System:
    OS: macOS 13.6.6
    CPU: (8) arm64 Apple M2
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.1 - /private/var/folders/1c/60d2ymbd26vgt3p07_z_l6rw0000gn/T/xfs-d71db547/node
    Yarn: 4.2.1 - /private/var/folders/1c/60d2ymbd26vgt3p07_z_l6rw0000gn/T/xfs-d71db547/yarn <----- active
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.1/bin/npm
  Browsers:
    Chrome: 124.0.6367.158
    Safari: 17.4.1

Additional context

Called with yarn storybook and custom cache dir, but the custom cache dir isn't the issue.

{
"scripts": {
    "build": "vite build",
    "storybook": "CACHE_DIR=$PWD/.yarn/cache storybook dev -p 6006",
    "build-storybook": "storybook build"
  }
}

After some troubleshooting

Unfortunately, I wasn't able to get it to work. My solution is now to downgrade to Storybook v7.6.19 and removing the MDX support (so no MDX files are included), but luckily it seems like that the autodocs are working. So, my storybook config file looks now like this:

import type { StorybookConfig } from '@storybook/vue3-vite';
import { join, dirname } from 'path';
import { UserConfig, PluginOption } from 'vite';

/**
 * 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): string => {
  return dirname(require.resolve(join(value, 'package.json')));
};

const config: StorybookConfig = {
  stories: ['../src/components/**/*.stories.ts'],
  addons: [
    getAbsolutePath('@storybook/addon-links'),
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@storybook/addon-interactions')
  ],
  framework: {
    name: '@storybook/vue3-vite',
    options: {}
  },
  docs: {
    autodocs: 'tag'
  },
  viteFinal: (config: UserConfig) => {
    /**
     * Remove the vite-plugin-dts to prevent
     * that Storybook creates TS types. Otherwise
     * the dts plugin runs twice with two different
     * configurations in the GitHub CI/CD pipeline.
     */
    config.plugins = (config.plugins as PluginOption[])?.filter(
      (plugin: PluginOption) => (plugin as any)?.name !== 'vite:dts'
    );

    return config;
  }
};

export default config;

While starting Storybook I get the following warnings from Vite.

8:18:34 AM [vite] warning: rewrote @storybook/global to .yarn/cache/sb-vite-plugin-externals/@storybook/global.js but was not an abolute path and was not handled by other plugins. This will lead to duplicated modules for the same path. To avoid duplicating modules, you should resolve to an absolute path.
  Plugin: alias
8:18:34 AM [vite] warning: rewrote @storybook/preview-api to .yarn/cache/sb-vite-plugin-externals/@storybook/preview-api.js but was not an abolute path and was not handled by other plugins. This will lead to duplicated modules for the same path. To avoid duplicating modules, you should resolve to an absolute path.
  Plugin: alias
8:18:34 AM [vite] warning: rewrote @storybook/core-events to .yarn/cache/sb-vite-plugin-externals/@storybook/core-events.js but was not an abolute path and was not handled by other plugins. This will lead to duplicated modules for the same path. To avoid duplicating modules, you should resolve to an absolute path.
  Plugin: alias
8:18:34 AM [vite] warning: rewrote @storybook/client-logger to .yarn/cache/sb-vite-plugin-externals/@storybook/client-logger.js but was not an abolute path and was not handled by other plugins. This will lead to duplicated modules for the same path. To avoid duplicating modules, you should resolve to an absolute path.
  Plugin: alias
8:18:34 AM [vite] warning: rewrote @storybook/channels to .yarn/cache/sb-vite-plugin-externals/@storybook/channels.js but was not an abolute path and was not handled by other plugins. This will lead to duplicated modules for the same path. To avoid duplicating modules, you should resolve to an absolute path.
  Plugin: alias

[dark-kitt]

After the release of v8.1.0 I tried it again and found also my mistake. The problem was that Storybook included my Vite configuration which was not compatible with the Storybook setup. So, it ended up that I had just to add some resolve.extensions to the Vite configuration.

vite.config.ts

import { resolve } from 'path';
import { defineConfig } from 'vite';

import vue from '@vitejs/plugin-vue';
import dts from 'vite-plugin-dts';

export default defineConfig({
  cacheDir: '.yarn/cache/.vite',
  json: {
    stringify: true
  },
  plugins: [
    vue(),
    dts({
      outDir: ['dist', 'src/@types'],
      cleanVueFileName: true,
      staticImport: true
    })
  ],
  resolve: {
    extensions: ['.md', '.mdx', '.ts', 'tsx', '.js', '.jsx', '.vue', '.json'], <-- here
    alias: {
      '@': resolve(__dirname, './src')
    }
  },
  build: {
    target: 'ESNext',
    minify: true,
    reportCompressedSize: true,
    lib: {
      entry: resolve(__dirname, './src/index.ts'),
      fileName: 'index',
      formats: ['es']
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
});

.storybook/main.ts
It seems like it is not necessary anymore to resolve the absolute path of a package. I have no errors. 🤷‍♂️

import type { StorybookConfig } from '@storybook/vue3-vite';
import { UserConfig, PluginOption } from 'vite';

const config: StorybookConfig = {
  stories: ['../src/introductions/**/*.mdx', '../src/components/**/*.stories.ts'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@chromatic-com/storybook'
  ],
  framework: {
    name: '@storybook/vue3-vite'
  },
  viteFinal: (config: UserConfig) => {
    /**
     * Remove the vite-plugin-dts to prevent
     * that Storybook creates TS types. Otherwise
     * the dts plugin runs twice with two different
     * configurations in the GitHub CI/CD pipeline.
     */
    config.plugins = (config.plugins as PluginOption[])?.filter(
      (plugin: PluginOption) => (plugin as any)?.name !== 'vite:dts'
    );

    return config;
  }
};

export default config;