title: Laravel Mix Vue 3 - Can't compile "TypeError: Cannot read property 'resolve' of undefined"
body: <p>I'm trying to upgrade my Laravel 8 with Vue 2 to Vue 3. I changed all the packages in my package.json to support the new Vue 3 dependencies. I can't even compile a simple test app with Vue 3. The error i'm getting when I try to build isn't giving me much information.</p>
  <p>Any one know how to fix this error when I try to &quot;yarn watch&quot;?</p>
  <pre><code>λ yarn watch
  yarn run v1.22.5
  $ mix watch
  [webpack-cli] TypeError: Cannot read property 'resolve' of undefined
      at Alias.register (c:\wamp\www\Stipender\node_modules\laravel-mix-alias\index.js:8:37)
      at Object.components.&lt;computed&gt; [as alias] (c:\wamp\www\Stipender\node_modules\laravel-mix\src\components\ComponentRegistrar.js:133:53)
      at Object.&lt;anonymous&gt; (c:\wamp\www\Stipender\webpack.mix.js:15:5)
      at Module._compile (c:\wamp\www\Stipender\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
      at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
      at Module.load (node:internal/modules/cjs/loader:973:32)
      at Function.Module._load (node:internal/modules/cjs/loader:813:14)
      at Module.require (node:internal/modules/cjs/loader:997:19)
      at require (c:\wamp\www\Stipender\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
      at module.exports (c:\wamp\www\Stipender\node_modules\laravel-mix\setup\webpack.config.js:4:5)
  error Command failed with exit code 2.
  info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre><code>{
      &quot;private&quot;: true,
      &quot;scripts&quot;: {
          &quot;development&quot;: &quot;mix&quot;,
          &quot;watch&quot;: &quot;mix watch&quot;,
          &quot;watch-poll&quot;: &quot;mix watch -- --watch-options-poll=1000&quot;,
          &quot;hot&quot;: &quot;mix watch --hot&quot;,
          &quot;production&quot;: &quot;mix --production&quot;
      },
      &quot;devDependencies&quot;: {
          &quot;@babel/core&quot;: &quot;^7.12.10&quot;,
          &quot;@babel/helper-validator-option&quot;: &quot;^7.12.11&quot;,
          &quot;@babel/plugin-proposal-optional-chaining&quot;: &quot;^7.12.7&quot;,
          &quot;@babel/plugin-transform-runtime&quot;: &quot;^7.12.10&quot;,
          &quot;@babel/polyfill&quot;: &quot;^7.11.5&quot;,
          &quot;@babel/preset-env&quot;: &quot;^7.12.11&quot;,
          &quot;@fortawesome/fontawesome-pro&quot;: &quot;^5.15.1&quot;,
          &quot;@vue/cli-plugin-babel&quot;: &quot;^4.5.10&quot;,
          &quot;@vue/compiler-sfc&quot;: &quot;^3.0.2&quot;,
          &quot;babel-loader&quot;: &quot;^8.2.2&quot;,
          &quot;cross-env&quot;: &quot;^7.0.3&quot;,
          &quot;jquery&quot;: &quot;^3.5.1&quot;,
          &quot;laravel-mix&quot;: &quot;^6.0.9&quot;,
          &quot;lodash&quot;: &quot;^4.17.20&quot;,
          &quot;node-sass&quot;: &quot;^5.0.0&quot;,
          &quot;resolve-url-loader&quot;: &quot;^3.1.2&quot;,
          &quot;sass&quot;: &quot;^1.32.2&quot;,
          &quot;sass-loader&quot;: &quot;^10.0&quot;,
          &quot;vue-loader&quot;: &quot;^16.1.2&quot;
      },
      &quot;dependencies&quot;: {
          &quot;@vee-validate/rules&quot;: &quot;^4.0.4&quot;,
          &quot;admin-lte&quot;: &quot;^3.0.5&quot;,
          &quot;axios&quot;: &quot;^0.21.1&quot;,
          &quot;bootstrap&quot;: &quot;^4.5.3&quot;,
          &quot;chart.js&quot;: &quot;^2.9.3&quot;,
          &quot;dayjs&quot;: &quot;^1.10.2&quot;,
          &quot;laravel-mix-alias&quot;: &quot;^1.0.2&quot;,
          &quot;mitt&quot;: &quot;^2.1.0&quot;,
          &quot;moment&quot;: &quot;^2.29.1&quot;,
          &quot;owl.carousel&quot;: &quot;^2.3.4&quot;,
          &quot;popper.js&quot;: &quot;^1.16.1&quot;,
          &quot;primevue&quot;: &quot;3.1.1&quot;,
          &quot;simple-line-icons&quot;: &quot;^2.5.5&quot;,
          &quot;style-loader&quot;: &quot;^2.0.0&quot;,
          &quot;sweetalert2&quot;: &quot;^10.13.0&quot;,
          &quot;v-calendar&quot;: &quot;^2.1.6&quot;,
          &quot;vee-validate&quot;: &quot;^4.0&quot;,
          &quot;vue&quot;: &quot;^3.0.5&quot;,
          &quot;vue-recaptcha-v3&quot;: &quot;^2.0.0&quot;,
          &quot;vue-router&quot;: &quot;^4.0.0-beta.13&quot;,
          &quot;vue-slider-component&quot;: &quot;^3.2.11&quot;,
          &quot;vuex&quot;: &quot;^4.0.0-rc.2&quot;,
          &quot;wowjs&quot;: &quot;^1.1.3&quot;
      }
  }
  </code></pre>
  <p><strong>webpack.mix.js</strong></p>
  <pre><code>const mix = require('laravel-mix');
  require('laravel-mix-alias');
  
  /*
   |--------------------------------------------------------------------------
   | 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.alias({
      '@': '/node_modules',
      '~': '/node_modules',
  })
      .autoload({ 'jquery': ['window.$', 'window.jQuery', '$', 'jQuery'] })
      .js('resources/website/js/Vue3test.js', 'public/website/js').vue()
      .sass('resources/website/css/app.scss', 'public/website/css')
      .copyDirectory('resources/website/images','public/website/images')
      .copyDirectory('resources/website/images','public/images')
      .copyDirectory('resources/views/emails/images','public/images/email')
  
  
      .sourceMaps();
  </code></pre>