error: Two output files share the same path but have different contents
とエラーが出たが日本語での解決記事が見当たらなかったので投稿する。
事象
Reactで開発中に発生し、画面が表示されなくなった。
デザインの実装のためにnpmでインストールして開発を進めると発生した。
npm install @emotion/react
npm install @emotion/styled
解決策
次のコマンドを実行。これだけでよい。
npm dedupe
dedupeとは重複を排除するという意味。
対応後の感想
バージョン管理だからといって安易にpackage.jsonの中身のバージョンをいじるものではないなと思った。
私はいじってしまったのでまた余計なエラーがでて、
reactを再インストールしなければならなくなった。(言うほど大変ではないが)
ここらへんは依存関係とnpmについて深い理解がないので、対処方法までの記載とする。
さらに調べて理解が進めば追記するかも。
対応後のpackage.jsonの中身
ちなみに、本エラー対応後のpackage.jsonの一部はこれだ。
参考になれば嬉しい。
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"sass": "^1.87.0",
"styled-components": "^6.1.17",
"styled-jsx": "^5.1.6"
},
"devDependencies": {
"@eslint/js": "^9.22.0",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.22.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^16.0.0",
"vite": "^6.3.1"
}
参考