chore: refactor and remove cjs

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

.changeset/cold-pigs-end.md

@@ -1,7 +0,0 @@
----
-'@backstage/plugin-scaffolder-react': patch
-'@backstage/plugin-scaffolder': patch
-'@backstage/plugin-home': patch
----
-
-Remove usages of `require`

packages/cli/package.json

@@ -134,7 +134,6 @@
     "terser-webpack-plugin": "^5.1.3",
     "util": "^0.12.3",
     "vite": "^4.4.9",
-    "vite-plugin-commonjs": "^0.10.0",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-node-polyfills": "^0.14.1",
     "webpack": "^5.70.0",

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

@@ -39,6 +39,7 @@ import { runPlain } from '../run';
 import { transforms } from './transforms';
 import { version } from '../../lib/version';
 import yn from 'yn';
+import { hasReactDomClient } from './hasReactDomClient';
 
 const BUILD_CACHE_ENV_VAR = 'BACKSTAGE_CLI_EXPERIMENTAL_BUILD_CACHE';
 
@@ -81,15 +82,6 @@ async function readBuildInfo() {
   };
 }
 
-function hasReactDomClient() {
-  try {
-    require.resolve('react-dom/client');
-    return true;
-  } catch {
-    return false;
-  }
-}
-
 export async function createConfig(
   paths: BundlingPaths,
   options: BundlingOptions,

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

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export function hasReactDomClient() {
+  try {
+    require.resolve('react-dom/client');
+    return true;
+  } catch {
+    return false;
+  }
+}

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

@@ -24,7 +24,6 @@ import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import vite from 'vite';
 import viteReact from '@vitejs/plugin-react';
-import viteCommonJs from 'vite-plugin-commonjs';
 import { nodePolyfills as viteNodePolyfills } from 'vite-plugin-node-polyfills';
 import { createHtmlPlugin as viteHtml } from 'vite-plugin-html';
 
@@ -39,6 +38,7 @@ import { createConfig, resolveBaseUrl } from './config';
 import { createDetectedModulesEntryPoint } from './packageDetection';
 import { resolveBundlingPaths } from './paths';
 import { ServeOptions } from './types';
+import { hasReactDomClient } from './hasReactDomClient';
 
 export async function serveBundle(options: ServeOptions) {
   const paths = resolveBundlingPaths(options);
@@ -166,14 +166,13 @@ export async function serveBundle(options: ServeOptions) {
         global: 'window',
         'process.argv': JSON.stringify(process.argv),
         'process.env.APP_CONFIG': JSON.stringify(cliConfig.frontendAppConfigs),
+        // This allows for conditional imports of react-dom/client, since there's no way
+        // to check for presence of it in source code without module resolution errors.
+        'process.env.HAS_REACT_DOM_CLIENT': JSON.stringify(hasReactDomClient()),
       },
       plugins: [
         viteReact(),
         viteNodePolyfills(),
-        viteCommonJs({
-          // todo(blam): this is ugly to work around for just running in the backstage/backstage repo.
-          filter: id => id.endsWith('renderReactElement.ts'),
-        }),
         viteHtml({
           entry: paths.targetEntry,
           // todo(blam): we should look at contributing to thPe plugin here
@@ -233,26 +232,24 @@ export async function serveBundle(options: ServeOptions) {
         client: {
           webSocketURL: 'auto://0.0.0.0:0/ws',
         },
-      } as any,
-      compiler as any,
+      },
+      compiler,
     );
   }
 
   await new Promise<void>(async (resolve, reject) => {
     if (process.env.EXPERIMENTAL_VITE) {
       await (server as vite.ViteDevServer).listen();
-      openBrowser(url.href);
-      resolve();
     } else {
       (server as WebpackDevServer).startCallback((err?: Error) => {
         if (err) {
           reject(err);
           return;
         }
-        openBrowser(url.href);
-        resolve();
       });
     }
+    openBrowser(url.href);
+    resolve();
   });
 
   const waitForExit = async () => {

yarn.lock

@@ -3864,7 +3864,6 @@ __metadata:
     type-fest: ^2.19.0
     util: ^0.12.3
     vite: ^4.4.9
-    vite-plugin-commonjs: ^0.10.0
     vite-plugin-html: ^3.2.0
     vite-plugin-node-polyfills: ^0.14.1
     webpack: ^5.70.0
@@ -12751,7 +12750,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.13, @jridgewell/sourcemap-codec@npm:^1.4.15":
+"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.13":
   version: 1.4.15
   resolution: "@jridgewell/sourcemap-codec@npm:1.4.15"
   checksum: b881c7e503db3fc7f3c1f35a1dd2655a188cc51a3612d76efc8a6eb74728bef5606e6758ee77423e564092b4a518aba569bbb21c9bac5ab7a35b0c6ae7e344c8
@@ -19549,7 +19548,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.2.4, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
+"acorn@npm:^8.2.4, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.7.1, acorn@npm:^8.9.0":
   version: 8.10.0
   resolution: "acorn@npm:8.10.0"
   bin:
@@ -31829,15 +31828,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"magic-string@npm:^0.30.1":
-  version: 0.30.5
-  resolution: "magic-string@npm:0.30.5"
-  dependencies:
-    "@jridgewell/sourcemap-codec": ^1.4.15
-  checksum: da10fecff0c0a7d3faf756913ce62bd6d5e7b0402be48c3b27bfd651b90e29677e279069a63b764bcdc1b8ecdcdb898f29a5c5ec510f2323e8d62ee057a6eb18
-  languageName: node
-  linkType: hard
-
 "make-dir@npm:^2.0.0, make-dir@npm:^2.1.0":
   version: 2.1.0
   resolution: "make-dir@npm:2.1.0"
@@ -42166,30 +42156,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-commonjs@npm:^0.10.0":
-  version: 0.10.0
-  resolution: "vite-plugin-commonjs@npm:0.10.0"
-  dependencies:
-    acorn: ^8.8.2
-    fast-glob: ^3.2.12
-    magic-string: ^0.30.1
-    vite-plugin-dynamic-import: ^1.5.0
-  checksum: 3cb9a78d477a3bf7b15bd39c73058c7a5277a9be68528276fa885b4abe9ace801073dc587648248bb749cf070eb817f0ec34d8d32c0c4aac4000b23048776c2b
-  languageName: node
-  linkType: hard
-
-"vite-plugin-dynamic-import@npm:^1.5.0":
-  version: 1.5.0
-  resolution: "vite-plugin-dynamic-import@npm:1.5.0"
-  dependencies:
-    acorn: ^8.8.2
-    es-module-lexer: ^1.2.1
-    fast-glob: ^3.2.12
-    magic-string: ^0.30.1
-  checksum: 68efd897daa0c72a9f9d3481095dd3f7ec9a822be5a15eef60413734a4c894c5bbd1c1762f02daeef5df59cef212c9f1e7e056315e2a7780816ccafe5c74da6e
-  languageName: node
-  linkType: hard
-
 "vite-plugin-html@npm:^3.2.0":
   version: 3.2.0
   resolution: "vite-plugin-html@npm:3.2.0"