@storybook/builder-webpack5 6.5.9 → 7.0.0-alpha.2

package/dist/cjs/index.js

@@ -3,6 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  executor: true,
+  getConfig: true,
+  bail: true,
+  start: true,
+  build: true,
+  corePresets: true,
+  overridePresets: true
+};
 exports.start = exports.overridePresets = exports.getConfig = exports.executor = exports.corePresets = exports.build = exports.bail = void 0;
 
 require("core-js/modules/es.promise.js");
@@ -17,6 +26,22 @@ var _nodeLogger = require("@storybook/node-logger");
 
 var _coreCommon = require("@storybook/core-common");
 
+var _coreWebpack = require("@storybook/core-webpack");
+
+var _types = require("./types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -37,7 +62,7 @@ var executor = {
 
     var version = (await options.presets.apply('webpackVersion')) || '5';
     var webpackInstance = ((_await$options$preset = await options.presets.apply('webpackInstance')) === null || _await$options$preset === void 0 ? void 0 : _await$options$preset.default) || _webpack.default;
-    (0, _coreCommon.checkWebpackVersion)({
+    (0, _coreWebpack.checkWebpackVersion)({
       version: version
     }, '5', 'builder-webpack5');
     return webpackInstance;
@@ -51,11 +76,11 @@ var getConfig = async function (options) {
   var babelOptions = await presets.apply('babel', {}, _objectSpread(_objectSpread({}, options), {}, {
     typescriptOptions: typescriptOptions
   }));
-  var frameworkOptions = await presets.apply(`${options.framework}Options`, {}, options);
+  var framework = await presets.apply('framework', {}, options);
   return presets.apply('webpack', {}, _objectSpread(_objectSpread({}, options), {}, {
     babelOptions: babelOptions,
     typescriptOptions: typescriptOptions,
-    [`${options.framework}Options`]: frameworkOptions
+    frameworkOptions: typeof framework === 'string' ? {} : framework === null || framework === void 0 ? void 0 : framework.options
   }));
 };
 
@@ -197,8 +222,30 @@ var builder = async function* builderGeneratorFn({
 
   var config = await getConfig(options);
   yield;
+  var compiler = webpackInstance(config);
+
+  if (!compiler) {
+    var err = `${config.name}: missing webpack compiler at runtime!`;
+
+    _nodeLogger.logger.error(err);
+
+    return {
+      hasErrors: function () {
+        return true;
+      },
+      hasWarnings: function () {
+        return false;
+      },
+      toJson: function () {
+        return {
+          warnings: [],
+          errors: [err]
+        };
+      }
+    };
+  }
+
   return new Promise(function (succeed, fail) {
-    var compiler = webpackInstance(config);
     compiler.run(function (error, stats) {
       if (error || !stats || stats.hasErrors()) {
         _nodeLogger.logger.error('=> Failed to build the preview');

package/dist/cjs/presets/custom-webpack-preset.js

@@ -12,12 +12,12 @@ var webpackReal = _interopRequireWildcard(require("webpack"));
 
 var _nodeLogger = require("@storybook/node-logger");
 
-var _coreCommon = require("@storybook/core-common");
-
 var _utilDeprecate = _interopRequireDefault(require("util-deprecate"));
 
 var _tsDedent = _interopRequireDefault(require("ts-dedent"));
 
+var _coreWebpack = require("@storybook/core-webpack");
+
 var _baseWebpack = require("../preview/base-webpack.config");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -43,13 +43,13 @@ async function webpack(config, options) {
 
   if (webpackConfig) {
     return (0, _utilDeprecate.default)(webpackConfig, (0, _tsDedent.default)`
-        You've provided a webpack config directly in CallOptions, this is not recommended. Please use presets instead. This feature will be removed in 7.0
+      You've provided a webpack config directly in CallOptions, this is not recommended. Please use presets instead. This feature will be removed in 7.0
       `)(finalDefaultConfig);
   } // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
 
 
-  var customConfig = (0, _coreCommon.loadCustomWebpackConfig)(configDir);
+  var customConfig = (0, _coreWebpack.loadCustomWebpackConfig)(configDir);
 
   if (typeof customConfig === 'function') {
     _nodeLogger.logger.info('=> Loading custom Webpack config (full-control mode).');

package/dist/cjs/preview/babel-loader-preview.js

@@ -3,24 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useBaseTsSupport = exports.createBabelLoader = void 0;
+exports.createBabelLoader = void 0;
 
 var _coreCommon = require("@storybook/core-common");
 
-/**
- * Returns true if the framework can use the base TS config.
- * @param {string} framework
- */
-var useBaseTsSupport = function (framework) {
-  // These packages both have their own TS implementation.
-  return !['vue', 'angular'].includes(framework);
-};
-
-exports.useBaseTsSupport = useBaseTsSupport;
-
-var createBabelLoader = function (options, framework) {
+var createBabelLoader = function (options, typescriptOptions) {
   return {
-    test: useBaseTsSupport(framework) ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
+    test: typescriptOptions.skipBabel ? /\.(mjs|jsx?)$/ : /\.(mjs|tsx?|jsx?)$/,
     use: [{
       loader: require.resolve('babel-loader'),
       options: options

package/dist/cjs/preview/base-webpack.config.js

@@ -16,7 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 async function createDefaultWebpackConfig(storybookBaseConfig, options) {
-  var _storybookBaseConfig$;
+  var _coreOptions$builder, _storybookBaseConfig$;
 
   if (options.presetsList.some(function (preset) {
     return /@storybook(\/|\\)preset-create-react-app/.test(typeof preset === 'string' ? preset : preset.name);
@@ -50,13 +50,13 @@ async function createDefaultWebpackConfig(storybookBaseConfig, options) {
 
   var isProd = storybookBaseConfig.mode !== 'development';
   var coreOptions = await options.presets.apply('core');
-  var builderOptions = coreOptions.builder.options;
-  var cacheConfig = builderOptions !== null && builderOptions !== void 0 && builderOptions.fsCache ? {
+  var builderOptions = ((_coreOptions$builder = coreOptions.builder) === null || _coreOptions$builder === void 0 ? void 0 : _coreOptions$builder.options) || {};
+  var cacheConfig = builderOptions.fsCache ? {
     cache: {
       type: 'filesystem'
     }
   } : {};
-  var lazyCompilationConfig = builderOptions !== null && builderOptions !== void 0 && builderOptions.lazyCompilation && !isProd ? {
+  var lazyCompilationConfig = builderOptions.lazyCompilation && !isProd ? {
     lazyCompilation: {
       entries: false
     }

package/dist/cjs/preview/iframe-webpack.config.js

@@ -9,6 +9,8 @@ require("core-js/modules/es.promise.js");
 
 var _path = _interopRequireDefault(require("path"));
 
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
 var _webpack = require("webpack");
 
 var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
@@ -21,14 +23,10 @@ var _webpackVirtualModules = _interopRequireDefault(require("webpack-virtual-mod
 
 var _forkTsCheckerWebpackPlugin = _interopRequireDefault(require("fork-ts-checker-webpack-plugin"));
 
-var _paths = _interopRequireDefault(require("@storybook/theming/paths"));
-
 var _coreCommon = require("@storybook/core-common");
 
 var _babelLoaderPreview = require("./babel-loader-preview");
 
-var _useBaseTsSupport = require("./useBaseTsSupport");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -37,36 +35,50 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var storybookPaths = ['addons', 'api', 'channels', 'channel-postmessage', 'components', 'core-events', 'router', 'theming', 'semver', 'client-api', 'client-logger'].reduce(function (acc, sbPackage) {
+var storybookPaths = _objectSpread({
+  global: _path.default.dirname(require.resolve(`global/package.json`))
+}, ['addons', 'api', 'store', 'channels', 'channel-postmessage', 'channel-websocket', 'components', 'core-events', 'router', 'theming', 'semver', 'preview-web', 'client-api', 'client-logger'].reduce(function (acc, sbPackage) {
   return _objectSpread(_objectSpread({}, acc), {}, {
     [`@storybook/${sbPackage}`]: _path.default.dirname(require.resolve(`@storybook/${sbPackage}/package.json`))
   });
-}, {});
+}, {}));
 
 var _default = async function _default(options) {
-  var babelOptions = options.babelOptions,
-      _options$outputDir = options.outputDir,
+  var _options$outputDir = options.outputDir,
       outputDir = _options$outputDir === void 0 ? _path.default.join('.', 'public') : _options$outputDir,
       quiet = options.quiet,
       packageJson = options.packageJson,
       configType = options.configType,
-      framework = options.framework,
-      frameworkPath = options.frameworkPath,
       presets = options.presets,
       previewUrl = options.previewUrl,
+      babelOptions = options.babelOptions,
       typescriptOptions = options.typescriptOptions,
-      modern = options.modern,
       features = options.features,
       serverChannelUrl = options.serverChannelUrl;
+  var framework = await presets.apply('framework', undefined);
+
+  if (!framework) {
+    throw new Error((0, _tsDedent.default)`
+      You must to specify a framework in '.storybook/main.js' config.
+
+      https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory
+    `);
+  }
+
+  var _ref = typeof framework === 'string' ? {
+    name: framework,
+    options: {}
+  } : framework,
+      frameworkName = _ref.name,
+      frameworkOptions = _ref.options;
+
+  var isProd = configType === 'PRODUCTION';
   var envs = await presets.apply('env');
   var logLevel = await presets.apply('logLevel', undefined);
-  var frameworkOptions = await presets.apply(`${framework}Options`, {});
   var headHtmlSnippet = await presets.apply('previewHead');
   var bodyHtmlSnippet = await presets.apply('previewBody');
   var template = await presets.apply('previewMainTemplate');
   var coreOptions = await presets.apply('core');
-  var babelLoader = (0, _babelLoaderPreview.createBabelLoader)(babelOptions, framework);
-  var isProd = configType === 'PRODUCTION';
   var configs = [...(await presets.apply('config', [], options)), (0, _coreCommon.loadPreviewOrConfigFile)(options)].filter(Boolean);
   var entries = await presets.apply('entries', [], options);
   var workingDir = process.cwd();
@@ -94,8 +106,7 @@ var _default = async function _default(options) {
   } else {
     var frameworkInitEntry = _path.default.resolve(_path.default.join(workingDir, 'storybook-init-framework-entry.js'));
 
-    var frameworkImportPath = frameworkPath || `@storybook/${framework}`;
-    virtualModuleMapping[frameworkInitEntry] = `import '${frameworkImportPath}';`;
+    virtualModuleMapping[frameworkInitEntry] = `import '${frameworkName}';`;
     entries.push(frameworkInitEntry);
     var entryTemplate = await (0, _coreCommon.readTemplate)(_path.default.join(__dirname, 'virtualModuleEntry.template.js'));
     configs.forEach(function (configFilename) {
@@ -119,14 +130,14 @@ var _default = async function _default(options) {
       var _storiesFilename = _path.default.resolve(_path.default.join(workingDir, `generated-stories-entry.cjs`));
 
       virtualModuleMapping[_storiesFilename] = (0, _coreCommon.interpolate)(storyTemplate, {
-        frameworkImportPath: frameworkImportPath
+        frameworkName: frameworkName
       }) // Make sure we also replace quotes for this one
       .replace("'{{stories}}'", stories.map(_coreCommon.toRequireContextString).join(','));
       entries.push(_storiesFilename);
     }
   }
 
-  var shouldCheckTs = (0, _useBaseTsSupport.useBaseTsSupport)(framework) && typescriptOptions.check;
+  var shouldCheckTs = typescriptOptions.check && !typescriptOptions.skipBabel;
   var tsCheckOptions = typescriptOptions.checkOptions || {};
   return {
     name: 'preview',
@@ -189,7 +200,7 @@ var _default = async function _default(options) {
       process: require.resolve('process/browser.js')
     }), isProd ? null : new _webpack.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin.default(), quiet ? null : new _webpack.ProgressPlugin({}), shouldCheckTs ? new _forkTsCheckerWebpackPlugin.default(tsCheckOptions) : null].filter(Boolean),
     module: {
-      rules: [babelLoader, (0, _coreCommon.es6Transpiler)(), {
+      rules: [(0, _babelLoaderPreview.createBabelLoader)(babelOptions, typescriptOptions), {
         test: /\.md$/,
         type: 'asset/source'
       }]
@@ -197,14 +208,12 @@ var _default = async function _default(options) {
     resolve: {
       extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'],
       modules: ['node_modules'].concat(envs.NODE_PATH || []),
-      mainFields: [modern ? 'sbmodern' : null, 'browser', 'module', 'main'].filter(Boolean),
-      alias: _objectSpread(_objectSpread(_objectSpread({}, features !== null && features !== void 0 && features.emotionAlias ? _paths.default : {}), storybookPaths), {}, {
-        react: _path.default.dirname(require.resolve('react/package.json')),
-        'react-dom': _path.default.dirname(require.resolve('react-dom/package.json'))
-      }),
+      mainFields: ['browser', 'module', 'main'].filter(Boolean),
+      alias: storybookPaths,
       fallback: {
         path: require.resolve('path-browserify'),
-        assert: require.resolve('browser-assert')
+        assert: require.resolve('browser-assert'),
+        util: require.resolve('util')
       }
     },
     optimization: {
@@ -221,9 +230,7 @@ var _default = async function _default(options) {
           sourceMap: true,
           mangle: false,
           keep_fnames: true
-        } // It looks like the types from `@types/terser-webpack-plugin` are not matching the latest version of
-        // Webpack yet
-
+        }
       })] : []
     },
     performance: {

package/dist/cjs/preview/virtualModuleStory.template.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _frameworkImportPath = require("{{frameworkImportPath}}");
+var _frameworkName = require("{{frameworkName}}");
 
 /* eslint-disable import/no-unresolved */
-(0, _frameworkImportPath.configure)(['{{stories}}'], module, false);
+(0, _frameworkName.configure)(['{{stories}}'], module, false);

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/esm/index.js

@@ -9,7 +9,9 @@ import webpack, { ProgressPlugin } from 'webpack';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 import { logger } from '@storybook/node-logger';
-import { useProgressReporting, checkWebpackVersion } from '@storybook/core-common';
+import { useProgressReporting } from '@storybook/core-common';
+import { checkWebpackVersion } from '@storybook/core-webpack';
+export * from './types';
 var compilation;
 var reject;
 export var executor = {
@@ -30,11 +32,11 @@ export var getConfig = async function (options) {
   var babelOptions = await presets.apply('babel', {}, _objectSpread(_objectSpread({}, options), {}, {
     typescriptOptions: typescriptOptions
   }));
-  var frameworkOptions = await presets.apply(`${options.framework}Options`, {}, options);
+  var framework = await presets.apply('framework', {}, options);
   return presets.apply('webpack', {}, _objectSpread(_objectSpread({}, options), {}, {
     babelOptions: babelOptions,
     typescriptOptions: typescriptOptions,
-    [`${options.framework}Options`]: frameworkOptions
+    frameworkOptions: typeof framework === 'string' ? {} : framework === null || framework === void 0 ? void 0 : framework.options
   }));
 };
 var asyncIterator;
@@ -164,8 +166,28 @@ var builder = async function* builderGeneratorFn({
   logger.info('=> Compiling preview..');
   var config = await getConfig(options);
   yield;
+  var compiler = webpackInstance(config);
+
+  if (!compiler) {
+    var err = `${config.name}: missing webpack compiler at runtime!`;
+    logger.error(err);
+    return {
+      hasErrors: function () {
+        return true;
+      },
+      hasWarnings: function () {
+        return false;
+      },
+      toJson: function () {
+        return {
+          warnings: [],
+          errors: [err]
+        };
+      }
+    };
+  }
+
   return new Promise(function (succeed, fail) {
-    var compiler = webpackInstance(config);
     compiler.run(function (error, stats) {
       if (error || !stats || stats.hasErrors()) {
         logger.error('=> Failed to build the preview');

package/dist/esm/presets/custom-webpack-preset.js

@@ -1,9 +1,9 @@
 import "core-js/modules/es.promise.js";
 import * as webpackReal from 'webpack';
 import { logger } from '@storybook/node-logger';
-import { loadCustomWebpackConfig } from '@storybook/core-common';
 import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';
+import { loadCustomWebpackConfig } from '@storybook/core-webpack';
 import { createDefaultWebpackConfig } from '../preview/base-webpack.config';
 export async function webpack(config, options) {
   // @ts-ignore
@@ -22,7 +22,7 @@ export async function webpack(config, options) {
 
   if (webpackConfig) {
     return deprecate(webpackConfig, dedent`
-        You've provided a webpack config directly in CallOptions, this is not recommended. Please use presets instead. This feature will be removed in 7.0
+      You've provided a webpack config directly in CallOptions, this is not recommended. Please use presets instead. This feature will be removed in 7.0
       `)(finalDefaultConfig);
   } // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.

package/dist/esm/preview/babel-loader-preview.js

@@ -1,16 +1,7 @@
 import { getProjectRoot } from '@storybook/core-common';
-/**
- * Returns true if the framework can use the base TS config.
- * @param {string} framework
- */
-
-export var useBaseTsSupport = function (framework) {
-  // These packages both have their own TS implementation.
-  return !['vue', 'angular'].includes(framework);
-};
-export var createBabelLoader = function (options, framework) {
+export var createBabelLoader = function (options, typescriptOptions) {
   return {
-    test: useBaseTsSupport(framework) ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
+    test: typescriptOptions.skipBabel ? /\.(mjs|jsx?)$/ : /\.(mjs|tsx?|jsx?)$/,
     use: [{
       loader: require.resolve('babel-loader'),
       options: options

package/dist/esm/preview/base-webpack.config.js

@@ -7,7 +7,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import "core-js/modules/es.promise.js";
 import { logger } from '@storybook/node-logger';
 export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
-  var _storybookBaseConfig$;
+  var _coreOptions$builder, _storybookBaseConfig$;
 
   if (options.presetsList.some(function (preset) {
     return /@storybook(\/|\\)preset-create-react-app/.test(typeof preset === 'string' ? preset : preset.name);
@@ -40,13 +40,13 @@ export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
 
   var isProd = storybookBaseConfig.mode !== 'development';
   var coreOptions = await options.presets.apply('core');
-  var builderOptions = coreOptions.builder.options;
-  var cacheConfig = builderOptions !== null && builderOptions !== void 0 && builderOptions.fsCache ? {
+  var builderOptions = ((_coreOptions$builder = coreOptions.builder) === null || _coreOptions$builder === void 0 ? void 0 : _coreOptions$builder.options) || {};
+  var cacheConfig = builderOptions.fsCache ? {
     cache: {
       type: 'filesystem'
     }
   } : {};
-  var lazyCompilationConfig = builderOptions !== null && builderOptions !== void 0 && builderOptions.lazyCompilation && !isProd ? {
+  var lazyCompilationConfig = builderOptions.lazyCompilation && !isProd ? {
     lazyCompilation: {
       entries: false
     }

package/dist/esm/preview/iframe-webpack.config.js

@@ -7,45 +7,61 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import path from 'path';
+import dedent from 'ts-dedent';
 import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin, ProvidePlugin } from 'webpack';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin'; // @ts-ignore // -- this has typings for webpack4 in it, won't work
+
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import TerserWebpackPlugin from 'terser-webpack-plugin';
 import VirtualModulePlugin from 'webpack-virtual-modules';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
-import themingPaths from '@storybook/theming/paths';
-import { toRequireContextString, es6Transpiler, stringifyProcessEnvs, handlebars, interpolate, toImportFn, normalizeStories, readTemplate, loadPreviewOrConfigFile } from '@storybook/core-common';
+import { toRequireContextString, stringifyProcessEnvs, handlebars, interpolate, toImportFn, normalizeStories, readTemplate, loadPreviewOrConfigFile } from '@storybook/core-common';
 import { createBabelLoader } from './babel-loader-preview';
-import { useBaseTsSupport } from './useBaseTsSupport';
-var storybookPaths = ['addons', 'api', 'channels', 'channel-postmessage', 'components', 'core-events', 'router', 'theming', 'semver', 'client-api', 'client-logger'].reduce(function (acc, sbPackage) {
+
+var storybookPaths = _objectSpread({
+  global: path.dirname(require.resolve(`global/package.json`))
+}, ['addons', 'api', 'store', 'channels', 'channel-postmessage', 'channel-websocket', 'components', 'core-events', 'router', 'theming', 'semver', 'preview-web', 'client-api', 'client-logger'].reduce(function (acc, sbPackage) {
   return _objectSpread(_objectSpread({}, acc), {}, {
     [`@storybook/${sbPackage}`]: path.dirname(require.resolve(`@storybook/${sbPackage}/package.json`))
   });
-}, {});
+}, {}));
+
 export default (async function (options) {
-  var babelOptions = options.babelOptions,
-      _options$outputDir = options.outputDir,
+  var _options$outputDir = options.outputDir,
       outputDir = _options$outputDir === void 0 ? path.join('.', 'public') : _options$outputDir,
       quiet = options.quiet,
       packageJson = options.packageJson,
       configType = options.configType,
-      framework = options.framework,
-      frameworkPath = options.frameworkPath,
       presets = options.presets,
       previewUrl = options.previewUrl,
+      babelOptions = options.babelOptions,
       typescriptOptions = options.typescriptOptions,
-      modern = options.modern,
       features = options.features,
       serverChannelUrl = options.serverChannelUrl;
+  var framework = await presets.apply('framework', undefined);
+
+  if (!framework) {
+    throw new Error(dedent`
+      You must to specify a framework in '.storybook/main.js' config.
+
+      https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory
+    `);
+  }
+
+  var _ref = typeof framework === 'string' ? {
+    name: framework,
+    options: {}
+  } : framework,
+      frameworkName = _ref.name,
+      frameworkOptions = _ref.options;
+
+  var isProd = configType === 'PRODUCTION';
   var envs = await presets.apply('env');
   var logLevel = await presets.apply('logLevel', undefined);
-  var frameworkOptions = await presets.apply(`${framework}Options`, {});
   var headHtmlSnippet = await presets.apply('previewHead');
   var bodyHtmlSnippet = await presets.apply('previewBody');
   var template = await presets.apply('previewMainTemplate');
   var coreOptions = await presets.apply('core');
-  var babelLoader = createBabelLoader(babelOptions, framework);
-  var isProd = configType === 'PRODUCTION';
   var configs = [...(await presets.apply('config', [], options)), loadPreviewOrConfigFile(options)].filter(Boolean);
   var entries = await presets.apply('entries', [], options);
   var workingDir = process.cwd();
@@ -68,8 +84,7 @@ export default (async function (options) {
     entries.push(configEntryPath);
   } else {
     var frameworkInitEntry = path.resolve(path.join(workingDir, 'storybook-init-framework-entry.js'));
-    var frameworkImportPath = frameworkPath || `@storybook/${framework}`;
-    virtualModuleMapping[frameworkInitEntry] = `import '${frameworkImportPath}';`;
+    virtualModuleMapping[frameworkInitEntry] = `import '${frameworkName}';`;
     entries.push(frameworkInitEntry);
     var entryTemplate = await readTemplate(path.join(__dirname, 'virtualModuleEntry.template.js'));
     configs.forEach(function (configFilename) {
@@ -93,14 +108,14 @@ export default (async function (options) {
       var _storiesFilename = path.resolve(path.join(workingDir, `generated-stories-entry.cjs`));
 
       virtualModuleMapping[_storiesFilename] = interpolate(storyTemplate, {
-        frameworkImportPath: frameworkImportPath
+        frameworkName: frameworkName
       }) // Make sure we also replace quotes for this one
       .replace("'{{stories}}'", stories.map(toRequireContextString).join(','));
       entries.push(_storiesFilename);
     }
   }
 
-  var shouldCheckTs = useBaseTsSupport(framework) && typescriptOptions.check;
+  var shouldCheckTs = typescriptOptions.check && !typescriptOptions.skipBabel;
   var tsCheckOptions = typescriptOptions.checkOptions || {};
   return {
     name: 'preview',
@@ -163,7 +178,7 @@ export default (async function (options) {
       process: require.resolve('process/browser.js')
     }), isProd ? null : new HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), quiet ? null : new ProgressPlugin({}), shouldCheckTs ? new ForkTsCheckerWebpackPlugin(tsCheckOptions) : null].filter(Boolean),
     module: {
-      rules: [babelLoader, es6Transpiler(), {
+      rules: [createBabelLoader(babelOptions, typescriptOptions), {
         test: /\.md$/,
         type: 'asset/source'
       }]
@@ -171,14 +186,12 @@ export default (async function (options) {
     resolve: {
       extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'],
       modules: ['node_modules'].concat(envs.NODE_PATH || []),
-      mainFields: [modern ? 'sbmodern' : null, 'browser', 'module', 'main'].filter(Boolean),
-      alias: _objectSpread(_objectSpread(_objectSpread({}, features !== null && features !== void 0 && features.emotionAlias ? themingPaths : {}), storybookPaths), {}, {
-        react: path.dirname(require.resolve('react/package.json')),
-        'react-dom': path.dirname(require.resolve('react-dom/package.json'))
-      }),
+      mainFields: ['browser', 'module', 'main'].filter(Boolean),
+      alias: storybookPaths,
       fallback: {
         path: require.resolve('path-browserify'),
-        assert: require.resolve('browser-assert')
+        assert: require.resolve('browser-assert'),
+        util: require.resolve('util')
       }
     },
     optimization: {
@@ -195,9 +208,7 @@ export default (async function (options) {
           sourceMap: true,
           mangle: false,
           keep_fnames: true
-        } // It looks like the types from `@types/terser-webpack-plugin` are not matching the latest version of
-        // Webpack yet
-
+        }
       })] : []
     },
     performance: {

package/dist/esm/preview/virtualModuleStory.template.js

@@ -1,3 +1,3 @@
 /* eslint-disable import/no-unresolved */
-import { configure } from '{{frameworkImportPath}}';
+import { configure } from '{{frameworkName}}';
 configure(['{{stories}}'], module, false);

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/{ts3.9 → types}/index.d.ts

@@ -1,5 +1,6 @@
 import webpack, { Stats, Configuration } from 'webpack';
 import type { Builder, Options } from '@storybook/core-common';
+export * from './types';
 declare type WebpackBuilder = Builder<Configuration, Stats>;
 declare type BuilderStartOptions = Partial<Parameters<WebpackBuilder['start']>['0']>;
 export declare const executor: {
@@ -7,8 +8,11 @@ export declare const executor: {
 };
 export declare const getConfig: WebpackBuilder['getConfig'];
 export declare const bail: WebpackBuilder['bail'];
-export declare const start: (options: BuilderStartOptions) => Promise<unknown>;
+export declare const start: (options: BuilderStartOptions) => Promise<void | {
+    stats: webpack.Stats;
+    totalTime: [number, number];
+    bail: (e?: Error) => Promise<void>;
+}>;
 export declare const build: (options: BuilderStartOptions) => Promise<void | webpack.Stats>;
 export declare const corePresets: string[];
 export declare const overridePresets: string[];
-export {};

package/dist/{ts3.9 → types}/presets/custom-webpack-preset.d.ts

@@ -1,5 +1,5 @@
 import * as webpackReal from 'webpack';
-import { Options } from '@storybook/core-common';
+import type { Options } from '@storybook/core-common';
 import type { Configuration } from 'webpack';
 export declare function webpack(config: Configuration, options: Options): Promise<any>;
 export declare const webpackInstance: () => Promise<typeof webpackReal>;