[Bug]: MDX imported from other packages will break because they use the wrong instance of React

Describe the bug

In our monorepo, we have 5 packages. As far as Storybook is concerned, they are HTML, Angular, React, Svelte and Vue. The first package (HTML) has several MDX docs (no stories) that should be shared across the five Storybook sites. Only the React package is able to share those MDXs. All the others get the error described below. Storybook 7.0.0-rc.8 is installed across all packages.

The shared MDXs have a single import...

import { Meta } from '@storybook/blocks'

If I copy an MDX to any of the packages, it works. If the packages try load the MDX from the other package using relative URLs, it fails (except for the React project).

The error, "Cannot read properties of null (reading 'useContext')" in Chrome or "Null is not an object (evaluating 'dispatcher.useContext')" in Safari is usually a problem with React where there is more than one instance created or a violation of the Rules of Hooks.

Storybook dutifully finds the MDX files in the other project based on my main.ts files. But when I try to view one, I get the following...

null is not an object (evaluating 'dispatcher.useContext')
useContext@http://localhost:9006/node_modules/.cache/.vite-storybook/deps/chunk-376EEON5.js?v=5b39fbc3:1062:28
Meta@http://localhost:9006/node_modules/.cache/.vite-storybook/deps/@storybook_blocks.js?v=5b39fbc3:9408:47
renderWithHooks@http://localhost:9006/node_modules/.cache/.vite-storybook/deps/chunk-V45T5FYE.js?v=5b39fbc3:12171:35
mountIndeterminateComponent@http://localhost:9006/node_modules/.cache/.vite-storybook/deps/chunk-V45T5FYE.js?v=5b39fbc3:14921:36
beginWork$1@http://localhost:9006/node_modules/.cache/.vite-storybook/deps/chunk-V45T5FYE.js?v=5b39fbc3:19749:31
performUnitOfWork@http://localhost:9006/node_modules/.cache/.vite-storybook/deps/chunk-V45T5FYE.js?v=5b39fbc3:19197:31
workLoopSync@http://localhost:9006/node_modules/.cache/.vite-storybook/deps/chunk-V45T5FYE.js?v=5b39fbc3:19133:30
renderRootSync@http://localhost:9006/node_modules/.cache/.vite-storybook/deps/chunk-V45T5FYE.js?v=5b39fbc3:19112:27
recoverFromConcurrentError@http://localhost:9006/node_modules/.cache/.vite-storybook/deps/chunk-V45T5FYE.js?v=5b39fbc3:18732:42
performConcurrentWorkOnRoot@http://localhost:9006/node_modules/.cache/.vite-storybook/deps/chunk-V45T5FYE.js?v=5b39fbc3:18680:56
performConcurrentWorkOnRoot@[native code]
workLoop@http://localhost:9006/node_modules/.cache/.vite-storybook/deps/chunk-V45T5FYE.js?v=5b39fbc3:197:50
flushWork@http://localhost:9006/node_modules/.cache/.vite-storybook/deps/chunk-V45T5FYE.js?v=5b39fbc3:176:30
performWorkUntilDeadline@http://localhost:9006/node_modules/.cache/.vite-storybook/deps/chunk-V45T5FYE.js?v=5b39fbc3:384:50

The React project shares the MDX files with the HTML project just fine...

Here's the MDX I am trying to load from the other package...

import { Meta } from '@storybook/blocks'

<Meta title="Test/Test" />

# Test

Here's the main.ts for my Vue project (an example of a package not working)...

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

const config: StorybookConfig = {
    stories: [
        '../src/**/*.mdx',
        '../src/**/*.stories.@(js|jsx|ts|tsx)',
        '../../charts/stories/tutorials/!(0-api)*.stories.mdx',
        '../../charts/stories/getting-started/vue.stories.mdx'
    ],
    addons: [
        {
            name: '@storybook/addon-essentials',
            options: {
                actions: false
            }
        }
    ],
    framework: {
        name: '@storybook/vue3-vite',
        options: {}
    },
    docs: {
        autodocs: 'tag'
    },
    staticDirs: ['./assets'],
    features: {
        storyStoreV7: false
    }
}
export default config

Here's the main.ts for my React project (this one is working fine)...

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

const config: StorybookConfig = {
    stories: [
        '../src/**/*.mdx',
        '../src/**/*.stories.@(js|jsx|ts|tsx)',
        '../../charts/stories/tutorials/!(0-api)*.stories.mdx',
        '../../charts/stories/getting-started/react.stories.mdx'
    ],
    addons: [
        {
            name: '@storybook/addon-essentials',
            options: {
                actions: false
            }
        }
    ],
    framework: {
        name: '@storybook/react-vite',
        options: {}
    },
    docs: {
        autodocs: 'tag'
    },
    staticDirs: ['assets'],
    async viteFinal(config, _) {
        return config
    },
    features: {
        storyStoreV7: false
    }
}
export default config

To Reproduce

Make sure you have yarn 3.5.0 and node 18.15.0

