chore: updated some more things to get webpack working

Signed-off-by: blam <ben@blam.sh>

packages/cli/src/lib/bundler/LinkedPackageResolvePlugin.ts

@@ -15,14 +15,14 @@
  */
 
 import { resolve as resolvePath } from 'path';
-import { ResolvePlugin } from 'webpack';
+import { WebpackPluginInstance } from 'webpack';
 import { isChildPath } from '@backstage/cli-common';
 import { LernaPackage } from './types';
 
 // Enables proper resolution of packages when linking in external packages.
 // Without this the packages would depend on dependencies in the node_modules
 // of the external packages themselves, leading to module duplication
-export class LinkedPackageResolvePlugin implements ResolvePlugin {
+export class LinkedPackageResolvePlugin implements WebpackPluginInstance {
   constructor(
     private readonly targetModules: string,
     private readonly packages: LernaPackage[],

packages/cli/src/lib/bundler/backend.ts

@@ -32,7 +32,7 @@ export async function serveBackend(options: BackendServeOptions) {
     {
       poll: true,
     },
-    (err: Error) => {
+    (err: Error | undefined) => {
       if (err) {
         console.error(err);
       } else console.log('Build succeeded');

packages/cli/src/lib/bundler/config.ts

@@ -161,12 +161,22 @@ export async function createConfig(
     performance: {
       hints: false, // we check the gzip size instead
     },
-    devtool: isDev ? 'cheap-module-eval-source-map' : 'source-map',
+    devtool: isDev ? 'eval-cheap-module-source-map' : 'source-map',
     context: paths.targetPath,
     entry: [require.resolve('react-hot-loader/patch'), paths.targetEntry],
     resolve: {
       extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'],
       mainFields: ['browser', 'module', 'main'],
+      fallback: {
+        module: false,
+        dgram: false,
+        dns: false,
+        fs: false,
+        http2: false,
+        net: false,
+        tls: false,
+        child_process: false,
+      },
       plugins: [
         new LinkedPackageResolvePlugin(paths.rootNodeModules, externalPkgs),
         new ModuleScopePlugin(
@@ -249,7 +259,7 @@ export async function createBackendConfig(
     performance: {
       hints: false, // we check the gzip size instead
     },
-    devtool: isDev ? 'cheap-module-eval-source-map' : 'source-map',
+    devtool: isDev ? 'eval-cheap-module-source-map' : 'source-map',
     context: paths.targetPath,
     entry: [
       'webpack/hot/poll?100',

packages/cli/src/lib/bundler/optimization.ts

@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { Options } from 'webpack';
+import { WebpackOptionsNormalized } from 'webpack';
 import TerserPlugin from 'terser-webpack-plugin';
 import { BundlingOptions } from './types';
 import { isParallelDefault } from '../parallel';
 
 export const optimization = (
   options: BundlingOptions,
-): Options.Optimization => {
+): WebpackOptionsNormalized['optimization'] => {
   const { isDev } = options;
 
   return {

packages/cli/src/lib/bundler/server.ts

@@ -45,8 +45,8 @@ export async function serveBundle(options: ServeOptions) {
   const server = new WebpackDevServer(compiler, {
     hot: !process.env.CI,
     contentBase: paths.targetPublic,
-    contentBasePublicPath: config.output?.publicPath,
-    publicPath: config.output?.publicPath,
+    contentBasePublicPath: config.output?.publicPath as string,
+    publicPath: config.output?.publicPath as string,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebookincubator/create-react-app/issues/387.

packages/cli/src/lib/bundler/transforms.ts

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import webpack, { Module, Plugin } from 'webpack';
+import webpack, { ModuleOptions, WebpackPluginInstance } from 'webpack';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { svgrTemplate } from '../svgrTemplate';
 
 type Transforms = {
-  loaders: Module['rules'];
-  plugins: Plugin[];
+  loaders: ModuleOptions['rules'];
+  plugins: WebpackPluginInstance[];
 };
 
 type TransformOptions = {
@@ -105,7 +105,7 @@ export const transforms = (options: TransformOptions): Transforms => {
     },
   ];
 
-  const plugins = new Array<Plugin>();
+  const plugins = new Array<WebpackPluginInstance>();
 
   if (isDev) {
     plugins.push(new webpack.HotModuleReplacementPlugin());