Core: Use exsolve resolveModulePath for safeResolveModule

MIGRATION.md

@@ -567,10 +567,10 @@ When setting the `core.builder` or `core.builder.name` option in the main config
 In a preset:
 
 ```diff
-import { dirname, join } from 'node:path';
+import { dirname } from 'node:path';
 
 const getAbsolutePath = (input) =>
-  dirname(require.resolve(join(input, 'package.json')));
+  dirname(require.resolve(`${input}/package.json`));
 
 export const core = {
 -  builder: getAbsolutePath('@storybook/builder-vite'),

code/core/src/shared/utils/module.ts

@@ -3,6 +3,7 @@ import { createRequire, register } from 'node:module';
 import { win32 } from 'node:path/win32';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 
+import { resolveModulePath } from 'exsolve';
 import { dirname, join } from 'pathe';
 
 /**
@@ -112,13 +113,13 @@ export const safeResolveModule = ({
   parent?: string;
   extensions?: string[];
 }) => {
-  for (const extension of [''].concat(extensions)) {
-    try {
-      const resolvedPath = fileURLToPath(importMetaResolve(specifier + extension, parent));
-      if (statSync(resolvedPath).isFile()) {
-        return resolvedPath;
-      }
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    } catch (e) {}
-  }
+  try {
+    const resolvedPath = resolveModulePath(specifier, {
+      from: parent,
+      extensions: [''].concat(extensions),
+    });
+    if (statSync(resolvedPath).isFile()) {
+      return resolvedPath;
+    }
+  } catch (e: any) {}
 };

code/core/src/telemetry/package-json.ts

@@ -1,7 +1,6 @@
 import { fileURLToPath, pathToFileURL } from 'node:url';
 
 import * as pkg from 'empathic/package';
-import { join } from 'pathe';
 import type { PackageJson } from 'type-fest';
 
 import type { Dependency } from './types';
@@ -34,10 +33,7 @@ export const getActualPackageJson = async (
       cwd: fileURLToPath(import.meta.resolve(packageName, process.cwd())),
     });
     if (!resolvedPackageJsonPath) {
-      resolvedPackageJsonPath = import.meta.resolve(
-        join(packageName, 'package.json'),
-        process.cwd()
-      );
+      resolvedPackageJsonPath = import.meta.resolve(`${packageName}/package.json`, process.cwd());
     }
 
     const { default: packageJson } = await import(pathToFileURL(resolvedPackageJsonPath).href, {

code/frameworks/angular/src/preset.ts

@@ -1,17 +1,18 @@
 import type { PresetProperty } from 'storybook/internal/types';
 
 import type { StandaloneOptions } from './builders/utils/standalone-options';
+import { fileURLToPath } from 'node:url';
 
 export const addons: PresetProperty<'addons'> = [
-  import.meta.resolve('@storybook/angular/server/framework-preset-angular-cli'),
-  import.meta.resolve('@storybook/angular/server/framework-preset-angular-ivy'),
+  fileURLToPath(import.meta.resolve('@storybook/angular/server/framework-preset-angular-cli')),
+  fileURLToPath(import.meta.resolve('@storybook/angular/server/framework-preset-angular-ivy')),
 ];
 
 export const previewAnnotations: PresetProperty<'previewAnnotations'> = async (
   entries = [],
   options
 ) => {
-  const config = import.meta.resolve('@storybook/angular/client/config');
+  const config = fileURLToPath(import.meta.resolve('@storybook/angular/client/config'));
   const annotations = [...entries, config];
 
   if ((options as any as StandaloneOptions).enableProdMode) {

code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-with-wrappers.js

@@ -1,8 +1,8 @@
-import { dirname, join } from 'node:path';
+import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const wrapForPnp = (packageName) =>
-  dirname(fileURLToPath(import.meta.resolve(join(packageName, 'package.json'))));
+  dirname(fileURLToPath(import.meta.resolve(`${packageName}/package.json`)));
 
 const config = {
   stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],

code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath-utils.ts

@@ -134,7 +134,7 @@ export function getFieldsForGetAbsolutePathWrapper(config: ConfigFile): t.Node[]
  *
  * ```ts
  * function getAbsolutePath(value) {
- *   return dirname(fileURLToPath(import.meta.resolve(join(value, 'package.json'))));
+ *   return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
  * }
  * ```
  */
@@ -162,10 +162,13 @@ export function getAbsolutePathWrapperAsCallExpression(
                   t.identifier('resolve')
                 ),
                 [
-                  t.callExpression(t.identifier('join'), [
-                    t.identifier('value'),
-                    t.stringLiteral('package.json'),
-                  ]),
+                  t.templateLiteral(
+                    [
+                      t.templateElement({ raw: '' }),
+                      t.templateElement({ raw: '/package.json' }, true),
+                    ],
+                    [t.identifier('value')]
+                  ),
                 ]
               ),
             ]),

code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts

@@ -100,7 +100,7 @@ describe('wrapGetAbsolutePath', () => {
 
       expect(call[1]).toMatchInlineSnapshot(`
         "import { fileURLToPath } from "node:url";