git clone https://github.com/nstuyvesant/carbon-charts.git
cd carbon-charts
git checkout next
git pull
yarn install
yarn build
cd packages/charts-svelte
# uncomment lines 8 and 9 of packages/charts-svelte/.storybook/main.ts then...
yarn storybook
# click on any story in DOCS/Tutorials or DOCS/Getting Started
# now go to the core project where those MDXs are
cd ../charts
yarn storybook
# click on one of the stories that failed above and it will display ok

Then click on any stories in DOCS/Tutorials.

System

Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 18.15.0 - /opt/homebrew/bin/node
    Yarn: 3.5.0 - /opt/homebrew/bin/yarn
    npm: 9.6.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 111.0.5563.110
    Firefox: 111.0.1
    Safari: 16.3
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-0 => 7.0.0-rc.8 
    @storybook/addon-interactions: ^7.0.0-0 => 7.0.0-rc.8 
    @storybook/addon-links: ^7.0.0-0 => 7.0.0-rc.8 
    @storybook/angular: ^7.0.0-0 => 7.0.0-rc.8 
    @storybook/blocks: ^7.0.0-0 => 7.0.0-rc.8 
    @storybook/manager-api: ^7.0.0-0 => 7.0.0-rc.8 
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1 
    @storybook/theming: ^7.0.0-0 => 7.0.0-rc.8

Additional context

I tried moving one MDX above the package folder level while debugging and noticed that when it was no longer in a package folder, I got this error message that was a little revealing...

No response

