[QUESTION] Compiled build not working! What am I doing wrong!?

Summary

I run yarn dev and all is working as expected. Using yarn build I face several issues:

content-script has errors like function <xyz> is not defined - not working code
paths to css files in popup.html, options.html are wrong

I have no separate configuration (e.g. process.env.NODE_ENV==='production') for different builds

With yarn dev I get the following struct (with working base)

├── assets
│   ├── alert.svg
│   └── ....
├── index.css
├── _locales
│   └── en
│       └── messages.json
├── manifest.json
├── react-jsx-dev-runtime.development.js
├── @react-refresh.js
├── src
│   ├── background
│   │   └── index.js
│   └── pages
│       ├── content
│       │   └── index.js
│       ├── options
│       │   ├── index.html
│       │   └── index.js
│       └── popup
│           ├── index.html
│           └── index.js
└── style.css

Com yarn build:chrome (not working, failing code)

├── assets
│   ├── alert.svg
│   └── ....
├── index.css
├── _locales
│   └── en
│       └── messages.json
├── manifest.json
├── react-jsx-dev-runtime.development.js
├── src
│   ├── background
│   │   └── index.js
│   └── pages
│       ├── content
│       │   └── index.js
│       ├── options
│       │   └── index.html
│       └── popup
│           └── index.html
└── style.css

Manifest:

{
  "name": "XXXX",
  "author": "XXXXX",
  "version": "1.0",
  "manifest_version": 3,
  "description": "An extension to provide services using.....",
  "icons": {
    "16": "assets/icons/icon-16.png",
    "24": "assets/icons/icon-24.png",
    "64": "assets/icons/icon-64.png",
    "128": "assets/icons/icon-128.png"
  },
  "default_locale": "en",
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["src/pages/content/index.tsx"],
      "run_at": "document_idle"
    }
  ],
  "background": {
    "service_worker": "src/background/index.ts"
  },
  "permissions": ["storage", "scripting", "tabs"],
  "host_permissions": ["http://*/*", "https://*/*"],
  "options_ui": {
    "page": "src/pages/options/index.html"
  },
  "action": {
    "default_popup": "src/pages/popup/index.html",
    "default_icon": {
      "16": "assets/icons/icon-16.png",
      "48": "assets/icons/icon-48.png"
    },
    "default_title": "XXXX"
  },
  "web_accessible_resources": [
    {
      "resources": ["assets/*", "src/pages/content/*", "src/pages/options/*", "src/pages/popup/*", "src/background/*"],
      "matches": ["<all_urls>"]
    }
  ]
}

I assume that "default_popup": "src/pages/popup/index.html" would be the entry point to resolve all popup related dependencies... am I right?

tsconfig.js

{
  "compilerOptions": {
    "noEmit": true,
    "noImplicitAny": true,
    "isolatedModules": true,
    "strictNullChecks": true,
    "noImplicitThis": true,
    "baseUrl": "./src",
    "esModuleInterop": true,
    "module": "ESNext",
    "target": "ESNext",
    "allowJs": true,
    "jsx": "react-jsx",
    "sourceMap": true,
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true,
    "allowUmdGlobalAccess": true,
    "resolveJsonModule": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "typeRoots": [
      "node_modules/@types",
      "./src/types"
    ],
  },
  "include": [
    "src",
    "env.d.ts"
  ],
  "exclude": [
    "dist",
    "dev",
    "temp"
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}

The production build is broken - What am I doing wrong?

aklinker1 / vite-plugin-web-extension

[QUESTION] Compiled build not working! What am I doing wrong!? #202

Summary