drupsys commented 7 months ago

Describe the bug

Running yarn storybook dev --no-open --host 0.0.0.0 --port 80 throws the following error during startup if node_modules/.cache is present

(storybook is started in a container so ports and host should be fine)

 @storybook/cli v8.0.6

 info => Serving static files from ././public at /
 info => Starting manager..
 /app/.yarn/cache/@storybook-cli-npm-8.0.6-958f023f46-02bdf56524.zip/node_modules/@storybook/cli/bin/index.js:23
   throw error;
   ^

 TypeError [ERR_INVALID_ARG_TYPE]: The "list[2]" argument must be an instance of Buffer or Uint8Array. Received type 
 string ('essentials-actions-3')
     at Function.concat (node:buffer:587:13)
     at node:internal/fs/rimraf:144:32
     at Array.forEach (<anonymous>)
     at node:internal/fs/rimraf:143:5
     at /app/.pnp.cjs:46210:13 {
   code: 'ERR_INVALID_ARG_TYPE'
 }

 Node.js v20.12.1

If I delete node_modules folder and start storybook then no error is thrown.

To Reproduce

Not been able to reproduce this with fresh setup and I cannot publish original repo, this error is happening in a monorepo with yarn pnp setup.

System

Storybook Environment Info:

  System:
    OS: Linux 5.15 Alpine Linux
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-1245U
    Shell: 1.36.1 - /bin/ash
  Binaries:
    Node: 20.12.1 - /tmp/xfs-7103934f/node
    Yarn: 3.8.1 - /tmp/xfs-7103934f/yarn <----- active

Additional context

package json dependencies

  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.13.2",
    "@mui/x-date-pickers": "^6.5.0",
    "@reduxjs/toolkit": "^1.8.3",
    "@storybook/addon-actions": "^8.0.5",
    "@storybook/addon-docs": "^8.0.5",
    "@storybook/addon-essentials": "^8.0.5",
    "@storybook/addon-interactions": "^8.0.5",
    "@storybook/addon-links": "^8.0.5",
    "@storybook/addon-themes": "^8.0.5",
    "@storybook/blocks": "^8.0.5",
    "@storybook/node-logger": "^8.0.5",
    "@storybook/preset-create-react-app": "^8.0.5",
    "@storybook/react": "^8.0.5",
    "@storybook/react-webpack5": "^8.0.5",
    "@storybook/test": "^8.0.5",
    "http-server": "^14.1.1",
    "lodash": "^4.17.21",
    "luxon": "^3.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "redux": "^4.2.0",
    "redux-saga": "^1.1.3",
    "storybook": "^8.0.5",
    "styled-components": "^6.0.7"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@types/eslint": "^8",
    "@types/lodash": "^4.14.182",
    "@types/luxon": "^3",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@typescript-eslint/eslint-plugin": "^7.5.0",
    "@typescript-eslint/parser": "^7.5.0",
    "@yarnpkg/pnpify": "^4.0.1",
    "eslint": "^8.57.0",
    "eslint-config-airbnb-typescript": "^18.0.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-require-extensions": "^0.1.3",
    "nodemon": "^2.0.22",
    "prettier": "^3.2.5",
    "typescript": "^5.4.3"
  },

.yarnrc.yml packageExtensions

packageExtensions:
  "@storybook/preset-create-react-app@*":
    dependencies:
      react-scripts: "*"
  "@storybook/icons@*":
    dependencies:
      react: "*"
      react-dom: "*"

.storybook/main.ts

import { dirname, join } from "path";
import type { StorybookConfig } from '@storybook/react-webpack5';
import { filter } from 'lodash';

function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, "package.json")));
}

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(ts|tsx)"],
  features: {},
  addons: [
    getAbsolutePath("@storybook/addon-links"),
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@storybook/addon-interactions"),
    getAbsolutePath("@storybook/preset-create-react-app"),
  ],
  framework: {
    name: getAbsolutePath("@storybook/react-webpack5"),
    options: {}
  },
  core: {},
  docs: {
    autodocs: true,
    defaultName: 'Documentation',
  },
  staticDirs: ['../public'],
  webpackFinal: (config) => {
    return {
      ...config,
      // disables eslint plugin for storybook as it appears to be inconsistent and sometimes not working with pnp
      plugins: filter(config.plugins, (plugin) => {
        if (plugin.constructor.name === 'ESLintWebpackPlugin') {
          return false
        }
        return true
      }),
    }
  }
};

export default config;

.storybook/preview.tsx

import { ThemeProvider } from '@mui/material';
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import { theme } from 'themes';

export const decorators = [
  withThemeFromJSXProvider({
    themes: {
      light: theme
    },
    defaultTheme: 'light',
    Provider: ThemeProvider,
  })
];

export const parameters = {
  actions: {},
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

Animalmix55 commented 6 months ago

I've been having this same issue since updating to storybook v8. All of my repos are configured with:

Yarn v3.8.2 or greater Using Yarn PnP Using Storybook v8.0.6 or greater Windows 10 Node v20

Builds will throw the exact error above unless I manually delete the node_modules folder.

I have set up 4+ repos with this configuration that have the same issue, so it seems deterministic to me.

shilman commented 6 months ago

Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏

github-actions[bot] commented 5 months ago

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!