Something I just noticed... the MDX for DOCS/Getting Started/React appears differently for the React version of the site (where it's being pulled in from core)...

This is the MDX on its "home" package... https://deploy-preview-1533--carbon-charts-core.netlify.app/?path=/docs/docs-getting-started-react--docs

The same MDX but pulled into a different package via relative path in .storybook/main.ts... https://deploy-preview-1533--carbon-charts-react.netlify.app/?path=/docs/docs-getting-started-react--docs

So while there's no error for the React version of the site like there is for Angular, Svelte, and Vue, something isn't working correctly.

Thanks for the report!

Could you make a minimal reproduction, that only includes the files necessary to cause this failure?

Building a monorepo to do a reproduction is going to be challenging.

As this is an open source project, are these steps doable?

git clone https://github.com/nstuyvesant/carbon-charts.git
cd carbon-charts
git checkout next
git pull
yarn install
yarn build
cd packages/charts-svelte
# uncomment lines 8 and 9 of packages/charts-svelte/.storybook/main.ts then...
yarn storybook
# click on any story in DOCS/Tutorials or DOCS/Getting Started
# now go to the core project where those MDXs are
cd ../charts
yarn storybook
# click on one of the stories that failed above and it will display ok

I can confirm that I see the same error as you in your repository.

I've tried to create a minimal reproduction at https://github.com/JReinhold/storybook-21788-repro with default projects for React, Vue, Svelte and HTML, and mimicking your configurations, namely disabling storyStoreV7. However I cannot reproduce the error there, even when importing a common.stories.mdx from the HTML package.

One thing I do notice, is that when getting the error and searching for @storybook/blocks in the DevTools it will show multiple instances of not only node_modules/@storybook/blocks/dist/index.mjs (which is fine) but also ../charts/node_modules/@storybook/blocks/dist/index.mjs, which indicates that it is also loading @storybook/blocks from the other package, which is likely causing multiple instances of React to be used.

It might have something to do with your Yarn Workspaces setup, or NX/Lerna, or something else completely.

I might need to pair with @yannbf on this to move further.

Good catch on that. Strange issue. So once the MDX leaves the confines of a package, the storybook build process looks for its dependencies in the node_modules local to the MDX itself. That's why I got that error when I just tossed the MDX in the packages directory.

Probably is not likely to be lerna as the problem occurs if I do builds with yarn directly and lerna just relies on the structure yarn sets up.

I'm not into the behind-the-scenes details with the build process. Wouldn't it rely on the tsconfig since almost everything is TypeScript? All the packages (except Angular extend the root-level tsconfig). Not sure if that has any relevance but it is a difference from your repro. Even my storybook configuration files are all TypeScript.

So my packages use @storybook/html-vite, @storybook/angular, @storybook/react-vite, @storybook/sveltekit, and @storybook/vue3-vite for their frameworks for Storybook. All use vite except @storybook/angular.

But I guess there's also Storybook itself. Doesn't it still use Webpack 5? If so, is it possible it's defining an alias to the node_modules where @storybook/blocks is based on the location of the MDX rather than the build script?

So once the MDX leaves the confines of a package, the storybook build process looks for its dependencies in the node_modules local to the MDX itself.

Yes at least it does that in your case, but not always.

Wouldn't it rely on the tsconfig since almost everything is TypeScript?

It might be the tsconfig yes, I'll explore that and see if that makes a difference.

But I guess there's also Storybook itself. Doesn't it still use Webpack 5?

No in v7 it's all prebundled, so it only uses the builder from your chosen framework.

@JReinhold - thanks for this perspective. So then aside from @storybook/angular, all the rest are vite. I wonder if logging the generated vite config in viteFinal will reveal anything interesting.

I did a deep dive into this with @ndelangen. A couple of findings.

The Problem

It's not TS related, it also breaks in my JS reproduction, I just hadn't cleared the cache correctly to see the effect.

This is actually a feature of the Node ecosystem, and not something strictly related to Storybook. I assume @nstuyvesant's mental model was the same as mine, importing files from different directories just "pulls them in", irregardless of the context or folder they are imported from. But that is not the case. Node, the bundler and the package manager will always try to resolve a modules' dependency to it's local dependency graph. This means that importing my.stories.mdx from another package, will result in that files' dependency on @storybook/blocks to be used, rather than the importer's. This results in having multiple instances of @storybook/blocks and react in the tree, causing this failure, as shown in the screenshot from my previous comment.

There are multiple things at play here that makes this break:

Importing from other packages that also has Storybook and all the Storybook packages installed
Not hoisting any packages in the workspace because of nmHoistingLimits: workspaces in .yarnrc.yml.

The reasons this breaks in 7.0 and not previously, is because we've simplified Storybook's internal aliasing, so we don't do any magic tricks to ensure that the right dependencies are used. The magic tricks were hurting performance overall and would cause many unexpected things to happen to people that didn't knew about these magic tricks. This means that users like @nstuyvesant, that wants these special scenarios to work will have to apply the magic tricks (aliases) manually or find other solutions.

Workarounds

There are a few workarounds to this issue, depending on what you want to achieve. I've tested all these out in my reproduction to ensure that they actually work.

Move common modules to a separate common package

Instead of making the Svelte, React, Angular and Vue packages depend on modules from the HTML package, you could instead move any of these common files and stories out into a separate "commons" package, that they can each import from. This common package Will not have any dependencies, and don't even need a package.json, depending on your needs.

Personally I think this is the best approach, because it ensures that there is no dependency mudding between the packages. It's similar to how a monorepo with a React and a React Native application shouldn't share modules directly in between, but instead have a common package that they both import from.

Hoist packages

If you remove nmHoistingLimits: workspaces from your .yarnrc.yml this problem should also go away, because then there isn't 4 instances of @storybook/blocks in the repo, only the single hoisted one. Although I don't know why you've disabled hoisting in the first place, so I can't really tell if it will cause other issues for you.

Alias dependencies

You can use the viteFinal property in Storybook's main.ts - or do it directly in vite.config.ts - to alias @storybook/blocks to always resolve relative to the package, and not the module using it (like what you probably expected it to in the first place). It looks something like this:

import { dirname } from "path";

const config = {
    ...
    viteFinal: (config) => {
        config.resolve.alias = {
            ...config.resolve.alias,
            "@storybook/blocks": dirname(require.resolve("@storybook/blocks/package.json")),
        };
        return config;
    }
};
export default config;

This will work with your current structure of files. You might even be able to generalize this into a base vite.config.js that all your packages' Vite config are extending from.

The Fix

Given the description of the problem above, @ndelangen and I actually don't think we should fix this internally in Storybook. We could apply that alias described above in addon-docs, but that will introduce the magic that we sought to get rid off. Fundamentally this is an issue with how users' monorepos are set up - and their mental model of node modules - and we think it's best to make users explicitly apply fixes instead of implicitly trying to fix edge cases for them, potentially creating other issues. But I'd like to hear if @shilman or @yannbf thinks otherwise.

@JReinhold - great job at researching this. That yarn setting was a workaround for this issue: https://github.com/storybookjs/storybook/issues/21710 - but it's probably related to your finding. You'll see others with monorepos are running into issues. It may be worth having a page on the Storybook documentation specifically for monorepos.

Created folders packages/shared/stories and packages/shared/assets (no package.json) and copied the folders containing the stories.mdx files to the former and the images to the latter.

Then I setup my packages/charts-vue/.storybook/main.ts to:

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

const config: StorybookConfig = {
    stories: [
        '../src/**/*.mdx',
        '../src/**/*.stories.@(js|jsx|ts|tsx)',
        '../../shared/stories/tutorials/!(0-api)*.stories.mdx',
        '../../shared/stories/getting-started/vue.stories.mdx'
    ],
    addons: [
        {
            name: '@storybook/addon-essentials',
            options: {
                actions: false
            }
        }
    ],
    framework: {
        name: '@storybook/vue3-vite',
        options: {}
    },
    docs: {
        autodocs: 'tag'
    },
    staticDirs: ['../../shared/assets'],
    features: {
        storyStoreV7: false
    }
}
export default config

When I ran yarn storybook in the packages/charts-vue directory, I got this error...

9:22:02 AM [vite] Internal server error: Failed to resolve import "@storybook/blocks" from "../shared/stories/getting-started/vue.stories.mdx". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/nates/dev/carbon-charts/packages/shared/stories/getting-started/vue.stories.mdx:2:23
  1  |  import { useMDXComponents as _provideComponents } from "@storybook/addon-essentials/docs/mdx-react-shim";
  2  |  import { Meta } from '@storybook/blocks';
     |                        ^
  3  |  import { jsx as _jsx } from "react/jsx-runtime";
  4  |  import { jsxs as _jsxs } from "react/jsx-runtime";
      at formatError (file:///Users/nates/dev/carbon-charts/packages/charts-vue/node_modules/vite/dist/node/chunks/dep-79892de8.js:43113:46)
      at TransformContext.error (file:///Users/nates/dev/carbon-charts/packages/charts-vue/node_modules/vite/dist/node/chunks/dep-79892de8.js:43109:19)
      at normalizeUrl (file:///Users/nates/dev/carbon-charts/packages/charts-vue/node_modules/vite/dist/node/chunks/dep-79892de8.js:41378:33)
      at async TransformContext.transform (file:///Users/nates/dev/carbon-charts/packages/charts-vue/node_modules/vite/dist/node/chunks/dep-79892de8.js:41512:47)
      at async Object.transform (file:///Users/nates/dev/carbon-charts/packages/charts-vue/node_modules/vite/dist/node/chunks/dep-79892de8.js:43387:30)
      at async loadAndTransform (file:///Users/nates/dev/carbon-charts/packages/charts-vue/node_modules/vite/dist/node/chunks/dep-79892de8.js:41105:29)

This is the top of packages/shared/stories/getting-started/vue-stories.mdx (just a docs file - no stories)...

import { Meta } from '@storybook/blocks'

<Meta title="Docs/Getting Started/Vue" />

# Carbon Charts - Vue

So even though there is no package.json or node_modules in shared, it seems to recognize this is outside of the scope of the charts-vue package so it's looking for @storybook/blocks in the wrong place.

Oh I'm sorry to hear that, it works when I do it in the minimal reproduction, I'm not sure why there would be a difference. Here's the commit I did that made it work: https://github.com/JReinhold/storybook-21788-repro/commit/7b84cd679e364c6375752e01e800a6b8ef34c743

Do you see any difference to what you did?

Hmmm... are you using yarn 3.5.0? Also, can you create a root directory that contains the packages directory and has an package.json with these elements...

    "engines": {
        "node": "^18.15.0",
        "yarn": "^3.5.0"
    },
    "packageManager": "yarn@3.5.0",
    "workspaces": {
        "packages": [
            "packages/*"
        ]
    },

It's really the workspaces property that defines it as a monorepo with yarn (and lerna). In my case, lerna isn't really active unless I'm building everything. But yarn is very aware of the top-level of the monorepo.

Just upgraded to storybook 7.0.0-rc.10 - still seeing this issue. Tried a storybook build...


@carbon/charts: [vite:dts] Declaration files built in 7ms.
@carbon/charts: [vite]: Rollup failed to resolve import "@storybook/addon-essentials/docs/mdx-react-shim" from "/Users/nates/dev/carbon-charts/packages/shared/stories/getting-started/angular.stories.mdx".
@carbon/charts: This is most likely unintended because it can break your application at runtime.
@carbon/charts: If you do want to externalize this module explicitly add it to
@carbon/charts: `build.rollupOptions.external`
@carbon/charts: ERR! Error: [vite]: Rollup failed to resolve import "@storybook/addon-essentials/docs/mdx-react-shim" from "/Users/nates/dev/carbon-charts/packages/shared/stories/getting-started/angular.stories.mdx".
@carbon/charts: ERR! This is most likely unintended because it can break your application at runtime.
@carbon/charts: ERR! If you do want to externalize this module explicitly add it to
@carbon/charts: ERR! `build.rollupOptions.external`
@carbon/charts: ERR!     at onRollupWarning (file:///Users/nates/dev/carbon-charts/packages/charts/node_modules/vite/dist/node/chunks/dep-79892de8.js:46368:19)
@carbon/charts: ERR!     at onwarn (file:///Users/nates/dev/carbon-charts/packages/charts/node_modules/vite/dist/node/chunks/dep-79892de8.js:46138:13)
@carbon/charts: ERR!     at Object.onwarn (file:///Users/nates/dev/carbon-charts/packages/charts/node_modules/rollup/dist/es/shared/node-entry.js:25149:13)
@carbon/charts: ERR!     at ModuleLoader.handleInvalidResolvedId (file:///Users/nates/dev/carbon-charts/packages/charts/node_modules/rollup/dist/es/shared/node-entry.js:23784:26)
@carbon/charts: ERR!     at file:///Users/nates/dev/carbon-charts/packages/charts/node_modules/rollup/dist/es/shared/node-entry.js:23744:26
@carbon/charts: ERR!  Error: [vite]: Rollup failed to resolve import "@storybook/addon-essentials/docs/mdx-react-shim" from "/Users/nates/dev/carbon-charts/packages/shared/stories/getting-started/angular.stories.mdx".
@carbon/charts: ERR! This is most likely unintended because it can break your application at runtime.
@carbon/charts: ERR! If you do want to externalize this module explicitly add it to
@carbon/charts: ERR! `build.rollupOptions.external`
@carbon/charts: ERR!     at onRollupWarning (file:///Users/nates/dev/carbon-charts/packages/charts/node_modules/vite/dist/node/chunks/dep-79892de8.js:46368:19)
@carbon/charts: ERR!     at onwarn (file:///Users/nates/dev/carbon-charts/packages/charts/node_modules/vite/dist/node/chunks/dep-79892de8.js:46138:13)
@carbon/charts: ERR!     at Object.onwarn (file:///Users/nates/dev/carbon-charts/packages/charts/node_modules/rollup/dist/es/shared/node-entry.js:25149:13)
@carbon/charts: ERR!     at ModuleLoader.handleInvalidResolvedId (file:///Users/nates/dev/carbon-charts/packages/charts/node_modules/rollup/dist/es/shared/node-entry.js:23784:26)
@carbon/charts: ERR!     at file:///Users/nates/dev/carbon-charts/packages/charts/node_modules/rollup/dist/es/shared/node-entry.js:23744:26 {
@carbon/charts: ERR!   watchFiles: [
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/axis-chart.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/chart.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/configuration-non-customizable.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/configuration.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/index.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/polyfills.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/tools.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/component.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/index.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/alluvial.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/area-stacked.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/area.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/bar-grouped.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/bar-simple.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/bar-stacked.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/boxplot.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/bubble.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/bullet.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/circle-pack.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/combo.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/donut.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/gauge.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/heatmap.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/histogram.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/index.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/line.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/lollipop.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/meter.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/pie.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/radar.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/scatter.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/tree.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/treemap.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/charts/wordcloud.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/interfaces/a11y.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/interfaces/axis-scales.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/interfaces/charts.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/interfaces/components.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/interfaces/enums.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/interfaces/events.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/interfaces/index.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/interfaces/layout.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/interfaces/model.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/interfaces/truncation.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/services/angle-utils.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/services/canvas-zoom.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/services/curves.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/services/index.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/services/scales-cartesian.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/services/service.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/services/time-series.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/services/zoom.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/model/alluvial.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/model/binned-charts.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/model/boxplot.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/model/bullet.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/model/cartesian-charts.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/model/circle-pack.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/model/gauge.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/model/heatmap.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/model/index.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/model/meter.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/model/model.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/model/pie.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/model/radar.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/model/tree.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/model/treemap.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/model/wordcloud.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/axes/axis.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/axes/chart-clip.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/axes/grid-brush.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/axes/grid.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/axes/hover-axis.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/axes/ruler-binned.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/axes/ruler-stacked.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/axes/ruler.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/axes/toolbar.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/axes/two-dimensional-axes.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/axes/zero-line.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/axes/zoom-bar.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/diagrams/buildPaths.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/diagrams/markerDefinitions.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/layout/layout.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/layout/spacer.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/essentials/canvas-chart-clip.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/essentials/color-scale-legend.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/essentials/highlights.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/essentials/legend.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/essentials/modal.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/essentials/threshold.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/essentials/title-meter.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/essentials/title.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/essentials/tooltip-axis.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/essentials/tooltip.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/graphs/alluvial.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/graphs/area-stacked.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/graphs/area.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/graphs/bar-grouped.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/graphs/bar-simple.ts',
@carbon/charts: ERR!     '/Users/nates/dev/carbon-charts/packages/charts/src/components/graphs/bar-stacked.ts',
@carbon/charts: ERR!     ... 122 more items
@carbon/charts: ERR!   ]
@carbon/charts: ERR! }
``

I also tried commenting out:

# nmHoistingLimits: workspaces

in my .yarnrc.yml file and reinstalling but that caused this problem to come back...

WARN   Failed to load preset: "@storybook/angular/preset"
ERR! Error: Cannot find module '@storybook/angular/preset'
ERR! Require stack:
ERR! - /Users/nates/dev/carbon-charts/node_modules/@storybook/core-common/dist/index.js
ERR! - /Users/nates/dev/carbon-charts/node_modules/@storybook/core-server/dist/index.js
ERR! - /Users/nates/dev/carbon-charts/packages/charts-angular/node_modules/@storybook/angular/dist/builders/start-storybook/index.js
ERR! - /Users/nates/dev/carbon-charts/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
ERR! - /Users/nates/dev/carbon-charts/node_modules/@angular-devkit/architect/node/index.js
ERR! - /Users/nates/dev/carbon-charts/node_modules/@angular/cli/src/command-builder/architect-base-command-module.js
ERR! - /Users/nates/dev/carbon-charts/node_modules/@angular/cli/src/command-builder/architect-command-module.js
ERR! - /Users/nates/dev/carbon-charts/node_modules/@angular/cli/src/commands/build/cli.js
ERR! - /Users/nates/dev/carbon-charts/node_modules/@angular/cli/src/command-builder/command-runner.js
ERR! - /Users/nates/dev/carbon-charts/node_modules/@angular/cli/lib/cli/index.js
ERR! - /Users/nates/dev/carbon-charts/node_modules/@angular/cli/lib/init.js
ERR!     at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
ERR!     at Module._resolveFilename (/Users/nates/dev/carbon-charts/node_modules/esbuild-register/dist/node.js:4768:36)
ERR!     at Module._load (node:internal/modules/cjs/loader:920:27)
ERR!     at Module.require (node:internal/modules/cjs/loader:1141:19)
ERR!     at require (node:internal/modules/cjs/helpers:110:18)
ERR!     at interopRequireDefault (/Users/nates/dev/carbon-charts/node_modules/@storybook/core-common/dist/index.js:6:21)
ERR!     at getContent (/Users/nates/dev/carbon-charts/node_modules/@storybook/core-common/dist/index.js:13:332)
ERR!     at loadPreset (/Users/nates/dev/carbon-charts/node_modules/@storybook/core-common/dist/index.js:13:517)
ERR!     at /Users/nates/dev/carbon-charts/node_modules/@storybook/core-common/dist/index.js:15:411
ERR!     at Array.map (<anonymous>)
ERR!  Error: Cannot find module '@storybook/angular/preset'
ERR! Require stack:
ERR! - /Users/nates/dev/carbon-charts/node_modules/@storybook/core-common/dist/index.js
ERR! - /Users/nates/dev/carbon-charts/node_modules/@storybook/core-server/dist/index.js
ERR! - /Users/nates/dev/carbon-charts/packages/charts-angular/node_modules/@storybook/angular/dist/builders/start-storybook/index.js
ERR! - /Users/nates/dev/carbon-charts/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
ERR! - /Users/nates/dev/carbon-charts/node_modules/@angular-devkit/architect/node/index.js
ERR! - /Users/nates/dev/carbon-charts/node_modules/@angular/cli/src/command-builder/architect-base-command-module.js
ERR! - /Users/nates/dev/carbon-charts/node_modules/@angular/cli/src/command-builder/architect-command-module.js
ERR! - /Users/nates/dev/carbon-charts/node_modules/@angular/cli/src/commands/build/cli.js
ERR! - /Users/nates/dev/carbon-charts/node_modules/@angular/cli/src/command-builder/command-runner.js
ERR! - /Users/nates/dev/carbon-charts/node_modules/@angular/cli/lib/cli/index.js
ERR! - /Users/nates/dev/carbon-charts/node_modules/@angular/cli/lib/init.js
ERR!     at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
ERR!     at Module._resolveFilename (/Users/nates/dev/carbon-charts/node_modules/esbuild-register/dist/node.js:4768:36)
ERR!     at Module._load (node:internal/modules/cjs/loader:920:27)
ERR!     at Module.require (node:internal/modules/cjs/loader:1141:19)
ERR!     at require (node:internal/modules/cjs/helpers:110:18)
ERR!     at interopRequireDefault (/Users/nates/dev/carbon-charts/node_modules/@storybook/core-common/dist/index.js:6:21)
ERR!     at getContent (/Users/nates/dev/carbon-charts/node_modules/@storybook/core-common/dist/index.js:13:332)
ERR!     at loadPreset (/Users/nates/dev/carbon-charts/node_modules/@storybook/core-common/dist/index.js:13:517)
ERR!     at /Users/nates/dev/carbon-charts/node_modules/@storybook/core-common/dist/index.js:15:411
ERR!     at Array.map (<anonymous>) {
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   requireStack: [
ERR!     '/Users/nates/dev/carbon-charts/node_modules/@storybook/core-common/dist/index.js',
ERR!     '/Users/nates/dev/carbon-charts/node_modules/@storybook/core-server/dist/index.js',
ERR!     '/Users/nates/dev/carbon-charts/packages/charts-angular/node_modules/@storybook/angular/dist/builders/start-storybook/index.js',
ERR!     '/Users/nates/dev/carbon-charts/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js',
ERR!     '/Users/nates/dev/carbon-charts/node_modules/@angular-devkit/architect/node/index.js',
ERR!     '/Users/nates/dev/carbon-charts/node_modules/@angular/cli/src/command-builder/architect-base-command-module.js',
ERR!     '/Users/nates/dev/carbon-charts/node_modules/@angular/cli/src/command-builder/architect-command-module.js',
ERR!     '/Users/nates/dev/carbon-charts/node_modules/@angular/cli/src/commands/build/cli.js',
ERR!     '/Users/nates/dev/carbon-charts/node_modules/@angular/cli/src/command-builder/command-runner.js',
ERR!     '/Users/nates/dev/carbon-charts/node_modules/@angular/cli/lib/cli/index.js',
ERR!     '/Users/nates/dev/carbon-charts/node_modules/@angular/cli/lib/init.js'
ERR!   ]
ERR! }
ERR! Error: no builder configured!
ERR!     at getPreviewBuilder (/Users/nates/dev/carbon-charts/node_modules/@storybook/core-server/dist/index.js:10:1912)
ERR!     at buildDevStandalone (/Users/nates/dev/carbon-charts/node_modules/@storybook/core-server/dist/index.js:40:2022)
ERR!     at async withTelemetry (/Users/nates/dev/carbon-charts/node_modules/@storybook/core-server/dist/index.js:27:3469)
ERR!  Error: no builder configured!
ERR!     at getPreviewBuilder (/Users/nates/dev/carbon-charts/node_modules/@storybook/core-server/dist/index.js:10:1912)
ERR!     at buildDevStandalone (/Users/nates/dev/carbon-charts/node_modules/@storybook/core-server/dist/index.js:40:2022)
ERR!     at async withTelemetry (/Users/nates/dev/carbon-charts/node_modules/@storybook/core-server/dist/index.js:27:3469)

When I allow modules to be hoisted, some get hoisted (common ones across packages) and some don't like the @storybook/angular module. My guess is that those modules assume they are in the same node_modules folder rather than split between two.

This looks to be the same issue as https://github.com/storybookjs/storybook/issues/21710.

So it looks like option 3 (aliases) may be the only thing I can do. I will try it out.

Hmmm... are you using yarn 3.5.0? Also, can you create a root directory that contains the packages directory and has an package.json with these elements...
  "engines": {
      "node": "^18.15.0",
      "yarn": "^3.5.0"
  },
  "packageManager": "yarn@3.5.0",
  "workspaces": {
      "packages": [
          "packages/*"
      ]
  },

I already had this from the beginning:

{
    "name": "multi-framework-monorepo",
    "license": "unlicenced",
    "packageManager": "yarn@3.5.0",
    "workspaces": [
        "packages/*"
    ]
}

But I added the engines field anyway and it didn't make a difference. I did get the error though, just not consistently. What I'm seeing is that if I open the common MDX story (the one in a separate package) it will fail with missing @storybook/blocks. Then if I navigate to another MDX file, Vite will trigger

07:51:06 [vite] ✨ new dependencies optimized: @storybook/blocks
07:51:06 [vite] ✨ optimized dependencies changed. reloading

And then navigating back to the common doc will now work.

But as you also found out, this won't make a difference when building, so clearly this option is not as good as I originally thought.

There's an alternative though, which might also solve the whole hoisting problem, which is to move all the Storybook packages to root dependencies, and then change the storybook command to "../../node_modules/.bin/storybook dev". You also have to move (or copy) the builders and renderers dependencies (react, vue, vite).

I've done that change here, and it worked (I've said that before though...) https://github.com/JReinhold/storybook-21788-repro/commit/135af9daa1904eef4bad8e65ee6e1f781f828af4

We should investigate this more, and come up with better guidelines for how to add Storybook to monorepos.

As a side note, I think your syntax for defining workspaces in package.json is off, I don't think it can be a nested array like you have it. That's also what I gather from the Yarn docs, but maybe it's a secret feature I don't know about. https://yarnpkg.com/configuration/manifest#workspaces

Tried out the approach of adding the storybook dependencies to the monorepo's root package.json's devDependencies to hoist the modules...

        "@compodoc/compodoc": "^1.1.19",
        "@storybook/addon-essentials": "^7.0.0-0",
        "@storybook/addon-interactions": "^7.0.0-0",
        "@storybook/addon-links": "^7.0.0-0",
        "@storybook/angular": "^7.0.0-0",
        "@storybook/blocks": "^7.0.0-0",
        "@storybook/html": "^7.0.0-0",
        "@storybook/html-vite": "^7.0.0-0",
        "@storybook/manager-api": "^7.0.0-0",
        "@storybook/react": "^7.0.0-0",
        "@storybook/react-vite": "^7.0.0-0",
        "@storybook/svelte": "^7.0.0-0",
        "@storybook/sveltekit": "^7.0.0-0",
        "@storybook/testing-library": "^0.0.14-next.1",
        "@storybook/theming": "^7.0.0-0",
        "@storybook/vue3": "^7.0.0-0",
        "@storybook/vue3-vite": "^7.0.0-0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "storybook": "^7.0.0-0",

Then tried building the storybooks for the packages. Now getting other errors like this...

@carbon/charts-angular: info => Loading presets
@carbon/charts-angular: WARN   Failed to load preset: {"type":"presets","name":"/Users/nates/dev/carbon-charts/node_modules/@storybook/angular/dist/server/framework-preset-angular-cli.js"} on level 1
@carbon/charts-angular: ERR! Error: Cannot find module '@angular-devkit/build-angular/src/utils/webpack-browser-config'

The path this is going down is to hoist every module from every package. That will eventually cause conflicts as there are a few version differences in typescript and a few other modules.

The path this is going down is to hoist every module from every package. That will eventually cause conflicts as there are a few version differences in typescript and a few other modules.

Yeah of course that's not sustainable either... 🤔

I wonder if you hoist everything but the renderers.. if that would work.

The only thing that has worked well so far was setting the .storybook/main.ts to resolve the alias locally...

import type { StorybookConfig } from '@storybook/react-vite'
import { dirname } from 'path'

const config: StorybookConfig = {
    stories: [
        '../src/**/*.mdx',
        '../src/**/*.stories.@(js|jsx|ts|tsx)',
        '../../charts/stories/getting-started/react.stories.mdx',
        '../../charts/stories/tutorials/*.stories.mdx'
    ],
    viteFinal: (config) => {
        if (config.resolve) {
            config.resolve.alias = {
                ...config.resolve.alias,
                '@storybook/blocks': dirname(require.resolve('@storybook/blocks/package.json'))
            }
        }
        return config
    },
    addons: [
        {
            name: '@storybook/addon-essentials',
            options: {
                actions: false
            }
        }
    ],
    framework: {
        name: '@storybook/react-vite',
        options: {}
    },
    docs: {
        autodocs: 'tag'
    },
    staticDirs: ['../../charts/.storybook/assets'],
    features: {
        storyStoreV7: false
    }
}
export default config

I tried something similar for the Angular package but it didn't like what I put in (probably a webpack thing - I only use vite)...

import type { StorybookConfig } from '@storybook/angular'
import { resolve } from 'path'
const core = '../../../../charts'
const demoDist = resolve(__dirname, `${core}/dist/demo`)
import { dirname } from 'path'

const config: StorybookConfig = {
  stories: [
    '../src/**/*.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
    // Storybook monorepo-specific issue
        // '../../../../charts/stories/getting-started/angular.stories.mdx',
        // '../../../../charts/stories/tutorials/*.stories.mdx'
  ],
  addons: [
    {
      name: '@storybook/addon-essentials',
            options: {
                actions: false,
        docs: true
            }
    }
  ],
  framework: {
    name: '@storybook/angular',
    options: {}
  },
  docs: {
    autodocs: 'tag'
  },
  staticDirs: ['../../../../charts/.storybook/assets'],
  features: {
    storyStoreV7: false
  },
  webpackFinal: async (config, {
    configType
  }) => {
    config?.module?.rules?.push({
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
      include: [demoDist]
    })
    config.resolve!.alias = {
      ...config.resolve!.alias,
      '@carbon/charts/demo': demoDist,
      // '@storybook/blocks': dirname(require.resolve('@storybook/blocks/package.json'))
    }
    return config
  }
}
export default config

I think we've gone back and forth here on possible solutions, and so far the only reliable solution is to alias @storybook/blocks in Vite/Webpack in this scenario.

Personally I'd say that the solution here is that we write documentation for this, instead of baking it in directly to addon-docs, but I'm open to suggestions. @ndelangen @shilman

BTW, I never did get the alias approach working for Angular (have not had time to investigate it). If Angular 16 arrives soon I won't have to wrestle with webpack since it uses esbuild. For packages based on vite, the alias approach works well.

The downside is the extra required step for those with monorepos that they are not expecting. But I guess if you had a monorepo documentation page that includes this along with the nuances related to module hoisting, this would be helpful.

If you think about it, in a monorepo, Storybook is the most complicated part of a monorepo implementation since it's a) external and b) most storybook modules (other than environment-specific ones) are shared across the monorepo. If homegrown packages are dependent upon each other, you just add something like this to your package's package.json dependencies and move on:

        "@carbon/charts": "workspace:*",

Hoisting and Storybook are problematic since the default for yarn workspaces would be to keep something like @storybook/react in the local package's node_modules while the shared ones sit in the monorepo's root node_modules. Any interactions between storybook modules can't assume they all sit in one node_modules directory. This is the bigger challenge I'm hoping can be solved.

Personally I'd say that the solution here is that we write documentation for this, instead of baking it in directly to addon-docs, but I'm open to suggestions. @ndelangen @shilman

cc @jonniebigodes for help with documentation

Still lacking a solution for Angular (at least until they drop webpack next month for vite in Angular 16). Our workaround is a script that copies the mdx files to the Angular package before building the storybook - not optimal.

I had a similar but slightly different issue that I've created another issue in case they're separate. But I wanted to mention it here.

I think this PR: https://github.com/storybookjs/storybook/pull/23941 might have fixed this problem.

I think this PR: #23941 might have fixed this problem.

@ndelangen it does not, 7.6.0-alpha.2 still has the issue.

Closing this as fixed, because we've actually ended up implementing the aliases as part of Storybook 8.0's efforts to remove React as a required dependency.

That means we're now doing the aliasing internally and so there shouldn't be anything for users to do. I've confirmed that this works in the reproduction when upgrading to 8.0.0-beta.5, including Vite, Webpack and Angular (see the webpack branch).

storybookjs / storybook