git clone from github

2023-01-31 13:38:00 +08:00
commit cd074c3c04
28 changed files with 11030 additions and 0 deletions
--- a/.env.demo
+++ b/.env.demo
@@ -0,0 +1,4 @@
+/*
+For demo env file
+*/
+VUE_APP_API_URL = "https://REDACTED-HOST/api/"
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -0,0 +1,20 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-prettier",
+  ],
+  overrides: [
+    {
+      files: ["cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}"],
+      extends: ["plugin:cypress/recommended"],
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
+};
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,36 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+/dist
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+vscode
+.vscode
+/vscode
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# local env files
+.env.local
+.env.*.local
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -0,0 +1 @@
+{}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,57 @@
+# frontend
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+npm run test:unit
+```
+
+### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
+
+```sh
+npm run test:e2e:dev
+```
+
+This runs the end-to-end tests against the Vite development server.
+It is much faster than the production build.
+
+But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
+
+```sh
+npm run build
+npm run test:e2e
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -0,0 +1,9 @@
+/* eslint-env node */
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
+    baseUrl: "http://localhost:4173",
+  },
+});
--- a/cypress/e2e/example.cy.js
+++ b/cypress/e2e/example.cy.js
@@ -0,0 +1,8 @@
+// https://docs.cypress.io/api/introduction/api.html
+
+describe("My First Test", () => {
+  it("visits the app root url", () => {
+    cy.visit("/");
+    cy.contains("h1", "You did it!");
+  });
+});
--- a/cypress/e2e/jsconfig.json
+++ b/cypress/e2e/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress"]
+  },
+  "include": ["./**/*", "../support/**/*"]
+}
--- a/cypress/fixtures/example.json
+++ b/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
--- a/cypress/support/e2e.js
+++ b/cypress/support/e2e.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
--- a/doc/structure.txt
+++ b/doc/structure.txt
@@ -0,0 +1,28 @@
+hello-vite/
+├── index.html Vite的進入點
+├── node_modules
+├── package.json
+├── package-lock.json
+├── public 不被 JavaScript 引用的靜態資源
+│   └── favicon.ico 網頁標題欄 icon
+├── README.md
+├── src
+│   ├── App.vue 網頁根元件
+│   ├── main.js 程式進入點
+│   ├── assets 靜態資源 EX: 圖片, CSS
+│   │   ├── base.css
+│   │   ├── logo.svg
+│   │   └── main.css
+│   ├── components 元件檔
+│   │   ├── HelloWorld.vue
+│   │   ├── icons (略 - 放所有 icon 的 svg 檔)
+│   │   ├── TheWelcome.vue
+│   │   └── WelcomeItem.vue
+│   ├── router Vue Router 路由管理
+│   │   └── index.js
+│   ├── stores Pinia 狀態管理器
+│   │   └── counter.js
+│   └── views 路由元件
+│       ├── AboutView.vue
+│       └── HomeView.vue
+└── vite.config.js    vite 設定檔
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DSP_Lucia</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "frontend",
+  "version": "0.2.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:unit": "vitest --environment jsdom --root src/",
+    "test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
+    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "autoprefixer": "^10.4.13",
+    "pinia": "^2.0.28",
+    "postcss": "^8.4.20",
+    "tailwindcss": "^3.2.4",
+    "vue": "^3.2.45",
+    "vue-router": "^4.1.6"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.1.4",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/test-utils": "^2.2.6",
+    "autoprefixer": "^10.4.13",
+    "cypress": "^12.0.2",
+    "eslint": "^8.22.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-vue": "^9.3.0",
+    "html-webpack-plugin": "^5.5.0",
+    "jsdom": "^20.0.3",
+    "postcss": "^8.4.20",
+    "prettier": "^2.7.1",
+    "sass": "^1.57.1",
+    "start-server-and-test": "^1.15.2",
+    "tailwindcss": "^3.2.4",
+    "vite": "^4.0.0",
+    "vitest": "^0.25.6"
+  }
+}
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,10 @@
+<template>
+  <RouterView />
+</template>
+
+<style scoped>
+</style>
+
+<script setup>
+import { RouterLink, RouterView } from "vue-router";
+</script>
--- a/src/assets/DSP_LOGO.svg
+++ b/src/assets/DSP_LOGO.svg
@@ -0,0 +1,11 @@
+<svg width="124" height="31" viewBox="0 0 124 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M122.558 19.7593C122.891 19.9517 122.891 20.4328 122.558 20.6253L118 23.2567C117.667 23.4491 117.25 23.2086 117.25 22.8237L117.25 17.5609C117.25 17.176 117.667 16.9354 118 17.1279L122.558 19.7593Z" fill="#003E66"/>
+<path d="M42.3484 28.9432C41.4222 28.9432 40.6899 28.674 40.1514 28.1355C39.613 27.597 39.3438 26.8647 39.3438 25.9386V9.23549C39.5807 9.19241 39.9576 9.13857 40.4745 9.07395C40.9914 8.9878 41.4868 8.94472 41.9607 8.94472C42.4561 8.94472 42.8868 8.9878 43.253 9.07395C43.6407 9.13857 43.9638 9.2678 44.2222 9.46164C44.4807 9.65549 44.6745 9.92472 44.8038 10.2693C44.933 10.614 44.9976 11.0663 44.9976 11.6263V24.3878H52.3961C52.5468 24.6247 52.6868 24.9478 52.8161 25.357C52.9453 25.7447 53.0099 26.154 53.0099 26.5847C53.0099 27.4463 52.8268 28.0601 52.4607 28.4263C52.0945 28.7709 51.6099 28.9432 51.0068 28.9432H42.3484Z" fill="#003E66"/>
+<path d="M55.5029 13.3709C55.7183 13.3063 56.0521 13.2416 56.5044 13.177C56.9783 13.1124 57.4629 13.0801 57.9583 13.0801C58.4321 13.0801 58.8521 13.1124 59.2183 13.177C59.606 13.2416 59.9291 13.3709 60.1875 13.5647C60.446 13.7586 60.6398 14.0278 60.7691 14.3724C60.9198 14.6955 60.9952 15.1263 60.9952 15.6647V22.6109C60.9952 23.494 61.2106 24.1293 61.6414 24.517C62.0721 24.8832 62.6967 25.0663 63.5152 25.0663C64.0106 25.0663 64.4091 25.0232 64.7106 24.937C65.0337 24.8509 65.2814 24.7647 65.4537 24.6786V13.3709C65.6691 13.3063 66.0029 13.2416 66.4552 13.177C66.9291 13.1124 67.4137 13.0801 67.9091 13.0801C68.3829 13.0801 68.8029 13.1124 69.1691 13.177C69.5567 13.2416 69.8798 13.3709 70.1383 13.5647C70.3967 13.7586 70.5906 14.0278 70.7198 14.3724C70.8706 14.6955 70.946 15.1263 70.946 15.6647V25.4863C70.946 26.5632 70.4937 27.3709 69.5891 27.9093C68.8352 28.3832 67.9306 28.7386 66.8752 28.9755C65.8414 29.234 64.7106 29.3632 63.4829 29.3632C62.3198 29.3632 61.2429 29.234 60.2521 28.9755C59.2829 28.717 58.4429 28.3186 57.7321 27.7801C57.0214 27.2416 56.4721 26.5524 56.0844 25.7124C55.6967 24.8509 55.5029 23.817 55.5029 22.6109V13.3709Z" fill="#003E66"/>
+<path d="M83.8055 16.9893C83.267 16.9893 82.7501 17.0755 82.2547 17.2478C81.7808 17.4201 81.3608 17.6786 80.9947 18.0232C80.6501 18.3463 80.3701 18.7555 80.1547 19.2509C79.9393 19.7463 79.8316 20.3278 79.8316 20.9955C79.8316 22.3309 80.2085 23.3324 80.9624 24.0001C81.7378 24.6678 82.6747 25.0016 83.7731 25.0016C84.4193 25.0016 84.9793 24.9263 85.4531 24.7755C85.927 24.6247 86.347 24.4632 86.7131 24.2909C87.1439 24.5924 87.467 24.9263 87.6824 25.2924C87.8978 25.637 88.0055 26.057 88.0055 26.5524C88.0055 27.4355 87.5855 28.1247 86.7455 28.6201C85.9055 29.094 84.7424 29.3309 83.2562 29.3309C81.8993 29.3309 80.6716 29.137 79.5731 28.7493C78.4747 28.3401 77.527 27.7801 76.7301 27.0693C75.9547 26.337 75.3516 25.4647 74.9208 24.4524C74.4901 23.4401 74.2747 22.3201 74.2747 21.0924C74.2747 19.6709 74.5008 18.4324 74.9531 17.377C75.427 16.3001 76.0624 15.417 76.8593 14.7278C77.6562 14.0386 78.5716 13.5216 79.6054 13.177C80.6608 12.8324 81.7701 12.6601 82.9331 12.6601C84.4839 12.6601 85.6793 12.9401 86.5193 13.5001C87.3593 14.0601 87.7793 14.7816 87.7793 15.6647C87.7793 16.074 87.6824 16.4616 87.4885 16.8278C87.2947 17.1724 87.0685 17.474 86.8101 17.7324C86.4439 17.5601 86.0024 17.3986 85.4855 17.2478C84.9685 17.0755 84.4085 16.9893 83.8055 16.9893Z" fill="#003E66"/>
+<path d="M91.2769 8.78318C91.2769 7.96472 91.5461 7.27549 92.0845 6.71549C92.6445 6.15549 93.3769 5.87549 94.2815 5.87549C95.1861 5.87549 95.9076 6.15549 96.4461 6.71549C97.0061 7.27549 97.2861 7.96472 97.2861 8.78318C97.2861 9.60164 97.0061 10.2909 96.4461 10.8509C95.9076 11.4109 95.1861 11.6909 94.2815 11.6909C93.3769 11.6909 92.6445 11.4109 92.0845 10.8509C91.5461 10.2909 91.2769 9.60164 91.2769 8.78318ZM97.0276 28.814C96.7907 28.857 96.4353 28.9109 95.9615 28.9755C95.5092 29.0616 95.0461 29.1047 94.5722 29.1047C94.0984 29.1047 93.6676 29.0724 93.2799 29.0078C92.9138 28.9432 92.6015 28.814 92.343 28.6201C92.0845 28.4263 91.8799 28.1678 91.7292 27.8447C91.5999 27.5001 91.5353 27.0586 91.5353 26.5201V13.3709C91.7722 13.3278 92.1169 13.274 92.5692 13.2093C93.043 13.1232 93.5169 13.0801 93.9907 13.0801C94.4646 13.0801 94.8845 13.1124 95.2507 13.177C95.6384 13.2416 95.9615 13.3709 96.2199 13.5647C96.4784 13.7586 96.6722 14.0278 96.8015 14.3724C96.9522 14.6955 97.0276 15.1263 97.0276 15.6647V28.814Z" fill="#003E66"/>
+<path d="M107.89 25.357C108.256 25.357 108.655 25.3247 109.086 25.2601C109.538 25.174 109.872 25.0663 110.087 24.937V22.3524L107.761 22.5463C107.158 22.5893 106.663 22.7186 106.275 22.934C105.887 23.1493 105.693 23.4724 105.693 23.9032C105.693 24.334 105.855 24.6893 106.178 24.9693C106.523 25.2278 107.093 25.357 107.89 25.357ZM107.632 12.6601C108.795 12.6601 109.85 12.7786 110.798 13.0155C111.767 13.2524 112.586 13.6186 113.253 14.114C113.943 14.5878 114.47 15.2016 114.836 15.9555C115.203 16.6878 115.386 17.5601 115.386 18.5724V25.8093C115.386 26.3693 115.224 26.8324 114.901 27.1986C114.6 27.5432 114.233 27.8447 113.803 28.1032C112.403 28.9432 110.432 29.3632 107.89 29.3632C106.749 29.3632 105.715 29.2555 104.789 29.0401C103.884 28.8247 103.098 28.5016 102.43 28.0709C101.784 27.6401 101.278 27.0909 100.912 26.4232C100.567 25.7555 100.395 24.9801 100.395 24.097C100.395 22.6109 100.836 21.4693 101.72 20.6724C102.603 19.8755 103.97 19.3801 105.823 19.1863L110.055 18.734V18.5078C110.055 17.8832 109.775 17.4416 109.215 17.1832C108.676 16.9032 107.89 16.7632 106.856 16.7632C106.038 16.7632 105.241 16.8493 104.466 17.0216C103.69 17.194 102.99 17.4093 102.366 17.6678C102.086 17.474 101.849 17.1832 101.655 16.7955C101.461 16.3863 101.364 15.9663 101.364 15.5355C101.364 14.9755 101.493 14.534 101.752 14.2109C102.032 13.8663 102.452 13.5755 103.012 13.3386C103.636 13.1016 104.369 12.9293 105.209 12.8216C106.07 12.7139 106.878 12.6601 107.632 12.6601Z" fill="#003E66"/>
+<path d="M23.8865 15.394L15.325 6.66464C14.2639 5.58281 12.5437 5.58281 11.4826 6.66464L2.92112 15.394C1.86009 16.4759 1.86009 18.2299 2.92112 19.3117L11.4826 28.0411C12.5437 29.1229 14.2639 29.1229 15.325 28.0411L23.8865 19.3117C24.9475 18.2299 24.9475 16.4759 23.8865 15.394Z" fill="#5FDDCF" stroke="#003E66" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="25.5771" y1="1.5" x2="25.5771" y2="10.2647" stroke="#003E66" stroke-width="3" stroke-linecap="round"/>
+<line x1="29.5" y1="5.02954" x2="22.1154" y2="5.02954" stroke="#003E66" stroke-width="3" stroke-linecap="round"/>
+</svg>
--- a/src/assets/tailwind.css
+++ b/src/assets/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,14 @@
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+
+import App from "./App.vue";
+import router from "./router";
+
+import "./assets/tailwind.css";
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+
+app.mount("#app");
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory } from "vue-router";
+import MainContainer from '../views/MainContainer.vue';
+import Login from '@/views/Login/index.vue';
+
+const routes = [
+  {
+    path: "",
+    component: MainContainer,
+    childeren: [
+      {
+        path: "/Login",
+        name: "Login",
+        component: Login,
+      }
+    ]
+  },
+];
+
+const base_url = import.meta.env.BASE_URL;
+const router = createRouter({
+  history: createWebHistory(base_url),
+  routes
+});
+
+export default router;
--- a/src/stores/counter.js
+++ b/src/stores/counter.js
@@ -0,0 +1,19 @@
+import { ref, computed } from "vue";
+import { defineStore } from "pinia";
+
+const useCounterStore = defineStore("counter", () => {
+  const count = ref(0);
+  const doubleCount = computed(() => count.value * 2);
+
+  function increment() {
+    count.value++;
+  }
+
+  return {
+    count,
+    doubleCount,
+    increment
+  };
+})
+
+export default useCounterStore;
--- a/src/views/Login/index.vue
+++ b/src/views/Login/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>這是 Login 頁</h1>
+</template>
--- a/src/views/MainContainer.vue
+++ b/src/views/MainContainer.vue
@@ -0,0 +1,16 @@
+<template>
+  <header>
+    <Header />
+  </header>
+  <h1>這是 MainContainer 頁</h1>
+</template>
+
+<script>
+import Header from "./header/index.vue"
+
+export default {
+  components: {
+    Header,
+  },
+};
+</script>
--- a/src/views/header/index.vue
+++ b/src/views/header/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <h1>這是 Header 頁</h1>
+  <div class="flex flex-col relative h-full">
+        <div class="w-full flex">
+            <img src="../../assets/DSP_LOGO.svg" class="h-10"/>
+        </div>
+        <div class="flex w-full bg-[#61696F] text-white justify-between shadow-md shadow-black:opacity-25 z-20 h-[2.5rem]">
+            <div class="pl-2 flex w-1/3">
+                <span class="m-2 leading-6 pr-4 cursor-pointer border-r border-white "
+                >
+                  Save
+                </span>
+            </div>
+            <div class="pl-2 flex items-center w-1/3 justify-center">
+                <a-breadcrumb class="flex text-[#c0c0c0]">
+                    <a-breadcrumb-item>name</a-breadcrumb-item>
+                    <a-breadcrumb-item>name</a-breadcrumb-item>
+                </a-breadcrumb>
+            </div>
+            <div class="w-1/3"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+</script>
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx,vue}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,41 @@
+import { fileURLToPath, URL } from "node:url";
+import { defineConfig, loadEnv } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+export default defineConfig(({ mode }) => {
+  // 取得 Vite 環境變數
+  const env = loadEnv(mode, process.cwd()).VUE_APP_API_URL;
+
+  return{
+    plugins: [vue()],
+    transpileDependencies: true,
+    // 設定路徑別名
+    resolve: {
+      alias: {
+        "@": fileURLToPath(new URL("./src", import.meta.url)), // EX:"/@/components/Header.vue"
+        '/images': 'src/assets/images', // EX:<img src="/images/logo.png">
+      }
+    },
+    devServer: {
+      host: 'localhost',
+      port: 58249,
+      proxy: {
+        '/api': {
+          target: env, // 指向後台伺服器位置
+          changeOrigin: true,
+          rewrite: path => path.replace(/^\/api/, ''), // 修改實際的 Request Url，將 '/api' 用 '' 替代
+        }
+      },
+      // hmr: {
+      //   host: 'localhost',
+      //   port: 3001,
+      //   protocol: 'wss',
+      // }
+    },
+    build: {
+      commonjsOptions: {
+        transformMixedEsModules: true, // Enable @walletconnect/web3-provider which has some code in CommonJS
+      }
+    },
+  }
+});