Laravel Vue.js 導入時に沼にハマった件について

Laravel Vue.js 導入時（You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See h）の沼にハマった件について

エンジニアになるために学習３ヶ月目のペーペーなので、
おかしなところありましたら、ビシバシご指摘いただければ幸いです。

前提条件
• Laravel導入済み
• npm 導入済み
• LaravelのTop画面は表示済み

  プロセス

  まずはLaraelディレクトリ内に ・node_modulesディレクトリがあることを確認

  npm install
  

  すると以下エラー発生

  ERROR in ./resources/js/components/ExampleComponent.vue 1:0
  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">
  
  webpack compiled with 1 error
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js`
  npm ERR! Exit status 1
  npm ERR! 
  npm ERR! Failed at the @ development script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  
  npm ERR! A complete log of this run can be found in:
  npm ERR!     /root/.npm/_logs/2021-06-17T14_54_56_915Z-debug.log
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! @ dev: `npm run development`
  npm ERR! Exit status 1
  npm ERR! 
  npm ERR! Failed at the @ dev script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  
  npm ERR! A complete log of this run can be found in:
  npm ERR!     /root/.npm/_logs/2021-06-17T14_54_56_987Z-debug.log
  root@dfe970fbdb5c:/work/backend# npm install
  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/@types/browser-sync/node_modules/fsevents):
  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
  

  npm run dev　をさらに実行後のエラー

  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js`
  npm ERR! Exit status 1
  npm ERR! 
  npm ERR! Failed at the @ development script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  
  npm ERR! A complete log of this run can be found in:
  npm ERR!     /root/.npm/_logs/2021-06-17T14_54_56_915Z-debug.log
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! @ dev: `npm run development`
  npm ERR! Exit status 1
  npm ERR! 
  npm ERR! Failed at the @ dev script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  
  npm ERR! A complete log of this run can be found in:
  npm ERR!     /root/.npm/_logs/2021-06-17T14_54_56_987Z-debug.log
  
  

  原因がわからないが、記事を元に修正

  • [ざっくり記録](https://zakkuri.life/laravel-mix-npm%E3%81%AE%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%82%92upgrade%E3%81%97%E3%81%9F%E3%82%89%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%8F/)
    webpack.mix.js

    const mix = require('laravel-mix');
    
    /*
     |--------------------------------------------------------------------------
     | Mix Asset Management
     |--------------------------------------------------------------------------
     |
     | Mix provides a clean, fluent API for defining some Webpack build steps
     | for your Laravel application. By default, we are compiling the Sass
     | file for the application as well as bundling up all the JS files.
     |
     */
    
    mix.js('resources/js/app.js', 'public/js').vue()  //vue() 追記
       .sass('resources/sass/app.scss', 'public/css');
    
    

    resources/js/app.js

    /**
     * First we will load all of this project's JavaScript dependencies which
     * includes Vue and other libraries. It is a great starting point when
     * building robust, powerful web applications using Vue and Laravel.
     */
    
    require('./bootstrap');
    
    window.Vue = require('vue');
    
    /**
     * The following block of code may be used to automatically register your
     * Vue components. It will recursively scan this directory for the Vue
     * components and automatically register them with their "basename".
     *
     * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
     */
    
    // const files = require.context('./', true, /\.vue$/i)
    // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
    
    Vue.component('example-component', require('./components/ExampleComponent.vue').default);
    
    /**
     * Next, we will create a fresh Vue application instance and attach it to
     * the page. Then, you may begin adding components to this application
     * or customize the JavaScript scaffolding to fit your unique needs.
     */
    
    const app = new Vue({
        el: '#app',
    });
    

    修正後、
    node_modulesディレクトリを削除した後、

    npm install && npm run dev
    

    でエラーはとまる。