Skip to content

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

Open
@LongSimple

Description

@LongSimple

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"
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions