From 91c8ef6b0a420562cc3b9f4072d9b2e5c4489278 Mon Sep 17 00:00:00 2001
From: Steve Ayers <sayers@buf.build>
Date: Wed, 31 Jul 2024 11:32:02 -0400
Subject: [PATCH] Fix Vite CJS build warning for Yarn and Vue (#1722)

Fixes #1721

This fixes the warning about Vite's deprecated CJS build in the
`react/yarn-pnp` and `vue` projects by converting them to an ESM module.
Previously, they were both CJS, most likely due to a simple oversight.

With Vue, it also involved renaming the Cypress config to be a `.js`
file. Vue scaffolds Cypress config files to be a `.ts` file, which in
turn does not work with ESM modules. See [this
issue](https://github.com/cypress-io/cypress/issues/23552) for more
info.

For more info on the Vite CJS message:
https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated

---------

Signed-off-by: Steve Ayers <sayers@buf.build>
---
 react/yarn-pnp/package.json |  1 +
 vue/cypress.config.js       | 42 +++++++++++++++++++++++++++++++++++++
 vue/cypress.config.ts       | 38 ---------------------------------
 vue/package.json            |  1 +
 4 files changed, 44 insertions(+), 38 deletions(-)
 create mode 100644 vue/cypress.config.js
 delete mode 100644 vue/cypress.config.ts

diff --git a/react/yarn-pnp/package.json b/react/yarn-pnp/package.json
index 92aa59ebc..ef052ce77 100644
--- a/react/yarn-pnp/package.json
+++ b/react/yarn-pnp/package.json
@@ -2,6 +2,7 @@
   "name": "buf-yarn-pnp",
   "packageManager": "yarn@4.0.2",
   "private": true,
+  "type": "module",
   "scripts": {
     "start": "vite --port 3000",
     "build": "tsc && vite build",
diff --git a/vue/cypress.config.js b/vue/cypress.config.js
new file mode 100644
index 000000000..113bb8ac0
--- /dev/null
+++ b/vue/cypress.config.js
@@ -0,0 +1,42 @@
+import { defineConfig } from "cypress";
+import webpackPreprocessor from "@cypress/webpack-preprocessor";
+import ResolveTypeScriptPlugin from "resolve-typescript-plugin";
+
+// Note that vue scaffolds a cypress config with a .ts extension, but this doesn't
+// work with ESM modules. Renaming this file to have a .js extension fixes the issue.
+// See: https://github.com/cypress-io/cypress/issues/23552
+
+const options = {
+  webpackOptions: {
+    resolve: {
+      extensions: [".ts", ".tsx", ".js"],
+      plugins: [new ResolveTypeScriptPlugin()],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          loader: "ts-loader",
+          options: { transpileOnly: true },
+        },
+      ],
+    },
+  },
+};
+
+export default defineConfig({
+  e2e: {
+    specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
+    baseUrl: "http://localhost:4173",
+    setupNodeEvents(on) {
+      on("file:preprocessor", webpackPreprocessor(options));
+    },
+  },
+
+  component: {
+    devServer: {
+      framework: "vue",
+      bundler: "vite",
+    },
+  },
+});
diff --git a/vue/cypress.config.ts b/vue/cypress.config.ts
deleted file mode 100644
index f6a3ee277..000000000
--- a/vue/cypress.config.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { defineConfig } from 'cypress'
-const webpackPreprocessor = require('@cypress/webpack-preprocessor')
-const ResolveTypeScriptPlugin = require('resolve-typescript-plugin')
-
-const options = {
-    webpackOptions: {
-        resolve: {
-            extensions: ['.ts', '.tsx', '.js'],
-            plugins: [new ResolveTypeScriptPlugin()],
-        },
-        module: {
-            rules: [
-                {
-                    test: /\.tsx?$/,
-                    loader: 'ts-loader',
-                    options: { transpileOnly: true },
-                },
-            ],
-        },
-    },
-}
-
-export default defineConfig({
-    e2e: {
-        specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
-        baseUrl: 'http://localhost:4173',
-        setupNodeEvents(on, config) {
-            on('file:preprocessor', webpackPreprocessor(options))
-        },
-    },
-
-    component: {
-        devServer: {
-            framework: 'vue',
-            bundler: 'vite',
-        },
-    },
-})
diff --git a/vue/package.json b/vue/package.json
index 1f5003a96..0d6b83f2e 100644
--- a/vue/package.json
+++ b/vue/package.json
@@ -1,6 +1,7 @@
 {
   "name": "buf-vue",
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "start": "vite",
     "build": "run-p type-check build-only",