Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Twice as many FSWatchers created when using storyStoreV7 #18881

Closed
heyimalex opened this issue Aug 6, 2022 · 0 comments · Fixed by #27016
Closed

Twice as many FSWatchers created when using storyStoreV7 #18881

heyimalex opened this issue Aug 6, 2022 · 0 comments · Fixed by #27016

Comments

@heyimalex
Copy link
Contributor

Describe the bug

TL;DR: I don't think we should be passing relative paths to watchpack since it's effectively causing 2x as many calls to fs.watch. This isn't a bug per-se, but it's probably not great for performance, and it makes encountering another bug with watchpack on osx more common.

When running with storyStoreV7 enabled we create a watcher via watchpack in watch-story-specifiers.ts. For a configuration like this:

["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"]

The NormalizedStoriesSpecifiers passed to watchStorySpecifiers look like this:

[
  {
    titlePrefix: "",
    directory: "./src",
    files: "**/*.stories.mdx",
    importPathMatcher: /^\.[\\/](?:src(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.mdx)$/,
  },
  {
    titlePrefix: "",
    directory: "./src",
    files: "**/*.stories.@(js|jsx|ts|tsx)",
    importPathMatcher: /^\.[\\/](?:src(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$/,
  },
];

And ultimately we call wp.watch({ directories: ["./src"] }).

Watchpack internally re-uses watchers, with caching keyed off the path being watched. Webpack also internally uses watchpack, but it uses absolute paths instead of relative ones, so the watchers created by storybook can't be shared with those created by webpack.

We can demonstrate this by creating a test project with storyStoreV7 enabled, adding this to the top of node_modules/.bin/start-storybook to log fs.watch calls, and then calling yarn run start-storybook.

const fs = require("fs");
const originalWatch = fs.watch;
fs.watch = (...args) => {
  console.log(`fs.watch: ${args}`);
  return originalWatch(...args);
};

You should see two fs.watch calls for all the directories being watched, one relative created by storyook and one absolute created later by webpack after the initial compilation completes. If you change /node_modules/@storybook/core-server/dist/cjs/utils/watch-story-specifiers.js to use absolute paths instead by wrapping ns.directory in _path.default.resolve you'll see half as many.

This is triggering another bug where watchpack can potentially hang for a long time after 2000+ watchers are created on osx. Since all directories are being watched twice, this threshold gets hit a lot sooner.

System

Environment Info:

  System:
    OS: macOS 12.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.16.0 - /usr/local/bin/node
    Yarn: 1.22.17 - ~/.yarn/bin/yarn
    npm: 8.11.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Safari: 15.5
  npmPackages:
    @storybook/addon-actions: ^6.5.7 => 6.5.7
    @storybook/addon-essentials: ^6.5.7 => 6.5.7
    @storybook/addon-interactions: ^6.5.7 => 6.5.7
    @storybook/addon-links: ^6.5.7 => 6.5.7
    @storybook/builder-webpack5: ^6.5.7 => 6.5.7
    @storybook/jest: ^0.0.10 => 0.0.10
    @storybook/manager-webpack5: ^6.5.7 => 6.5.7
    @storybook/node-logger: ^6.5.7 => 6.5.7
    @storybook/preset-create-react-app: ^4.1.2 => 4.1.2
    @storybook/react: ^6.5.7 => 6.5.7
    @storybook/testing-library: ^0.0.11 => 0.0.11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants