次のようなエラーが発生し、小一時間ぐらい悩むことになりました。
Webpack: “there are multiple modules with names that only differ in casing” but modules referenced are identical
解決策としてはimport
時のURLに小文字や大文字が混じってないかチェックすることです。
例えば、次の場所にファイルがあったとします。
components/Users/UserForm.vue
あるファイルでこのようにimport
を行います。
import UserForm from '@/components/Users/UserForm'
しかし、違うファイルで次のようにimport
を行ったとします。
import UserForm from '@/components/users/UserForm'
一見どこが違うわからないかもしれませんが、2つ目のimport
はUsers
がusers
になっています。
このエラーの辛いところは、小文字・大文字を区別せずに読み込まれるところです。
片方だけでは露見せず、誤って上記のように混じった時のみ発生します。
https://stackoverflow.com/questions/47534267/webpack-there-are-multiple-modules-with-names-that-only-differ-in-casing-but?rq=1