I'm currently working on a Vue.js 3 application demo using tailwind and typescript. Each time I try to run the app, I encounter an error message that says:
This relative module was not found:
* ./src/main.js in multi (webpack)-dev-server/client?https://192.168.2.102:8090&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
main.ts
import { createApp } from 'vue';
import App from './App.vue'
import router from './router'
import './styles/app.css';
createApp(App)
.use(router)
.mount('#app');
App.vue
<template>
<div class="justify-center flex bg-yellow-300 items-center h-screen">
<div class="text-4xl">
{{ hello }} 👋🏼
</div>
</div>
</template>
<script lang="ts">
import {Vue} from "vue-property-decorator";
export default class App extends Vue {
hello = 'Hello world'
}
</script>
vue.config.js
module.exports = {
devServer: {
proxy: {
'^/api': {
target: 'http://localhost:8081'
}
}
}
}
package.json
{
"name": "demo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port 8090 --https true",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-property-decorator": "^9.1.2",
"vue-router": "^4.0.12"
},
Has anyone faced this issue before as well?