fixes and hacks to get it working

app/angular/src/server/angular-cli-webpack-older.ts

@@ -1,4 +1,4 @@
-import webpack from 'webpack';
+import webpack, { Configuration } from 'webpack';
 import { logger } from '@storybook/node-logger';
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 import { targetFromTargetString, Target } from '@angular-devkit/architect';
@@ -19,7 +19,10 @@ import type { PresetOptions } from './preset-options';
 /**
  * Old way currently support version lower than 12.2.x
  */
-export async function getWebpackConfig(baseConfig: webpack.Configuration, options: PresetOptions) {
+export async function getWebpackConfig(
+  baseConfig: webpack.Configuration,
+  options: PresetOptions
+): Promise<Configuration> {
   const dirToSearch = process.cwd();
 
   // Read angular workspace
@@ -106,6 +109,7 @@ function mergeAngularCliWebpackConfig(
   // styleWebpackConfig.entry adds global style files to the webpack context
   const entry = [
     ...(baseConfig.entry as string[]),
+    // @ts-ignore
     ...Object.values(cliStyleWebpackConfig.entry).reduce((acc, item) => acc.concat(item), []),
   ];
 

app/angular/src/server/angular-devkit-build-webpack.ts

@@ -6,7 +6,7 @@
  */
 
 import path from 'path';
-import webpack from 'webpack';
+import webpack, { Configuration } from 'webpack';
 import { normalize, resolve, workspaces, getSystemPath } from '@angular-devkit/core';
 import { createConsoleLogger } from '@angular-devkit/core/node';
 
@@ -152,18 +152,18 @@ const buildWebpackConfigOptions = async (
 
 export type AngularCliWebpackConfig = {
   cliCommonWebpackConfig: {
-    plugins: webpack.Plugin[];
+    plugins: Configuration['plugins'];
     resolve: {
       modules: string[];
     };
-    resolveLoader: webpack.ResolveLoader;
+    resolveLoader: Configuration['resolveLoader'];
   };
   cliStyleWebpackConfig: {
-    entry: string | string[] | webpack.Entry | webpack.EntryFunc;
+    entry: Configuration['entry'];
     module: {
-      rules: webpack.RuleSetRule[];
+      rules: Configuration['module']['rules'];
     };
-    plugins: webpack.Plugin[];
+    plugins: Configuration['plugins'];
   };
   tsConfigPath: string;
 };

app/angular/src/server/create-fork-ts-checker-plugin.ts

@@ -7,7 +7,7 @@ import { Options } from 'ts-loader';
 export default function (tsLoaderOptions: Partial<Options>) {
   if (tsLoaderOptions && tsLoaderOptions.configFile) {
     return new ForkTsCheckerWebpackPlugin({
-      tsconfig: tsLoaderOptions.configFile,
+      typescript: { configFile: tsLoaderOptions.configFile },
       async: true,
     });
   }

app/angular/src/server/utils/filter-out-styling-rules.ts

@@ -15,5 +15,5 @@ const isStylingRule = (rule: RuleSetRule) => {
 };
 
 export const filterOutStylingRules = (config: Configuration) => {
-  return config.module.rules.filter((rule) => !isStylingRule(rule));
+  return (config.module.rules as RuleSetRule[]).filter((rule) => !isStylingRule(rule));
 };

examples/external-docs/src/.storybook/main.ts

@@ -17,7 +17,7 @@ const config: StorybookConfig = {
     },
   },
   core: {
-    builder: { builderName: '@storybook/builder-webpack5' },
+    builder: { name: '@storybook/builder-webpack5' },
     channelOptions: { allowFunction: false, maxDepth: 10 },
   },
   features: {

examples/react-ts/.storybook/main.ts

@@ -22,7 +22,7 @@ const config: StorybookConfig = {
     },
   },
   core: {
-    builder: { builderName: '@storybook/builder-webpack5' },
+    builder: { name: '@storybook/builder-webpack5' },
     channelOptions: { allowFunction: false, maxDepth: 10 },
   },
   features: {

lib/builder-webpack5/package.json

@@ -79,7 +79,6 @@
     "webpack-virtual-modules": "^0.4.3"
   },
   "devDependencies": {
-    "@types/case-sensitive-paths-webpack-plugin": "^2.1.6",
     "@types/terser-webpack-plugin": "^5.2.0",
     "@types/webpack-dev-middleware": "^5.3.0",
     "@types/webpack-hot-middleware": "^2.25.6",

lib/builder-webpack5/src/index.ts

@@ -130,7 +130,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
   router.use(webpackHotMiddleware(compiler as any));
 
   const stats = await new Promise<Stats>((ready, stop) => {
-    compilation.waitUntilValid(ready);
+    compilation.waitUntilValid(ready as any);
     reject = stop;
   });
   yield;

lib/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -3,6 +3,7 @@ import dedent from 'ts-dedent';
 import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin, ProvidePlugin } from 'webpack';
 import type { Configuration } from 'webpack';
 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';

lib/manager-webpack5/package.json

@@ -76,7 +76,6 @@
     "webpack-virtual-modules": "^0.4.3"
   },
   "devDependencies": {
-    "@types/case-sensitive-paths-webpack-plugin": "^2.1.6",
     "@types/terser-webpack-plugin": "^5.2.0",
     "@types/webpack-dev-middleware": "^5.3.0",
     "@types/webpack-virtual-modules": "^0.1.1"

lib/manager-webpack5/src/index.ts

@@ -160,7 +160,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
   router.use(compilation);
 
   const stats = await new Promise<Stats>((ready, stop) => {
-    compilation.waitUntilValid(ready);
+    compilation.waitUntilValid(ready as any);
     reject = stop;
   });
   yield;

lib/manager-webpack5/src/presets/manager-preset.ts

@@ -3,6 +3,7 @@ import fse from 'fs-extra';
 import { DefinePlugin, ProvidePlugin } from 'webpack';
 import type { Configuration, WebpackPluginInstance } from 'webpack';
 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 VirtualModulePlugin from 'webpack-virtual-modules';
 import TerserWebpackPlugin from 'terser-webpack-plugin';

scripts/utils/compile-babel.js

@@ -98,7 +98,7 @@ async function babelify(options = {}) {
   }
 
   const runners = [
-    // run({ watch, dir: './dist/cjs', silent, errorCallback }),
+    run({ watch, dir: './dist/cjs', silent, errorCallback }),
     run({ watch, dir: './dist/esm', silent, errorCallback }),
   ];
 

yarn.lock

@@ -7364,7 +7364,6 @@ __metadata:
     "@storybook/semver": ^7.3.2
     "@storybook/store": 6.5.0-alpha.64
     "@storybook/theming": 6.5.0-alpha.64
-    "@types/case-sensitive-paths-webpack-plugin": ^2.1.6
     "@types/node": ^14.0.10 || ^16.0.0
     "@types/terser-webpack-plugin": ^5.2.0
     "@types/webpack-dev-middleware": ^5.3.0
@@ -8094,7 +8093,6 @@ __metadata:
     "@storybook/node-logger": 6.5.0-alpha.64
     "@storybook/theming": 6.5.0-alpha.64
     "@storybook/ui": 6.5.0-alpha.64
-    "@types/case-sensitive-paths-webpack-plugin": ^2.1.6
     "@types/node": ^14.0.10 || ^16.0.0
     "@types/terser-webpack-plugin": ^5.2.0
     "@types/webpack-dev-middleware": ^5.3.0
@@ -9829,15 +9827,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/case-sensitive-paths-webpack-plugin@npm:^2.1.6":
-  version: 2.1.6
-  resolution: "@types/case-sensitive-paths-webpack-plugin@npm:2.1.6"
-  dependencies:
-    "@types/webpack": ^4
-  checksum: 9f379718393f04937be69e742f9b67e346ecca5badb37a02eb1b740a4f37e1c52033b3a9fef04b82e31b9f58ae72ae02cf1027a57ecd969ff5e1b4e6796375d6
-  languageName: node
-  linkType: hard
-
 "@types/chai-as-promised@npm:^7.1.2":
   version: 7.1.5
   resolution: "@types/chai-as-promised@npm:7.1.5"