Release: Prerelease 8.0.0-rc.1

CHANGELOG.prerelease.md

@@ -1,3 +1,9 @@
+## 8.0.0-rc.1
+
+- CLI: Fix addon compatibility check error reporting in storybook dev - [#26258](https://github.com/storybookjs/storybook/pull/26258), thanks [@yannbf](https://github.com/yannbf)!
+- Onboarding: Fix manager dist reference - [#26282](https://github.com/storybookjs/storybook/pull/26282), thanks [@shilman](https://github.com/shilman)!
+- ReactVite: Docgen ignore un-parsable files - [#26254](https://github.com/storybookjs/storybook/pull/26254), thanks [@ndelangen](https://github.com/ndelangen)!
+
 ## 8.0.0-rc.0
 
 Bumping 8.0.0-beta.6 to 8.0.0-rc.0. Please refer to the changelogs of previous beta releases.

code/addons/onboarding/preset.js

@@ -1,5 +1,5 @@
 function managerEntries(entry = []) {
-  return [...entry, require.resolve('./dist/manager.mjs')];
+  return [...entry, require.resolve('./dist/manager.js')];
 }
 
 module.exports = {

code/frameworks/react-vite/package.json

@@ -52,7 +52,8 @@
     "@storybook/builder-vite": "workspace:*",
     "@storybook/react": "workspace:*",
     "magic-string": "^0.30.0",
-    "react-docgen": "^7.0.0"
+    "react-docgen": "^7.0.0",
+    "resolve": "^1.22.8"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",

code/frameworks/react-vite/src/plugins/docgen-resolver.ts

@@ -0,0 +1,74 @@
+import { extname } from 'path';
+import resolve from 'resolve';
+
+export class ReactDocgenResolveError extends Error {
+  // the magic string that react-docgen uses to check if a module is ignored
+  readonly code = 'MODULE_NOT_FOUND';
+
+  constructor(filename: string) {
+    super(`'${filename}' was ignored by react-docgen.`);
+  }
+}
+
+/* The below code was copied from:
+ * https://github.com/reactjs/react-docgen/blob/df2daa8b6f0af693ecc3c4dc49f2246f60552bcb/packages/react-docgen/src/importer/makeFsImporter.ts#L14-L63
+ * because it wasn't exported from the react-docgen package.
+ * watch out: when updating this code, also update the code in code/presets/react-webpack/src/loaders/docgen-resolver.ts
+ */
+
+// These extensions are sorted by priority
+// resolve() will check for files in the order these extensions are sorted
+export const RESOLVE_EXTENSIONS = [
+  '.js',
+  '.cts', // These were originally not in the code, I added them
+  '.mts', // These were originally not in the code, I added them
+  '.ctsx', // These were originally not in the code, I added them
+  '.mtsx', // These were originally not in the code, I added them
+  '.ts',
+  '.tsx',
+  '.mjs',
+  '.cjs',
+  '.mts',
+  '.cts',
+  '.jsx',
+];
+
+export function defaultLookupModule(filename: string, basedir: string): string {
+  const resolveOptions = {
+    basedir,
+    extensions: RESOLVE_EXTENSIONS,
+    // we do not need to check core modules as we cannot import them anyway
+    includeCoreModules: false,
+  };
+
+  try {
+    return resolve.sync(filename, resolveOptions);
+  } catch (error) {
+    const ext = extname(filename);
+    let newFilename: string;
+
+    // if we try to import a JavaScript file it might be that we are actually pointing to
+    // a TypeScript file. This can happen in ES modules as TypeScript requires to import other
+    // TypeScript files with .js extensions
+    // https://www.typescriptlang.org/docs/handbook/esm-node.html#type-in-packagejson-and-new-extensions
+    switch (ext) {
+      case '.js':
+      case '.mjs':
+      case '.cjs':
+        newFilename = `${filename.slice(0, -2)}ts`;
+        break;
+
+      case '.jsx':
+        newFilename = `${filename.slice(0, -3)}tsx`;
+        break;
+      default:
+        throw error;
+    }
+
+    return resolve.sync(newFilename, {
+      ...resolveOptions,
+      // we already know that there is an extension at this point, so no need to check other extensions
+      extensions: [],
+    });
+  }
+}

code/frameworks/react-vite/src/plugins/react-docgen.ts

@@ -6,18 +6,22 @@ import {
   parse,
   builtinHandlers as docgenHandlers,
   builtinResolvers as docgenResolver,
-  builtinImporters as docgenImporters,
+  makeFsImporter,
 } from 'react-docgen';
 import MagicString from 'magic-string';
 import type { PluginOption } from 'vite';
 import actualNameHandler from './docgen-handlers/actualNameHandler';
+import {
+  RESOLVE_EXTENSIONS,
+  ReactDocgenResolveError,
+  defaultLookupModule,
+} from './docgen-resolver';
 
 type DocObj = Documentation & { actualName: string };
 
 // TODO: None of these are able to be overridden, so `default` is aspirational here.
 const defaultHandlers = Object.values(docgenHandlers).map((handler) => handler);
 const defaultResolver = new docgenResolver.FindExportedDefinitionsResolver();
-const defaultImporter = docgenImporters.fsImporter;
 const handlers = [...defaultHandlers, actualNameHandler];
 
 type Options = {
@@ -36,14 +40,23 @@ export function reactDocgen({
     name: 'storybook:react-docgen-plugin',
     enforce: 'pre',
     async transform(src: string, id: string) {
-      const relPath = path.relative(cwd, id);
-      if (!filter(relPath)) return;
+      if (!filter(path.relative(cwd, id))) {
+        return;
+      }
 
       try {
         const docgenResults = parse(src, {
           resolver: defaultResolver,
           handlers,
-          importer: defaultImporter,
+          importer: makeFsImporter((filename, basedir) => {
+            const result = defaultLookupModule(filename, basedir);
+
+            if (RESOLVE_EXTENSIONS.find((ext) => result.endsWith(ext))) {
+              return result;
+            }
+
+            throw new ReactDocgenResolveError(filename);
+          }),
           filename: id,
         }) as DocObj[];
         const s = new MagicString(src);

code/lib/cli/src/doctor/getIncompatibleStorybookPackages.ts

@@ -88,7 +88,7 @@ export const getIncompatibleStorybookPackages = async (
   const allDeps = await packageManager.getAllDependencies();
   const storybookLikeDeps = Object.keys(allDeps).filter((dep) => dep.includes('storybook'));
 
-  if (storybookLikeDeps.length === 0) {
+  if (storybookLikeDeps.length === 0 && !context.skipErrors) {
     throw new Error('No Storybook dependencies found in the package.json');
   }
 

code/package.json

@@ -294,5 +294,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.0.0-rc.1"
 }

code/presets/react-webpack/package.json

@@ -74,6 +74,7 @@
     "fs-extra": "^11.1.0",
     "magic-string": "^0.30.5",
     "react-docgen": "^7.0.0",
+    "resolve": "^1.22.8",
     "semver": "^7.3.7",
     "webpack": "5"
   },

code/presets/react-webpack/src/loaders/docgen-resolver.ts

@@ -0,0 +1,74 @@
+import { extname } from 'path';
+import resolve from 'resolve';
+
+export class ReactDocgenResolveError extends Error {
+  // the magic string that react-docgen uses to check if a module is ignored
+  readonly code = 'MODULE_NOT_FOUND';
+
+  constructor(filename: string) {
+    super(`'${filename}' was ignored by react-docgen.`);
+  }
+}
+
+/* The below code was copied from:
+ * https://github.com/reactjs/react-docgen/blob/df2daa8b6f0af693ecc3c4dc49f2246f60552bcb/packages/react-docgen/src/importer/makeFsImporter.ts#L14-L63
+ * because it wasn't exported from the react-docgen package.
+ * watch out: when updating this code, also update the code in code/frameworks/react-vite/src/plugins/docgen-resolver.ts
+ */
+
+// These extensions are sorted by priority
+// resolve() will check for files in the order these extensions are sorted
+export const RESOLVE_EXTENSIONS = [
+  '.js',
+  '.cts', // These were originally not in the code, I added them
+  '.mts', // These were originally not in the code, I added them
+  '.ctsx', // These were originally not in the code, I added them
+  '.mtsx', // These were originally not in the code, I added them
+  '.ts',
+  '.tsx',
+  '.mjs',
+  '.cjs',
+  '.mts',
+  '.cts',
+  '.jsx',
+];
+
+export function defaultLookupModule(filename: string, basedir: string): string {
+  const resolveOptions = {
+    basedir,
+    extensions: RESOLVE_EXTENSIONS,
+    // we do not need to check core modules as we cannot import them anyway
+    includeCoreModules: false,
+  };
+
+  try {
+    return resolve.sync(filename, resolveOptions);
+  } catch (error) {
+    const ext = extname(filename);
+    let newFilename: string;
+
+    // if we try to import a JavaScript file it might be that we are actually pointing to
+    // a TypeScript file. This can happen in ES modules as TypeScript requires to import other
+    // TypeScript files with .js extensions
+    // https://www.typescriptlang.org/docs/handbook/esm-node.html#type-in-packagejson-and-new-extensions
+    switch (ext) {
+      case '.js':
+      case '.mjs':
+      case '.cjs':
+        newFilename = `${filename.slice(0, -2)}ts`;
+        break;
+
+      case '.jsx':
+        newFilename = `${filename.slice(0, -3)}tsx`;
+        break;
+      default:
+        throw error;
+    }
+
+    return resolve.sync(newFilename, {
+      ...resolveOptions,
+      // we already know that there is an extension at this point, so no need to check other extensions
+      extensions: [],
+    });
+  }
+}

code/presets/react-webpack/src/loaders/react-docgen-loader.ts

@@ -2,7 +2,7 @@ import {
   parse,
   builtinResolvers as docgenResolver,
   builtinHandlers as docgenHandlers,
-  builtinImporters as docgenImporters,
+  makeFsImporter,
   ERROR_CODES,
   utils,
 } from 'react-docgen';
@@ -11,6 +11,12 @@ import type { LoaderContext } from 'webpack';
 import type { Handler, NodePath, babelTypes as t, Documentation } from 'react-docgen';
 import { logger } from '@storybook/node-logger';
 
+import {
+  RESOLVE_EXTENSIONS,
+  ReactDocgenResolveError,
+  defaultLookupModule,
+} from './docgen-resolver';
+
 const { getNameOrValue, isReactForwardRefCall } = utils;
 
 const actualNameHandler: Handler = function actualNameHandler(documentation, componentDefinition) {
@@ -54,7 +60,6 @@ type DocObj = Documentation & { actualName: string };
 
 const defaultHandlers = Object.values(docgenHandlers).map((handler) => handler);
 const defaultResolver = new docgenResolver.FindExportedDefinitionsResolver();
-const defaultImporter = docgenImporters.fsImporter;
 const handlers = [...defaultHandlers, actualNameHandler];
 
 export default async function reactDocgenLoader(
@@ -71,7 +76,15 @@ export default async function reactDocgenLoader(
       filename: this.resourcePath,
       resolver: defaultResolver,
       handlers,
-      importer: defaultImporter,
+      importer: makeFsImporter((filename, basedir) => {
+        const result = defaultLookupModule(filename, basedir);
+
+        if (RESOLVE_EXTENSIONS.find((ext) => result.endsWith(ext))) {
+          return result;
+        }
+
+        throw new ReactDocgenResolveError(filename);
+      }),
       babelOptions: {
         babelrc: false,
         configFile: false,

code/renderers/react/template/stories/docgen-components/imported.module.css

@@ -0,0 +1,3 @@
+.foo {
+  color: red;
+}