Embarked on a fresh Vue2 project with Vite as the build tool. My aim is to enforce user login through Cognito using Amplify.
However, when I execute npm run dev, I encounter the following issue:
VITE v3.1.3 ready in 405 ms
➜ Local: http://127.0.0.1:5173/
➜ Network: use --host to expose
✘ [ERROR] Could not read from file: /Users/thename/dev/mwt-notification-backend/example-vue/vue/dist/vue.runtime.esm.js
node_modules/@aws-amplify/ui-vue/dist/index.js:1:496:
1 │ ...ss, createTextVNode, Fragment, renderList, onBeforeMount, useAttrs, withModifiers, h as h$2, onUnmounted } from "vue";
╵ ~~~~~
/Users/reikschatz/dev/mwt-notification-backend/example-vue/node_modules/esbuild/lib/main.js:1566
let error = new Error(`${text}${summary}`);
I'm unsure why this error is occurring, but here are the relevant files:
package.json
"dependencies": {
"@aws-amplify/core": "^4.7.5",
"@aws-amplify/ui-vue": "^2.4.22",
"aws-amplify": "^4.3.36",
"buefy": "^0.9.22",
"vue": "^2.7.10"
},
main.js
import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
import App from './App.vue';
import Amplify from '@aws-amplify/core';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
Vue.use(Buefy);
new Vue({
render: (h) => h(App),
}).$mount('#app');
App.vue
<script>
import { Authenticator } from '@aws-amplify/ui-vue';
import '@aws-amplify/ui-vue/styles.css';
export default {
components: { Authenticator },
};
</script>
<template>
<authenticator> ... </authenticator>
</template>
vite.config.js
import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';
import vue2 from '@vitejs/plugin-vue2';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue2(),
legacy({
targets: ['ie >= 11'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
});