Vue jsでファイル名の大文字・小文字で発生するエラー

次のようなエラーが発生し、小一時間ぐらい悩むことになりました。

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つ目のimportUsersusersになっています。

このエラーの辛いところは、小文字・大文字を区別せずに読み込まれるところです。

片方だけでは露見せず、誤って上記のように混じった時のみ発生します。

https://stackoverflow.com/questions/47534267/webpack-there-are-multiple-modules-with-names-that-only-differ-in-casing-but?rq=1

Vue jsでアプリケーションがブラウザから見れない時

ボイラーテンプレートで、yarn devなどをすると次のようなメッセージが出てきます。

Your application is running here: http://localhost:8080

ただこれでも見れない時があります。

思いつく原因をいくつか並べて見ます。

ポート番号が被っている

このパターンの場合、そもそも開発サーバーが立ち上がらないはずです。

もしくはよしなに違うポートにバインドしてくれることもあります。

例えば、8080で起動しようとしたが、既に使われていたので8081で変わり起動するなど。

ブラウザのキャッシュが残っている

あんまり考えられないですが、シークレットモードやキャッシュクリアで見れる可能性があります。

回避策

本番環境とは違い、開発環境なので、回避できればなんでも良いわけです。

ポートを占有してみる

勝手に8080で立ち上がるなら、まずは簡易的なサーバーを立ち上げてポートを占有してみたらどうなるのか見てみます。

何でもいいですが、phpでやるならこんな感じです。

php -S localhost:8080

そのあと、nodeを立ち上げてみます。

yarn dev

これでエラーが出れば切り分けができますし、出なければ違う方法を試します。

ポート番号を変更する

何かわからないけれども起動しない。

そんなときはポート番号を変えたほうが早いかもしれません。

ボイラーテンプレートによって違うかもしれませんが、envの設定を変更してみましょう。

次のようキーワードが目安になります。

process.env.PORT

これを変更している値を8081などに上書きして

yarn dev

を実行してみます。

大概これで解決します。

Vue jsでpackage.jsonの情報を読み込む

難しく考えず、requireすれば手っ取り早いです。

例としてはこんな感じ。

<template>
  <div>
    <h1>ホーム</h1>
    <p>Version {{ version }}</p>
  </div>
</template>

<script>
  export default {
    name: 'home',
    data () {
      return {
        version: require('../../../package.json').version
      }
    }
  }
</script>

elecrton-vueでweb用にbuildする

ビルドのコマンドは以下の通りです。
package.jsonに記載があります。

yarn build:web

ビルドされたソースはdis/webに作られます。

ただこのままだと

Uncaught ReferenceError: process is not defined

が発生します。

動作に問題はないのですが、不要なエラーが出ているのが気になるところです。

解決方法としてはindex.htmlの以下の部分を削除します。


参考:
https://github.com/SimulatedGREG/electron-vue/issues/195

解決策は提示されてますが、electron用のテンプレートなので、特に対応しようという感じではないようですね。