症状

percelを導入して、ビルドしたときに以下のエラーが表示された

翻訳すると、「エラー: バンドルの名前は一意である必要があります。名前が競合しています: index.js」
indexが競合してfailしてるとのこと

error

 npm run dev

> hogeapp@1.0.0 dev
> parcel watch src/content.js src/background.js --dist-dir dist

🚨 Build failed.

Error: Bundles must have unique names. Conflicting names: index.js

  AssertionError [ERR_ASSERTION]: Bundles must have unique names. Conflicting names: index.js
      at BundlerRunner.validateBundles (D:\hogeapp\node_modules\@parcel\core\lib\requests\BundleGraphRequest.js:373:27)
      at BundlerRunner.bundle (D:\hogeapp\node_modules\@parcel\core\lib\requests\BundleGraphRequest.js:345:12)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Object.run (D:\hogeapp\node_modules\@parcel\core\lib\requests\BundleGraphRequest.js:123:17)
      at async RequestTracker.runRequest (D:\hogeapp\node_modules\@parcel\core\lib\RequestTracker.js:758:20)
      at async Object.run (D:\hogeapp\node_modules\@parcel\core\lib\requests\ParcelBuildRequest.js:52:7)
      at async RequestTracker.runRequest (D:\hogeapp\node_modules\@parcel\core\lib\RequestTracker.js:758:20)
      at async Parcel._build (D:\hogeapp\node_modules\@parcel\core\lib\Parcel.js:320:11)
      at async Parcel._startNextBuild (D:\hogeapp\node_modules\@parcel\core\lib\Parcel.js:228:24)
      at async $dad2a694f9c45026$export$2e2bcd8739ae039._runFn (D:\hogeapp\node_modules\@parcel\utils\lib\index.js:34252:13)

manifest.json

{
  "manifest_version": 3,
  "name": "hogekinou",
  "version": "1.0",
  "description": "機能の詳細",
  "permissions": [
    "scripting"
  ],
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "dist/content.js"
      ],
      "run_at": "document_idle"
    }
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "background": {
    "service_worker": "dist/background.js"
  },
  "action": {
    "default_title": "Hoge Kinou"
  }
}

package.json

{
  "name": "hogeapp",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "parcel watch src/content.js src/background.js --dist-dir dist",
    "build": "parcel build src/content.js src/background.js --dist-dir dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "parcel": "^2.15.2"
  }
}

解決策

ビルド際にcontent.jsとbackground.jsが、同じフォルダのindex.jsというファイルで作成されてるからエラーが出ていた

作成される先のフォルダを別々に作成し、そこで作成されるようにすることでエラーが解消した

具体的には、scriptsの箇所を以下にした

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev:content": "parcel watch src/content.js --dist-dir dist/content",
    "dev:background": "parcel watch src/background.js --dist-dir dist/background",
    "dev": "npm run dev:content & npm run dev:background",
    "build": "parcel build src/content.js --dist-dir dist/content && parcel build src/background.js --dist-dir dist/background"
  },