fix: make getStaticDirs work with yarn zero installs

example/.storybook/main.js

@@ -7,7 +7,7 @@ module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   // monaco-editor needs static files to be available at runtime.
   staticDirs: [
-    ...getCodeEditorStaticDirs(),
+    ...getCodeEditorStaticDirs(__filename),
     // getExtraStaticDir('monaco-editor/esm'),
   ],
   addons: [

example/package.json

@@ -10,16 +10,21 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.22.5",
+    "@mdx-js/react": "^1.6.22",
     "@storybook/addon-docs": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/builder-webpack5": "^6.5.16",
     "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/react": "^6.5.16",
     "@types/react": "^17.0.39",
+    "raw-loader": "4.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "require-from-string": "^2.0.2",
     "storybook-addon-code-editor": "file:../",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "webpack": "^5.75.0"
   },
   "overrides": {
     "webpack": "^5.75.0"

getStaticDirs.d.ts

@@ -1,2 +1,7 @@
-export declare function getCodeEditorStaticDirs(): { to: string; from: string }[];
-export declare function getExtraStaticDir(specifier: string): { to: string; from: string };
+type Resolver = (specifier: string, relativeToFile?: string) => { to: string; from: string };
+
+export declare function getCodeEditorStaticDirs(relativeToFile?: string): { to: string; from: string }[];
+export declare function getExtraStaticDir(
+  specifier: string,
+  relativeToFile?: string
+): { to: string; from: string };

getStaticDirs.js

@@ -1,21 +1,50 @@
-const fs = require('fs');
+// @ts-check
 const { createRequire } = require('module');
 const path = require('path');
 
+function resolve(reqFn, packageName) {
+  try {
+    return reqFn.resolve(`${packageName}/package.json`);
+  } catch (err) {
+    return reqFn.resolve(packageName);
+  }
+}
+
+function resolvePackagePath(reqFn, packageName) {
+  let error;
+  let result;
+  try {
+    const packageEntryFile = resolve(reqFn, packageName);
+    const namePosition = packageEntryFile.indexOf(`/${packageName}/`);
+    if (namePosition === -1) {
+      error = new Error(
+        `Cannot resolve package path for: '${packageName}'.\nEntry file: ${packageEntryFile}`
+      );
+    } else {
+      result = `${packageEntryFile.slice(0, namePosition)}/${packageName}/`;
+    }
+  } catch (err) {
+    // Sometimes the require function can't find the entry file but knows the path.
+    result =
+      /Source path: (.+)/.exec(err?.message)?.[1] ||
+      /main defined in (.+?)\/package\.json/.exec(err?.message)?.[1];
+    if (!result) {
+      error = err;
+    }
+  }
+  if (result) {
+    return result;
+  }
+  throw error;
+}
+
 function getStaticDir(specifier, relativeToFile = __filename) {
   const [pn1, pn2, ...pathParts] = specifier.split('/');
   const isScopedPackage = !!(specifier.startsWith('@') && pn2);
   const packageName = isScopedPackage ? `${pn1}/${pn2}` : pn1;
   const dirPath = (isScopedPackage ? pathParts : [pn2, ...pathParts]).join('/');
   const require = createRequire(relativeToFile);
-  const packageDir = require.resolve
-    .paths(specifier)
-    .map((p) => path.join(p, packageName))
-    .find((p) => fs.existsSync(p));
-
-  if (!packageDir) {
-    throw new Error(`Cannot find module '${packageName}'`);
-  }
+  const packageDir = resolvePackagePath(require, packageName);
 
   return {
     from: path.join(packageDir, dirPath),
@@ -29,7 +58,10 @@ function tryGetStaticDir(packageName, relativeToFile) {
   } catch (err) {}
 }
 
-exports.getCodeEditorStaticDirs = () =>
-  [tryGetStaticDir('@types/react'), getStaticDir('monaco-editor/min')].filter(Boolean);
+exports.getCodeEditorStaticDirs = (relativeToFile) =>
+  [
+    tryGetStaticDir('@types/react', relativeToFile),
+    getStaticDir('monaco-editor/min', __filename),
+  ].filter(Boolean);
 
 exports.getExtraStaticDir = getStaticDir;

package.json

@@ -43,7 +43,8 @@
     "@babel/preset-typescript": "^7.22.5",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.2",
-    "@types/react": "^17.0.39",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "prettier": "^2.8.8",