npm run devエラーについて

Comments

1. 

   @mar-gitacount

   Questioner

   more_horiz

   毎度お世話になります。
   ご指摘の通りnpm install --save-dev cross-env を実行しcross-envを実行した後に
   nppm run devを実行したのですが、
   webpack関係のエラーが吐かれてしまい、滞ってしまいました。
   以下のエラー文を読む限り、`loaders`というものがnotfindだよと書かれていたので
   npm install --save-dev css-loader ts-loaderした後に再度npm run devとしてもまた同じエラー文です、、
2. 

   @uasi

   more_horiz

   Webpack の設定ファイルに loaders 項目が書かれているせいでエラーが出ています。この項目は古いバージョンの Webpack で使えましたが Webpack 4 で非対応になりました。
   
   Webpack の設定ファイルは laravel-mix パッケージが提供しているものを使っているようです。 laravel-mix が古いせいで設定ファイルの形式が古いと思われます。 npm install --save-dev laravel-mix@latest を実行してアップデートしてください。
3. 

   @mar-gitacount

   Questioner

   more_horiz

   ありがとうございます。おっしゃった通り　 npm install --save-dev laravel-mix@latest　の後にnpm run dev を実行したら、うまくいきました。
   ネットの記事でpackage.json ファイルを書き換えるなども散見されましたがどれもうまくいかなかったので助かりました。
4. 

   @mar-gitacount

   Questioner

   more_horiz

   一応思ったwebページを表示することができたのですが、
   コンソールにて
   Uncaught Error: Module parse failed: Unexpected token (1:0)
   You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
   > <template>
   | <div class="container">
   | <div class="row justify-content-center">
   というエラーが吐かれました。
   ネットで検索するとweb.config.jsを書き換えるとエラーが出なくなるとかいてあったのでプロジェクトのルートにweb.config.jsを作り以下構文を書いたのですが、
   
   
   const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
   const webpack = require('webpack'); //to access built-in plugins
   
   module.exports = {
   module: {
   rules: [
   { test: /\.txt$/, use: 'raw-loader' }
   ]
   },
   plugins: [
   new HtmlWebpackPlugin({template: './src/index.html'})
   ]
   };
   効果がありませんたびたび申し訳ございません。がなにか方法はありますでしょうか？？
5. 

   @uasi

   more_horiz

   どのページを参考にされたか分かりませんが、 Webpack の設定ファイルは webpack.config.js です。参考にされたページは書いていただけると助かります。ページの説明が間違っている場合もあるので。
   
   さらに、 laravel-mix を使っている場合は webpack.config.js ではなく、 webpack.mix.js で設定する必要があります。 https://laravel-mix.com/docs/6.0/installation
   
   さらに、このエラーは Webpack の設定で直るかどうかも分かりません。アプリケーションの JavaScript の記述が間違っている可能性もあるからです。エラーに発生場所のファイル名も出ていませんか？　それがあれば何か分かるかもしれません。
6. 

   @mar-gitacount

   Questioner

   more_horiz

   
   因みに参考にしたサイトは、、
   https://webpack.js.org/concepts/#loaders
   
   プロジェクトのルートにwebpack.mix.js確認できました。
   webpack.mix.jsではなくwebpack.mix.jsの件は了解しました。ありがとうございます。
   因みにエラー文の全容は以下に貼り付けます。
   
   
7. 

   @uasi

   more_horiz

   なるほど、公式ページなので書いてあることはまず正しいと思います。
   
   出ているエラーですが、 Vue の単一ファイルコンポーネントを読み込もうとしているようです。 https://jp.vuejs.org/v2/guide/single-file-components.html
   
   アプリケーションの中に拡張子が .vue のファイルはありませんか？　それを処理するためには webpack.mix.js に別途設定を書く必要があります。アプリケーションの構成や Vue, Webpack, laravel-mix のバージョンによって設定が異なるので、ここですぐ説明することはできません。
8. 

   @mar-gitacount

   Questioner

   more_horiz

   .vueファイルとはApp.vueのことだと思ったのですが、あっていますか??
9. 

   @mar-gitacount

   Questioner

   more_horiz

   なにかと付き合わせて申し訳ございません。
   参考になるかわかりませんが、各自バージョン載せておきます。必要な情報があればのせていきたいので言ってくれれば助かります。
   
   -- vue@2.6.12
   
   webpack-cli 4.2.0
   
   webpack 5.11.0
   
   Laravel Framework 8.18.1
10. 

    @uasi

    more_horiz

    App.vue で合っています。
    
    laravel-mix のバージョンはここで回答した手順でアップデートされたのでほぼ最新のはずですね。最新の laravel-mix だと何も設定しなくても Vue に対応しているようです。 https://laravel.com/docs/8.x/mix#vue
    
    ただ、最初に質問された時点で laravel-mix のバージョンが古かったので、 webpack.mix.js の記述も古いままかもしれません。 webpack.mix.js の中に以下のように書いてあげればうまく動くのではないかと思います。
    
    mix.js('resources/js/app.vue', 'public/js');
    
    これを設定しても、 webpack.mix.js の他の古い記述を消す必要があるかもしれないなど、他につまずく可能性がかなりあります。もし動かなければこの質問をクローズ済みにした上で新しい質問を投稿してください。
11. 

    @mar-gitacount

    Questioner

    more_horiz

    app.vueは無く
    webpack.mix.jsファイル内には
    mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');
    という記載がありました。
    そうですね、長くなってしまうので、整理して新しく投稿したいと思います。
    恥ずかしながらフォルダを消していれなおしたところ、またnpm run dev でエラーが出てしまったので、、
12. 

    @uasi

    more_horiz

    あ、中身が Vue の書き方であっても拡張子が .js なことはありますね。すみません。 app.js の中に <template> で始まる HTML 的な記述があれば Vue の書き方です。
    
    次の質問には、 laravel-mix で Vue の単一ファイルコンポーネントを処理できないといったことを書いていただけると答えやすいと思います。あとはバージョン情報、 package.json の中身、 webpack.mix.js の中身、ここでも貼っていただいたエラーのスクリーンショットがあれば。
13. 

    @mar-gitacount

    Questioner

    more_horiz

    クローズした後にqiitaに何度投稿しても404notfundになります、、
    なぜでしょうか