Could not resolve "./button.css" from "../../packages/ui/node_modules/@storybook/react/template/cli/ts-3-8/Button.tsx"

[jdiponziano]

Summary

I upgraded from storybook 7 to storybook 8. I have a Monorepo setup with Turborepo. Storybook is one of the apps in the turborepo app folder. After the upgrade I get this error.

Could not resolve "./button.css" from "../../packages/ui/node_modules/@storybook/react/template/cli/ts-3-8/Button.tsx"
file: /Users/jdiponziano/git/dockyard/packages/ui/node_modules/@storybook/react/template/cli/ts-3-8/Button.tsx
=> Failed to build the preview
RollupError: Could not resolve "./button.css" from "../../packages/ui/node_modules/@storybook/react/template/cli/ts-3-8/Button.tsx"
    at error (file:///Users/jdiponziano/git/dockyard/node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
    at ModuleLoader.handleInvalidResolvedId (file:///Users/jdiponziano/git/dockyard/node_modules/rollup/dist/es/shared/node-entry.js:24860:24)
    at file:///Users/jdiponziano/git/dockyard/node_modules/rollup/dist/es/shared/node-entry.js:24822:26

Additional information

storybook version 8.0.10

main.ts

import type { StorybookConfig } from "@storybook/react-vite";
import { join, dirname, resolve } from "path";
import { mergeConfig, InlineConfig } 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.
 */
function getAbsolutePath(value: string): string {
  return dirname(require.resolve(join(value, "package.json")));
}

const config: StorybookConfig = {
  stories: [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
    "../../../packages/**/*.mdx",
    "../../../packages/**/**/*.stories.@(ts|tsx)",
  ],
  addons: [
    getAbsolutePath("@storybook/addon-links"),
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@storybook/addon-onboarding"),
    getAbsolutePath("@storybook/addon-interactions"),
    getAbsolutePath("@storybook/addon-a11y"),
    getAbsolutePath("@storybook/addon-jest"),
    getAbsolutePath("@storybook/addon-designs"),
    "@chromatic-com/storybook",
  ],
  framework: {
    name: getAbsolutePath("@storybook/react-vite"),
    options: {},
  },
  docs: {
    autodocs: true,
  },
  typescript: {
    check: false,
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      setDisplayName: false,
      shouldExtractLiteralValuesFromEnum: true,
      shouldRemoveUndefinedFromOptional: true,
      compilerOptions: {
        allowSyntheticDefaultImports: true,
        esModuleInterop: true,
        preserveSymlinks: true,
      },
      propFilter: (prop, component) => {
        // Include props from Radix components
        if (prop.parent?.fileName.includes("@radix-ui/react-")) {
          return true;
        }
        // Include props from Embla carousel
        if (prop.parent?.fileName.includes("embla-carousel")) {
          return true;
        }
        // Exclude props from node_modules by default
        return !prop.parent?.fileName.includes("node_modules");
      },
      include: ["../../packages/ui/src/**/*"],
    },
  },
  viteFinal: async (config: InlineConfig): Promise<InlineConfig> => {
    if (config.resolve) {
      return mergeConfig(config, {
        define: {
          "process.env": {},
        },
        resolve: {
          alias: {
            ...config.resolve.alias,
            ui: resolve(__dirname, "../../../packages/ui/src"),
          },
        },
      });
    }
    return config;
  },
};
export default config;

Create a reproduction

No response

[tobias-raab-intuity]

I encountered the same problem with my pnpm monorepo.
Storybook was searching for stories inside the node_modules directory. The ./button.css file is getting imported inside a story file in the node_modules directory but the file does not exist.

What worked for me was to to exclude the node_modules directory inside of my StorybookConfig in the .storybook/main.ts:

const config: StorybookConfig = {
// ...
stories: ["../../packages/ui/**!(node_modules)/*.stories.@(ts|tsx)"]
// ...
}

[schang124]

@tobias-raab-intuity
Thank you. Your solutions works perfectly!
It was difficult to find the similar issues which specifically happens with monorepo environment.