Core: Add deprecation notice for Vite + CommonJS

MIGRATION.md

@@ -1,5 +1,7 @@
 <h1>Migration</h1>
 
+- [From version 7.3.0 to 7.4.0](#from-version-730-to-740)
+    - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
 - [From version 7.0.0 to 7.2.0](#from-version-700-to-720)
     - [Addon API is more type-strict](#addon-api-is-more-type-strict)
 - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
@@ -302,6 +304,14 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 7.3.0 to 7.4.0
+
+#### CommonJS with Vite is deprecated
+
+Using CommonJS in the `main` configuration with `main.cjs` or `main.cts` is deprecated, and will be removed in Storybook 8.0. This is a necessary change because [Vite will remove support for CommonJS in an upcoming release](https://github.com/vitejs/vite/discussions/13928).
+
+You can address this by converting your `main` configuration file to ESM syntax and renaming it to `main.mjs` or `main.mts` if your project does not have `"type": "module"` in its `package.json`. To convert the config file to ESM you will need to replace any CommonJS syntax like `require()`, `module.exports`, or `__dirname`. If you haven't already, you may also consider adding `"type": "module"` to your package.json and converting your project to ESM.
+
 ## From version 7.0.0 to 7.2.0
 
 #### Addon API is more type-strict
@@ -311,14 +321,15 @@ When registering an addon using `@storybook/manager-api`, the addon API is now m
 The `type` property is now a required field, and the `id` property should not be set anymore.
 
 Here's a correct example:
+
 ```tsx
 import { addons, types } from '@storybook/manager-api';
 
 addons.register('my-addon', () => {
   addons.add('my-addon/panel', {
     type: types.PANEL,
     title: 'My Addon',
-    render: ({ active }) => active ? <div>Hello World</div> : null,
+    render: ({ active }) => (active ? <div>Hello World</div> : null),
   });
 });
 ```
@@ -869,16 +880,16 @@ Given the following `main.js`:
 
 ```js
 export default {
-  stories: ['../**/*.stories.*']
-}
+  stories: ['../**/*.stories.*'],
+};
 ```
 
 If you want to restore the previous behavior to include `node_modules`, you can update it to:
 
 ```js
 export default {
-  stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*']
-}
+  stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*'],
+};
 ```
 
 The first glob would have node_modules automatically excluded by Storybook, and the second glob would include all stories that are under a nested `node_modules` directory.

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

@@ -11,6 +11,7 @@ import {
   loadMainConfig,
   resolveAddonName,
   resolvePathInStorybookCache,
+  serverResolve,
   validateFrameworkName,
 } from '@storybook/core-common';
 import prompts from 'prompts';
@@ -19,6 +20,9 @@ import { global } from '@storybook/global';
 import { telemetry } from '@storybook/telemetry';
 
 import { join, resolve } from 'path';
+import { deprecate } from '@storybook/node-logger';
+import dedent from 'ts-dedent';
+import { readFile } from 'fs-extra';
 import { storybookDevServer } from './dev-server';
 import { outputStats } from './utils/output-stats';
 import { outputStartupInformation } from './utils/output-startup-information';
@@ -102,6 +106,24 @@ export async function buildDevStandalone(
     getManagerBuilder(),
   ]);
 
+  if (builderName.includes('builder-vite')) {
+    const deprecationMessage =
+      dedent(`Using CommonJS in your main configuration file is deprecated with Vite.
+              - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#commonjs-with-vite-is-deprecated`);
+
+    const mainJsPath = serverResolve(resolve(options.configDir || '.storybook', 'main')) as string;
+    if (/\.c[jt]s$/.test(mainJsPath)) {
+      deprecate(deprecationMessage);
+    }
+    const mainJsContent = await readFile(mainJsPath, 'utf-8');
+    // Regex that matches any CommonJS-specific syntax, stolen from Vite: https://github.com/vitejs/vite/blob/91a18c2f7da796ff8217417a4bf189ddda719895/packages/vite/src/node/ssr/ssrExternal.ts#L87
+    const CJS_CONTENT_REGEX =
+      /\bmodule\.exports\b|\bexports[.[]|\brequire\s*\(|\bObject\.(?:defineProperty|defineProperties|assign)\s*\(\s*exports\b/;
+    if (CJS_CONTENT_REGEX.test(mainJsContent)) {
+      deprecate(deprecationMessage);
+    }
+  }
+
   const resolvedRenderer = renderer && resolveAddonName(options.configDir, renderer, options);
 
   // Load second pass: all presets are applied in order