Help! I've been using Webpack and WordPress for a while, but recently decided to dive into Vue.js. The problem is, I'm completely lost. I managed to integrate Vue with WordPress and Webpack after 5 days of work, but I still don't understand how it all fits together. Now, I'm stuck trying to use Flicking with yarn in my Vue project and I feel like I'm drowning. With so many layers of complexity, I have no idea where to start troubleshooting. Can someone please lend a hand?
I'm encountering the following error:
Uncaught Error: Cannot find module '../../node_modules/@egjs/vue-flicking' at webpackMissingModule (frontend.js?ver=1.1:17476:50) at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[9].use[0]!./assets/src/stickyButton.vue?vue&type=script&lang=js
Here's a snippet of my file structure (excluding irrelevant files and folders):
.
└── theme-folder/
├── frontpage.php (where the component is being used)
├── node_modules
├── package.json (and lock files and such)
└── assets/
└── src/
├── sass/
│ └── frontend.scss
├── js/
│ ├── frontend.js
│ └── header.js
└── stickyButton.vue
stickyButton.vue
<template>
<div class="wrapper">
<Flicking :options="{ renderOnlyVisible: true }">
<div v-for="idx in list" class="flicking-panel" :key="idx">{{ idx }}</div>
</Flicking>
<div class="block is-flex is-justify-content-center">
<span class="button mr-2 is-info is-outlined" @click="() => {
list.splice(0, 0, ...[list[0] - 2, list[0] - 1]);
}">Prepend</span>
<span class="button mr-2 is-info is-outlined" @click="() => {
list.push(list[list.length - 1] + 1, list[list.length - 1] + 2);
}">Append</span>
</div>
</div>
</template>
<script>
import * as Vue from 'vue';
import VueFlicking from "../../node_modules/@egjs/vue-flicking";
Vue.use(VueFlicking);
export default {
name: "stickyButton",
data() {
return {
list: [0, 1, 2, 3, 4]
}
}
}
</script>
<style scoped>
@import url("../../node_modules/@egjs/vue3-flicking/dist/flicking.css");
// Extra css code omitted
</style>
Webpack compiles all the js and outputs in frontend.js:
// WP stuff
import "../sass/frontend.scss"
import "../js/header.js"
//start of vue stuff
import * as Vue from 'vue'
import Flicking from "@egjs/vue3-flicking";
import stickyButton from '../stickyButton.vue'
import { createApp } from 'vue'
const app = createApp(stickyButton)
app.mount('#stickyButton')
I've hit a roadblock and I'm feeling overwhelmed. Any guidance or assistance on why I'm getting this error would be highly appreciated. Thank you!