title: Vue 3: TypeError: compiler.parseComponent is not a function
body: <p>I can't seem to get rid of this error.</p>
  <p>I've tried removing <code>package-lock.json</code> &amp; <code>node_modules</code> followed by <code>npm install</code>, but, it's not working.</p>
  <ul>
  <li>Node Version: <code>12.18.3</code><br></li>
  <li>NPM Version: <code>6.14.8</code></li>
  </ul>
  <p>Any help is appreciated!</p>
  <hr />
  <p><strong>Lovely Error</strong></p>
  <pre><code>ERROR in ./src/scripts/Test.vue
  Module build failed (from ./node_modules/vue-loader/lib/index.js):
  TypeError: compiler.parseComponent is not a function
      at parse (some path\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
      at Object.module.exports (some path\node_modules\vue-loader\lib\index.js:67:22)
   @ ./src/scripts/app.js 8:0-30 10:10-14
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre><code>{
      &quot;name&quot;: &quot;app&quot;,
      &quot;version&quot;: &quot;1.0.0&quot;,
      &quot;description&quot;: &quot;&quot;,
      &quot;private&quot;: true,
      &quot;scripts&quot;: {
          &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;
      },
      &quot;keywords&quot;: [],
      &quot;author&quot;: &quot;&quot;,
      &quot;license&quot;: &quot;ISC&quot;,
      &quot;devDependencies&quot;: {
          &quot;@vue/compiler-sfc&quot;: &quot;^3.0.2&quot;,
          &quot;vue-loader&quot;: &quot;^15.9.4&quot;,
          &quot;webpack&quot;: &quot;^4.44.1&quot;,
          &quot;webpack-cli&quot;: &quot;^3.3.12&quot;
      },
      &quot;dependencies&quot;: {
          &quot;vue&quot;: &quot;^3.0.2&quot;
      }
  }
  </code></pre>
  <p><strong>webpack.config.js</strong></p>
  <pre><code>const path = require('path');
  const VueLoaderPlugin = require('vue-loader/lib/plugin');
  
  module.exports = {
      mode: 'development',
      entry: './src/scripts/app.js',
      output: {
          filename: 'scripts/app.js'
      },
      plugins: [
          new VueLoaderPlugin()
      ],
      module: {
          rules: [
              {
                  test: /\.vue$/,
                  use: [
                      {
                          loader: 'vue-loader',
                          options: {
                              // Fixes the &quot;vue-template-compiler&quot; error.
                              compiler: require('@vue/compiler-sfc')
                          }
                      }
                  ]
              }
          ]
      },
      watch: true
  };
  </code></pre>
  <p><strong>src/scripts/app.js</strong></p>
  <pre><code>import { createApp } from 'vue';
  import Test from './Test.vue';
  
  createApp(Test).mount('#app');
  </code></pre>
  <p><strong>src/scripts/Test.vue</strong></p>
  <pre><code>&lt;template&gt;
      &lt;p&gt;{{ message }}&lt;/p&gt;&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data() {
              return {
                  message: &quot;I'm giving up!&quot;
              }
          }
      }
  &lt;/script&gt;
  </code></pre>