extension.js icon indicating copy to clipboard operation
extension.js copied to clipboard

Build fails due to Node.js modules being included in the browser bundle

Open ghost opened this issue 6 months ago • 0 comments

Description:

When building a browser extension using the extension package, the build fails because Node.js-specific modules like fs, path, and os are being included in the browser bundle. This happens because chokidar, a dependency of extension, is not configured to be excluded from the browser build.

Steps to Reproduce:

  1. Create a new browser extension project using the extension package.
  2. Add a dependency that uses chokidar (e.g., @hey-api/openapi-ts).
  3. Run the build command (npm run dev or npm run build).
  4. The build will fail with errors like Module not found: Can't resolve 'fs'.

Expected Behavior:

The build should succeed, and the Node.js-specific modules should not be included in the browser bundle.

Actual Behavior:

The build fails with errors indicating that Node.js-specific modules cannot be resolved.

Environment:

  • extension version: Latest
  • Node.js version: 20.18.0
  • package.json:
{
  "private": true,
  "name": "xxx",
  "description": "xxx",
  "version": "0.0.4",
  "author": {
    "name": "xxx",
    "email": "xxx",
    "url": "xxx"
  },
  "license": "MIT",
  "dependencies": {
    "@heroicons/react": "^2.2.0",
    "@tailwindcss/forms": "^0.5.10",
    "@tailwindcss/line-clamp": "^0.4.4",
    "@webext-core/messaging": "^2.3.0",
    "dexie": "^4.0.11",
    "jszip": "^3.10.1",
    "jzip": "^1.0.0",
    "oidc-client-ts": "^3.3.0",
    "process": "^0.11.10",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "webextension-polyfill": "^0.12.0"
  },
  "devDependencies": {
    "@biomejs/biome": "^2.0.6",
    "@hey-api/openapi-ts": "^0.77.0",
    "@types/chrome": "^0.0.328",
    "@types/firefox-webext-browser": "^120.0.4",
    "@types/react": "^19.1.8",
    "@types/react-dom": "^19.1.6",
    "@types/webextension-polyfill": "^0.12.3",
    "autoprefixer": "^10.4.21",
    "extension": "^2.0.0-rc.37",
    "tailwindcss": "^4.1.11",
    "typescript": "^5.8.3"
  },
  "scripts": {
    "dev": "extension dev --webpack-config webpack.config.js --verbose",
    "dev:chrome": "extension dev --browser=chrome",
    "dev:firefox": "extension dev --browser=firefox",
    "dev:edge": "extension dev --browser=edge",
    "start": "extension start",
    "build": "extension build --verbose",
    "build:chrome": "extension build --browser=chrome",
    "build:firefox": "extension build --browser=firefox",
    "build:edge": "extension build --browser=edge",
    "format": "biome format --write .",
    "lint": "biome lint .",
    "check": "biome check --apply .",
    "type-check": "tsc --noEmit",
    "lint:fix": "biome check --apply .",
    "format:fix": "biome format --write .",
    "clean": "rm -rf dist",
    "generate-client": "openapi-ts --input ./openapi.json --output ./client --client @hey-api/client-fetch",
    "generate-firefox-cert": "npx -y mkcert-cli --outDir ./node_modules/extension-develop/dist/certs --cert localhost.cert --key localhost.key",
    "update-manifest-version": "node -e \"const fs = require('fs'); const pkg = require('./package.json'); const manifest = require('./manifest.json'); manifest.version = pkg.version; fs.writeFileSync('./manifest.json', JSON.stringify(manifest, null, 2) + '\\n');\"",
    "version:patch": "npm version patch && npm run update-manifest-version",
    "version:minor": "npm version minor && npm run update-manifest-version",
    "version:major": "npm version major && npm run update-manifest-version",
    "postversion": "npm run update-manifest-version"
  }
}

ghost avatar Jun 29 '25 17:06 ghost