CODEWITHSUNDEEP
javascriptvue.jsnpm
Augusto
Augusto

Reputation: 4243

Custom module "was not found" on import - VueJS project

I've created a custom component called RegisterPayMonthlyDialog.vue on my source tree. The problem is that when it is imported on the view Monthly.vue the npm can't find the module.

error

 ERROR  Failed to compile with 1 errors                                                         11:06:29 PM

This dependency was not found:

* @/components/dialogs/RegisterPayMonthlyDialog in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./nod
e_modules/babel-loader/lib!./node_modules/vuetify-loader/lib/loader.js??ref--18-0!./node_modules/cache-load
er/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Monthly.vue?vue&type
=script&lang=js&

To install it, you can run: npm install --save @/components/dialogs/RegisterPayMonthlyDialog

source tree

enter image description here

Monthly.vue

<template>
  <v-container class="pa-5">
    <h3>Mensalidades</h3>
  </v-container>
</template>

<script>
import RegisterPayMonthlyDialog from "@/components/dialogs/RegisterPayMonthlyDialog"; // can't find it

export default {
  name: "Monthly",
  components: {
    RegisterPayMonthlyDialog
  },
  data() {
    return {
      showPayMonthyDialog: false
    };
  }
};
</script>

RegisterPayMonthlyDialog.vue

<template>
  <div class="text-center">
    <v-dialog v-model="show" width="500">
      <v-card>
        <v-card-title primary-title class="title">Pagamento de mensalidade</v-card-title>
      </v-card>
    </v-dialog>
  </div>
</template>s

<script>
export default {
  name: "RegisterPayMonthlyDialog",
  data() {
    return {};
  },
  props: {
    show: Boolean
  }
};
</script>

Upvotes: 0

Views: 265

Answers (1)

Qonvex620
Qonvex620

Reputation: 3972

You had a typo error. see code below

Your are importing this file named RegisterPayMonthlyDialog, but your file was named as RegisterPayMonhtlyDialog,

To solve it, change your file name to RegisterPayMonthlyDialog.vue

and import it like this

import RegisterPayMonthlyDialog from "@/components/dialogs/RegisterPayMonthlyDialog"

Upvotes: 1

Related Questions