Merge pull request #27069 from backstage/rugvip/vite

cli: update Vite implementation

packages/cli/package.json

@@ -194,12 +194,16 @@
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "peerDependencies": {
+    "@modyfi/vite-plugin-yaml": "^1.1.0",
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.0.0",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "peerDependenciesMeta": {
+    "@modyfi/vite-plugin-yaml": {
+      "optional": true
+    },
     "@vitejs/plugin-react": {
       "optional": true
     },

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

@@ -13,9 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import { paths } from '../paths';
+
 export function hasReactDomClient() {
   try {
-    require.resolve('react-dom/client');
+    require.resolve('react-dom/client', {
+      paths: [paths.targetDir],
+    });
     return true;
   } catch {
     return false;

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

@@ -125,24 +125,65 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be
   });
 
   if (process.env.EXPERIMENTAL_VITE) {
-    const vite = require('vite');
-    const { default: viteReact } = require('@vitejs/plugin-react');
-    const {
-      nodePolyfills: viteNodePolyfills,
-    } = require('vite-plugin-node-polyfills');
-    const { createHtmlPlugin: viteHtml } = require('vite-plugin-html');
+    const vite = require('vite') as typeof import('vite');
+    const { default: viteReact } =
+      require('@vitejs/plugin-react') as typeof import('@vitejs/plugin-react');
+    const { default: viteYaml } =
+      require('@modyfi/vite-plugin-yaml') as typeof import('@modyfi/vite-plugin-yaml');
+    const { nodePolyfills: viteNodePolyfills } =
+      require('vite-plugin-node-polyfills') as typeof import('vite-plugin-node-polyfills');
+    const { createHtmlPlugin: viteHtml } =
+      require('vite-plugin-html') as typeof import('vite-plugin-html');
+
     viteServer = await vite.createServer({
       define: {
-        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()),
       },
+      optimizeDeps: {
+        esbuildOptions: {
+          plugins: [
+            {
+              name: 'custom-define',
+              setup(build) {
+                const define = (build.initialOptions.define ||= {});
+                define['process.env.HAS_REACT_DOM_CLIENT'] = JSON.stringify(
+                  hasReactDomClient(),
+                );
+                define['process.env.NODE_ENV'] = JSON.stringify('development');
+              },
+            },
+          ],
+        },
+      },
       plugins: [
         viteReact(),
-        viteNodePolyfills(),
+        viteNodePolyfills({
+          include: [
+            'buffer',
+            'events',
+            'fs',
+            'http',
+            'https',
+            'os',
+            'path',
+            'process',
+            'querystring',
+            'stream',
+            'url',
+            'util',
+            'zlib',
+          ],
+          globals: {
+            global: true,
+            Buffer: true,
+            process: true,
+          },
+        }),
+        viteYaml(),
         viteHtml({
           entry: paths.targetEntry,
           // todo(blam): we should look at contributing to thPe plugin here