Encountering an error while compiling after creating PostService.js and making an API call. The error message reads:
ERROR Failed to compile with 1 errors 12:54:44 AM
This relative module was not found:
* ../components/PostFrom.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js&
Following is a list of my development dependencies in package.json:
"devDependencies": {
"@vue/cli-plugin-babel": "^4.4.6",
"@vue/cli-plugin-eslint": "^4.4.6",
"@vue/cli-service": "^4.4.6",
"babel-eslint": "^10.1.0",
"eslint": "^7.5.0",
"eslint-plugin-vue": "^6.2.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.11"
},
Here is a breakdown of my file structure:
src
assets
components
Navbar.vue
PostForm.vue
views
About.vue
Home.vue
App.vue
main.js
PostService.js
router.js
App.vue
<template>
<div>
<Navbar></Navbar>
<div class="container">
<router-view></router-view>
</div>
</div>
</template>
<script>
import Navbar from "./components/Navbar";
import "../node_modules/materialize-css/dist/css/materialize.min.css";
import "../node_modules/materialize-css/dist/js/materialize.min.js";
export default {
name: "App",
components: {
Navbar,
},
};
</script>
<style></style>
Home.vue
PostForm.vue
PostService.js
main.js
Have attempted various troubleshooting steps like reinstallation of node_modules, clearing cache folders, and npm updates without success. Vue version being used is 4.1.2 along with node version 12.14.0. Any assistance on resolving this issue would be highly appreciated. Thank you for your help.