Merge pull request #27069 from backstage/rugvip/vite

cli: update Vite implementation
2024-10-10 13:20:35 +02:00
parent 14989c1ff0 ff9c2f749c
commit 69976baeea
7 changed files with 100 additions and 22 deletions
@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+The check for `react-dom/client` will now properly always run from the target directory.
@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+Updated the Vite implementation behind the `EXPERIMENTAL_VITE` flag to work with more recent versions of Backstage.
@@ -73,6 +73,7 @@
    "@material-ui/core": "^4.12.2",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "4.0.0-alpha.61",
+    "@modyfi/vite-plugin-yaml": "^1.1.0",
    "@octokit/rest": "^19.0.3",
    "@vitejs/plugin-react": "^4.3.1",
    "history": "^5.0.0",
@@ -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
    },
@@ -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;
@@ -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
@@ -4058,11 +4058,14 @@ __metadata:
    yn: ^4.0.0
    zod: ^3.22.4
  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
    vite:
@@ -11588,6 +11591,19 @@ __metadata:
  languageName: node
  linkType: hard

+"@modyfi/vite-plugin-yaml@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@modyfi/vite-plugin-yaml@npm:1.1.0"
+  dependencies:
+    "@rollup/pluginutils": 5.1.0
+    js-yaml: 4.1.0
+    tosource: 2.0.0-alpha.3
+  peerDependencies:
+    vite: ^3.2.7 || ^4.0.5 || ^5.0.5
+  checksum: 6989cde89323321b714b69d11b9125c8d3483a8c6ace536df313edd653180e85e6013effbc6cb8b89e6f9d6e107a10f7a82fadf6a44e81255b437702d5dd1db0
+  languageName: node
+  linkType: hard
+
 "@motionone/animation@npm:^10.12.0":
  version: 10.16.3
  resolution: "@motionone/animation@npm:10.16.3"
@@ -14918,17 +14934,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@rollup/pluginutils@npm:^4.2.0, @rollup/pluginutils@npm:^4.2.1":
-  version: 4.2.1
-  resolution: "@rollup/pluginutils@npm:4.2.1"
-  dependencies:
-    estree-walker: ^2.0.1
-    picomatch: ^2.2.2
-  checksum: 6bc41f22b1a0f1efec3043899e4d3b6b1497b3dea4d94292d8f83b4cf07a1073ecbaedd562a22d11913ff7659f459677b01b09e9598a98936e746780ecc93a12
-  languageName: node
-  linkType: hard
-
-"@rollup/pluginutils@npm:^5.0.1, @rollup/pluginutils@npm:^5.0.5, @rollup/pluginutils@npm:^5.1.0":
+"@rollup/pluginutils@npm:5.1.0, @rollup/pluginutils@npm:^5.0.1, @rollup/pluginutils@npm:^5.0.5, @rollup/pluginutils@npm:^5.1.0":
  version: 5.1.0
  resolution: "@rollup/pluginutils@npm:5.1.0"
  dependencies:
@@ -14944,6 +14950,16 @@ __metadata:
  languageName: node
  linkType: hard

+"@rollup/pluginutils@npm:^4.2.0, @rollup/pluginutils@npm:^4.2.1":
+  version: 4.2.1
+  resolution: "@rollup/pluginutils@npm:4.2.1"
+  dependencies:
+    estree-walker: ^2.0.1
+    picomatch: ^2.2.2
+  checksum: 6bc41f22b1a0f1efec3043899e4d3b6b1497b3dea4d94292d8f83b4cf07a1073ecbaedd562a22d11913ff7659f459677b01b09e9598a98936e746780ecc93a12
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-android-arm-eabi@npm:4.22.5":
  version: 4.22.5
  resolution: "@rollup/rollup-android-arm-eabi@npm:4.22.5"
@@ -26854,6 +26870,7 @@ __metadata:
    "@material-ui/core": ^4.12.2
    "@material-ui/icons": ^4.9.1
    "@material-ui/lab": 4.0.0-alpha.61
+    "@modyfi/vite-plugin-yaml": ^1.1.0
    "@octokit/rest": ^19.0.3
    "@playwright/test": ^1.32.3
    "@testing-library/dom": ^10.0.0
@@ -31623,7 +31640,7 @@ __metadata:
  languageName: node
  linkType: hard

-"js-yaml@npm:=4.1.0, js-yaml@npm:^4.0.0, js-yaml@npm:^4.1.0":
+"js-yaml@npm:4.1.0, js-yaml@npm:=4.1.0, js-yaml@npm:^4.0.0, js-yaml@npm:^4.1.0":
  version: 4.1.0
  resolution: "js-yaml@npm:4.1.0"
  dependencies:
@@ -42707,7 +42724,7 @@ __metadata:
  languageName: node
  linkType: hard

-"tosource@npm:^2.0.0-alpha.3":
+"tosource@npm:2.0.0-alpha.3, tosource@npm:^2.0.0-alpha.3":
  version: 2.0.0-alpha.3
  resolution: "tosource@npm:2.0.0-alpha.3"
  checksum: bc03a7571de8ed4306e6721283fa891f2adcab9dd80c46f6f177d4259b34bb192fe3a2cb3e1e2ce16f9db0bc7e534acfcb5478ab094b0ba255f98abfce6dab46