Fix Vite CJS build warning for Yarn and Vue

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/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",