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](cypress-io/cypress#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 <[email protected]>

Author: smaye81

react/yarn-pnp/package.json

@@ -2,6 +2,7 @@
   "name": "buf-yarn-pnp",
   "packageManager": "[email protected]",
   "private": true,
+  "type": "module",
   "scripts": {
     "start": "vite --port 3000",
     "build": "tsc && vite build",

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",
+    },
+  },
+});

vue/cypress.config.ts

@@ -1,6 +1,7 @@
 {
   "name": "buf-vue",
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "start": "vite",
     "build": "run-p type-check build-only",