Merge pull request #20802 from storybookjs/feat/warn-regarding-defaul…

…t-exports-in-main

CLI: add warning when main config does not use default exports

code/lib/core-common/package.json

@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.20.2",
+    "@storybook/csf-tools": "7.0.0-beta.38",
     "@storybook/node-logger": "7.0.0-beta.38",
     "@storybook/types": "7.0.0-beta.38",
     "@types/babel__core": "^7.1.20",
@@ -57,7 +58,7 @@
     "file-system-cache": "^2.0.0",
     "find-up": "^5.0.0",
     "fs-extra": "^11.1.0",
-    "glob": "^7.1.6",
+    "glob-promise": "^4.2.0",
     "handlebars": "^4.7.7",
     "lazy-universal-dotenv": "^4.0.0",
     "picomatch": "^2.3.0",

code/lib/core-common/src/utils/load-main-config.ts

@@ -3,8 +3,12 @@ import type { StorybookConfig } from '@storybook/types';
 import { serverRequire } from './interpret-require';
 import { validateConfigurationFiles } from './validate-configuration-files';
 
-export function loadMainConfig({ configDir }: { configDir: string }): StorybookConfig {
-  validateConfigurationFiles(configDir);
+export async function loadMainConfig({
+  configDir,
+}: {
+  configDir: string;
+}): Promise<StorybookConfig> {
+  await validateConfigurationFiles(configDir);
 
   return serverRequire(path.resolve(configDir, 'main'));
 }

code/lib/core-common/src/utils/validate-configuration-files.ts

@@ -1,20 +1,36 @@
 import { dedent } from 'ts-dedent';
-import glob from 'glob';
+import { promise as glob } from 'glob-promise';
 import path from 'path';
+import { readConfig } from '@storybook/csf-tools';
+import { once } from '@storybook/node-logger';
 
 import { boost } from './interpret-files';
 
-export function validateConfigurationFiles(configDir: string) {
+export async function validateConfigurationFiles(configDir: string) {
   const extensionsPattern = `{${Array.from(boost).join(',')}}`;
-  const exists = (file: string) =>
-    !!glob.sync(path.resolve(configDir, `${file}${extensionsPattern}`)).length;
+  const mainConfigMatches = await glob(path.resolve(configDir, `main${extensionsPattern}`));
 
-  const main = exists('main');
+  const [mainConfigPath] = mainConfigMatches;
 
-  if (!main) {
+  if (mainConfigMatches.length > 1) {
+    once.warn(dedent`
+      Multiple main files found in your configDir (${path.resolve(configDir)}).
+      Storybook will use the first one found and ignore the others. Please remove the extra files.
+    `);
+  }
+
+  if (!mainConfigPath) {
     throw new Error(dedent`
       No configuration files have been found in your configDir (${path.resolve(configDir)}).
-      Storybook needs either a "main" or "config" file.
+      Storybook needs "main.js" file, please add it.
     `);
+  } else {
+    const main = await readConfig(mainConfigPath);
+    if (!main.hasDefaultExport) {
+      once.warn(dedent`
+        Your main.js is not using a default export, which is the recommended format. Please update it.
+        For more info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#esm-format-in-mainjs
+      `);
+    }
   }
 }

code/lib/core-server/src/build-dev.ts

@@ -67,7 +67,7 @@ export async function buildDevStandalone(
   options.serverChannelUrl = getServerChannelUrl(port, options);
   /* eslint-enable no-param-reassign */
 
-  const { framework } = loadMainConfig(options);
+  const { framework } = await loadMainConfig(options);
   const corePresets = [];
 
   const frameworkName = typeof framework === 'string' ? framework : framework?.name;

code/lib/core-server/src/build-static.ts

@@ -63,7 +63,7 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
   await emptyDir(options.outputDir);
   await ensureDir(options.outputDir);
 
-  const { framework } = loadMainConfig(options);
+  const { framework } = await loadMainConfig(options);
   const corePresets = [];
 
   const frameworkName = typeof framework === 'string' ? framework : framework?.name;

code/lib/csf-tools/src/ConfigFile.ts

@@ -119,6 +119,8 @@ export class ConfigFile {
 
   fileName?: string;
 
+  hasDefaultExport = false;
+
   constructor(ast: t.File, code: string, fileName?: string) {
     this._ast = ast;
     this._code = code;
@@ -131,6 +133,7 @@ export class ConfigFile {
     traverse.default(this._ast, {
       ExportDefaultDeclaration: {
         enter({ node, parent }) {
+          self.hasDefaultExport = true;
           const decl =
             t.isIdentifier(node.declaration) && t.isProgram(parent)
               ? _findVarInitialization(node.declaration.name, parent)

code/lib/telemetry/src/storybook-metadata.ts

@@ -189,7 +189,7 @@ export const getStorybookMetadata = async (_configDir?: string) => {
         '--config-dir'
       ) as string)) ??
     '.storybook';
-  const mainConfig = loadMainConfig({ configDir });
+  const mainConfig = await loadMainConfig({ configDir });
   cachedMetadata = await computeStorybookMetadata({ mainConfig, packageJson });
   return cachedMetadata;
 };

code/yarn.lock

@@ -6062,6 +6062,7 @@ __metadata:
   resolution: "@storybook/core-common@workspace:lib/core-common"
   dependencies:
     "@babel/core": ^7.20.2
+    "@storybook/csf-tools": 7.0.0-beta.38
     "@storybook/node-logger": 7.0.0-beta.38
     "@storybook/types": 7.0.0-beta.38
     "@types/babel__core": ^7.1.20
@@ -6077,7 +6078,7 @@ __metadata:
     file-system-cache: ^2.0.0
     find-up: ^5.0.0
     fs-extra: ^11.1.0
-    glob: ^7.1.6
+    glob-promise: ^4.2.0
     handlebars: ^4.7.7
     lazy-universal-dotenv: ^4.0.0
     mock-fs: ^5.2.0