-        import { dirname, join } from "node:path";
+        import { dirname } from "node:path";
         const config = {
           stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
           addons: [
@@ -121,7 +121,7 @@ describe('wrapGetAbsolutePath', () => {
         export default config;
 
         function getAbsolutePath(value) {
-          return dirname(fileURLToPath(import.meta.resolve(join(value, "package.json"))));
+          return dirname(fileURLToPath(import.meta.resolve(\`\${value}/package.json\`)));
         }
         "
       `);

code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.ts

@@ -72,7 +72,7 @@ export const wrapGetAbsolutePath: Fix<WrapGetAbsolutePathRunOptions> = {
         ) {
           throw new CommonJsConfigNotSupportedError();
         } else {
-          mainConfig.setImport(['dirname', 'join'], 'node:path');
+          mainConfig.setImport(['dirname'], 'node:path');
           mainConfig.setImport(['fileURLToPath'], 'node:url');
         }
         mainConfig.setBodyDeclaration(

code/lib/create-storybook/src/generators/baseGenerator.ts

@@ -399,22 +399,22 @@ export async function baseGenerator(
   if (addMainFile) {
     const prefixes = shouldApplyRequireWrapperOnPackageNames
       ? [
-          'import { join, dirname } from "path"',
+          'import { dirname } from "path"',
           'import { fileURLToPath } from "url"',
           language === SupportedLanguage.JAVASCRIPT
             ? dedent`/**
             * 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) {
-              return dirname(fileURLToPath(import.meta.resolve(join(value, 'package.json'))))
+              return dirname(fileURLToPath(import.meta.resolve(\`\${value}/package.json\`)))
             }`
             : dedent`/**
           * 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): any {
-            return dirname(fileURLToPath(import.meta.resolve(join(value, 'package.json'))))
+            return dirname(fileURLToPath(import.meta.resolve(\`\${value}/package.json\`)))
           }`,
         ]
       : [];

docs/_snippets/storybook-main-pnpm-with-module-resolution.md

@@ -1,9 +1,9 @@
 ```js filename=".storybook/main.js" renderer="common" language="js"
-import { dirname, join } from 'node:path';
+import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const getAbsolutePath = (packageName) =>
-  dirname(fileURLToPath(import.meta.resolve(join(packageName, 'package.json'))));
+  dirname(fileURLToPath(import.meta.resolve(`${packageName}/package.json`)));
 
 export default {
   framework: {
@@ -27,7 +27,7 @@ import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const getAbsolutePath = (packageName: string) =>
-  dirname(fileURLToPath(import.meta.resolve(join(packageName, 'package.json'))));
+  dirname(fileURLToPath(import.meta.resolve(`${packageName}/package.json`)));
 
 const config: StorybookConfig = {
   framework: {

test-storybooks/yarn-pnp/.storybook/main.ts

@@ -1,19 +1,25 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-
-const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  "addons": [
-    "@chromatic-com/storybook",
-    "@storybook/addon-docs",
-    "@storybook/addon-a11y",
-    "@storybook/addon-vitest"
-  ],
-  "framework": {
-    "name": "@storybook/react-vite",
-    "options": {}
-  }
-};
-export default config;
+import { fileURLToPath } from "node:url";
+import { dirname } from "node:path";
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-docs"),
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-vitest")
+  ],
+  "framework": {
+    "name": getAbsolutePath("@storybook/react-vite"),
+    "options": {}
+  }
+};
+export default config;
+
+function getAbsolutePath(value: string): any {
+  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}