Fix up projects so everything builds successfully

Author: octogonz

build-tests-samples/heft-storybook-react-tutorial/config/heft.json

@@ -40,7 +40,7 @@
       /**
        * The path to the plugin package.
        */
-      "plugin": "@rushstack/heft-webpack5-plugin"
+      "plugin": "@rushstack/heft-webpack4-plugin"
 
       /**
        * An optional object that provides additional settings that may be defined by the plugin.

build-tests/heft-sass-test/config/heft.json

@@ -40,7 +40,7 @@
       /**
        * The path to the plugin package.
        */
-      "plugin": "@rushstack/heft-webpack5-plugin"
+      "plugin": "@rushstack/heft-webpack4-plugin"
 
       /**
        * An optional object that provides additional settings that may be defined by the plugin.

build-tests/heft-sass-test/webpack.config.js

@@ -3,7 +3,6 @@
 const path = require('path');
 const Autoprefixer = require('autoprefixer');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const sass = require('node-sass');
 
 /**
  * If the "--production" command-line parameter is specified when invoking Heft, then the

heft-plugins/heft-dev-cert-plugin/src/DevCertPlugin.ts

@@ -10,7 +10,9 @@ import type {
   IScopedLogger
 } from '@rushstack/heft';
 import { CertificateManager, ICertificate } from '@rushstack/debug-certificate-manager';
-import { Configuration as WebpackDevServerConfig } from 'webpack-dev-server';
+
+// IMPORTANT: To simplify versioning, 'webpack-dev-server' is a devDependency, not a regular dependency
+import type { Configuration as WebpackDevServerConfig } from 'webpack-dev-server';
 
 export interface IWebpackConfigPartial {
   devServer?: WebpackDevServerConfig;

heft-plugins/heft-dev-cert-plugin/src/webpack-dev-middleware-workaround.d.ts

@@ -0,0 +1,9 @@
+// The webpack-dev-middleware@5.3.1 project has a phantom dependency on @types/node
+// and so "npm install" chooses the "*" latest version.  As a result, their index.d.ts
+// has a reference to fs.StatSyncFn which is new in @types/node@16.  As of this writing
+// Node 12 is still LTS so we need to support it.
+// Upstream issue: https://github.com/webpack/webpack-dev-middleware/issues/1194
+declare module 'fs' {
+  // eslint-disable-next-line
+  export type StatSyncFn = any;
+}

heft-plugins/heft-sass-plugin/src/SassTypingsGenerator.ts

@@ -3,7 +3,7 @@
 
 import * as path from 'path';
 import { render, Result, SassError } from 'node-sass';
-import postcss from 'postcss';
+import * as postcss from 'postcss';
 import cssModules from 'postcss-modules';
 import { FileSystem } from '@rushstack/node-core-library';
 import { IStringValueTypings, StringValuesTypingsGenerator } from '@rushstack/typings-generator';
@@ -66,13 +66,6 @@ interface IClassMap {
   [className: string]: string;
 }
 
-interface ICssModulesOptions {
-  getJSON(cssFileName: string, json: IClassMap): void;
-  generateScopeName(name: string): string;
-}
-
-type TCssModules = (options: ICssModulesOptions) => TCssModules;
-
 /**
  * Generates type files (.d.ts) for Sass/SCSS/CSS files.
  *
@@ -128,7 +121,7 @@ export class SassTypingsGenerator extends StringValuesTypingsGenerator {
         );
 
         let classMap: IClassMap = {};
-        const cssModulesClassMapPlugin: postcss.Plugin<TCssModules> = cssModules({
+        const cssModulesClassMapPlugin: postcss.Plugin = cssModules({
           getJSON: (cssFileName: string, json: IClassMap) => {
             // This callback will be invoked durint the promise evaluation of the postcss process() function.
             classMap = json;
@@ -137,7 +130,7 @@ export class SassTypingsGenerator extends StringValuesTypingsGenerator {
           generateScopedName: (name: string) => name
         });
 
-        await postcss([cssModulesClassMapPlugin]).process(css, { from: filePath });
+        await postcss.default([cssModulesClassMapPlugin]).process(css, { from: filePath });
 
         if (getCssPaths) {
           await Promise.all(

heft-plugins/heft-webpack5-plugin/src/webpack-dev-middleware-workaround.d.ts

@@ -0,0 +1,9 @@
+// The webpack-dev-middleware@5.3.1 project has a phantom dependency on @types/node
+// and so "npm install" chooses the "*" latest version.  As a result, their index.d.ts
+// has a reference to fs.StatSyncFn which is new in @types/node@16.  As of this writing
+// Node 12 is still LTS so we need to support it.
+// Upstream issue: https://github.com/webpack/webpack-dev-middleware/issues/1194
+declare module 'fs' {
+  // eslint-disable-next-line
+  export type StatSyncFn = any;
+}

webpack/set-webpack-public-path-plugin/src/SetPublicPathPlugin.ts

@@ -3,9 +3,11 @@
 
 import { EOL } from 'os';
 import type * as Webpack from 'webpack';
-import type * as Webpack5 from 'webpack5';
 import type * as Tapable from 'tapable';
 
+// Workaround for https://github.com/pnpm/pnpm/issues/4301
+import type * as Webpack5 from '@rushstack/heft-webpack5-plugin/node_modules/webpack';
+
 import { IInternalOptions, getSetPublicPathCode } from './codeGenerator';
 
 /**

webpack/set-webpack-public-path-plugin/tsconfig.json

@@ -1,3 +1,7 @@
 {
-  "extends": "./node_modules/@rushstack/heft-node-rig/profiles/default/tsconfig-base.json"
+  "extends": "./node_modules/@rushstack/heft-node-rig/profiles/default/tsconfig-base.json",
+
+  "compilerOptions": {
+    "types": ["heft-jest", "node"]
+  }
 }