I'm attempting to upgrade a Vue 2 project to Vue 3 using the migration build and vite (https://v3.vuejs.org/guide/migration/migration-build.html#overview)

I've done steps 1-4 (though skipped 4, since not using typescript). At this point, I get the following error:

src/main.js:3:16: error: No loader is configured for ".vue" files: src/App.vue

Despite the message, the issue appears to be with the @ alias, because if I change import App from '@/App.vue'; to import App from './App.vue'; in main.js it works fine. Any ideas? I have tried changing the alias to /src/ as well.

On the one hand, that seems like an easy fix, but on the other there are a bunch of other imports throughout the project that would have to be rewritten.

main.js:

import Vue from 'vue';
import App from '@/App.vue';

Vue.config.productionTip = false;

let app = new Vue({
  render: h => h(App)
}).$mount('#app');

vite.config.js

import { defineConfig } from 'vite';
import createVuePlugin from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [ 
      createVuePlugin({
        template: {
          compilerOptions: {
            compatConfig: {
              MODE: 2
            }
          }
        }
      }),
    ],
  resolve: {
    alias: {
      '@/': path.resolve(__dirname, './src/'),
      'vue': '@vue/compat',
    },
  },
});

package.json

{
  "name": "xxx",
  "version": "0.1.0",
  "dependencies": {
    "@vue/compat": "^3.1.0",
    "vue": "^3.1.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.2.2",
    "@vue/compiler-sfc": "^3.1.0",
    "vite": "^2.4.1"
  }
}

I was unable to get a reproduction running in codesandbox (it doesn't appear to like the alias statements in vite.config.js at all). But this repo shows the behavior: https://github.com/dovrosenberg/vite-vue-alias-issue

The error changes sometimes (for no reason apparent to me) when using this repo to: Internal server error: Failed to resolve import "@/App.vue" from "src/main.js". Does the file exist?'