(pnpm) Error: command storybook not found

[adrianaferrugento]

The problem

I've upgraded the @percy/storybook using the following instructions - https://github.com/percy/percy-storybook#upgrading. The command I'm now using to run percy is percy storybook ./storybook-static and this is complaining that command storybook not found.

Environment

• Node version: v14.15.4
• @percy/cli version: 1.0.0-beta.65
• @percy/storybook: 4.0.1
• OS version: macOS Big Sur 11.2.1
• Type of shell command-line [interface]: zsh

Debug logs

› Error: command storybook not found

[Robdel12]

Hey @adrianaferrugento! Can you tell me more about the steps you took to install? Is the CLI installed globally (highly discouraged)? A reproduction would be helpful, if possible

The error is suggesting the storybook CLI plugin can't register with the CLI, likely because they're in different locations

[adrianaferrugento]

CLI is not installed globally. I just created a new project using create-react-app and this wasn't an issue there. The only difference between the 2 repos is that I'm using pnpm and webpack5 in my project where I see this error. I have the exact same versions as the create-react-app so I don't understand why I'm seeing this error.

[Robdel12]

I'm using pnpm

Ah, that's the problem here. This is pretty similar to Yarn 2's PnP: percy/cli#295 (comment) We currently don't support non-standard package managers.

[adrianaferrugento]

Ah I see, so I'm not going to be able to update this package in a while? Are you going to support it eventually?

[Robdel12]

Not likely, it's not supported by dependencies we rely on and it's kind of at odds with how the ecosystem works. If/when it gains mass support across the npm registry, we'll circle back around.

[jtbeach]

@Robdel12 I actually got this working in rush/pnpm today by hacking the unregistered plugin discovery code in @percy/cli index.js module. It seems to be working just fine

It's a bit rough at the moment but is this something you'd be interested in a PR for? Otherwise I can just apply the fix locally via patch-package

[wwilsman]

Hi @jtbeach! I'm currently refactoring this part of @percy/cli and I'm trying to do so with Yarn 2 PnP and pnpm in mind. I would love to see what your patch looks like to compare it to what I've got started! 🙌

[jtbeach]

Hi @wwilsman -- thanks for reaching out! I totally hacked it right now to be honest. It definitely works and we're pointing at a local fork, but probably only for pnpm, not for yarn2 PnP. I've only test with pnpm and workspaces using rush.

I assume this might be enough for you to get the idea, but I can refactor/clean up if you think it's actually helpful vs. way too hacky. Note: I'm not a node programmer, so I'm sure a lot of the below is not best practice. The basic idea is that it needs to recursively walking the directory tree inside any @percy folder looking for plugins rather than assuming everthing is flattened. The non-flattening also affects both the relative location of the node_modules folder as well as the regex match to find matching directories.

I I was making this cleaner, I'd definitely not try to re-use the findPlugins function for both pnpm other packaging systems but would have a separate function for each

--- node_modules/@percy/cli/index.js	2021-10-28 17:33:23.000000000 +1100
+++ /Users/joelbeach/patched-percy.js	2021-10-28 17:26:26.000000000 +1100
@@ -4,7 +4,7 @@
   process.exit(1);
 }

-const { promises: fs } = require('fs');
+const { promises: fs, readdirSync, statSync } = require('fs');
 const path = require('path');

 // find plugins in a directory, matching a pattern, ignoring registered plugins
@@ -17,15 +17,42 @@
     // exclude CLI's own directory and any directory not matching the pattern
     if (dirname === 'cli' || !regexp.test(dirname)) return plugins;

+    // If this is has a node_modules foldern with a @percy folder (ie. in pnpm), try
+    // reading package.json files of children
+    let directoriesToTry = [`${dir}/${dirname}`]
+    const percyModulesDir = path.resolve(dir, `${dirname}/node_modules/@percy`);
     try {
-      let { name, oclif } = require(`${dir}/${dirname}/package.json`);
-
-      // plugin's package.json have a percy oclif binary defined
-      if (!registered.includes(name) && oclif && oclif.bin === 'percy') {
-        return plugins.concat(name);
+      const stat = statSync(percyModulesDir)
+      if (stat && stat.isDirectory()) {
+        // Get top level folders
+        const newDirs = readdirSync(percyModulesDir);
+        directoriesToTry = newDirs.filter(p => p !== "cli").map(p => `${dir}/${dirname}/node_modules/@percy/${p}`);
+        directoriesToTry.forEach(function(dx) {
+          try {
+            // Try to read from package.json
+            let { name, oclif } = require(`${dx}/package.json`);
+
+            // plugin's package.json have a percy oclif binary defined
+            if (!registered.includes(name) && oclif && oclif.bin === 'percy') {
+              console.log(`Adding command ${name}`);
+              plugins = plugins.concat(name);
+            }
+          } catch {
+            // ignore directories without a package.json
+          }
+        });
       }
     } catch {
-      // ignore directories without a package.json
+      try {
+        let { name, oclif } = require(`${dir}/${dirname}/package.json`);
+
+        // plugin's package.json have a percy oclif binary defined
+        if (!registered.includes(name) && oclif && oclif.bin === 'percy') {
+          return plugins.concat(name);
+        }
+      } catch {
+        // ignore directories without a package.json
+      }
     }

     return plugins;
@@ -37,6 +64,7 @@
   let nodeModules = path.resolve(__dirname, '../..');
   let pkgPath = path.resolve(__dirname, 'package.json');
   let pkg = require(pkgPath);
+  let pnpmNodeModules = path.resolve(nodeModules, '../..');

   // if not installed within node_modules, look within own node_modules
   /* istanbul ignore else: always true during tests */
@@ -54,7 +82,8 @@
   // find unregistered plugins
   let unregistered = await Promise.all([
     findPlugins(nodeModules, '@percy/*', registered),
-    findPlugins(nodeModules, 'percy-cli-*', registered)
+    findPlugins(nodeModules, 'percy-cli-*', registered),
+    findPlugins(pnpmNodeModules, '@percy*', registered),
   ]).then(p => Array.from(new Set(p.flat())));

   // if any unregistered or unresolved registered, modify plugin registry