title: How to fix the error "You may need an appropriate loader to handle this file type"
body: <p>I have a fresh Laravel installation. On compiling files using <code>npm run dev VUE</code> I get a file error</p>
  <blockquote>
  <p>&quot;You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file&quot;</p>
  </blockquote>
  <p><strong>Laravel Verion</strong>: &quot;^8.12&quot;</p>
  <p><strong>Package.json</strong></p>
  <pre><code> &quot;devDependencies&quot;: {
          &quot;axios&quot;: &quot;^0.21&quot;,
          &quot;laravel-mix&quot;: &quot;^6.0.6&quot;,
          &quot;lodash&quot;: &quot;^4.17.19&quot;,
          &quot;vue&quot;: &quot;^2.5.17&quot;,
          &quot;vue-loader&quot;: &quot;^15.9.6&quot;,
          &quot;vue-template-compiler&quot;: &quot;^2.6.10&quot;
      }
  </code></pre>
  <p><strong>blade file</strong></p>
  <pre><code> &lt;div id=&quot;app&quot;&gt;
          &lt;hello&gt;&lt;/hello&gt;
      &lt;/div&gt;
      &lt;script src=&quot;{{mix('js/app.js')}}&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p><strong>app.js</strong></p>
  <pre><code>require('./bootstrap');
  import  Vue from  'vue'    
  Vue.component('hello', require('./hello.vue').default);
  const app = new Vue({
      el: '#app'
  });
  </code></pre>
  <p><strong>Hello.vue</strong></p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          Hello World!
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
  
  }
  &lt;/script&gt;
  </code></pre>
  <p><strong>npm run dev</strong></p>
  <pre><code>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
  &gt; &lt;template&gt;
  |     &lt;div&gt;
  |         Hello World!
  </code></pre>