Dale Ellis

Posted on Jul 11, 2019

Issue building Vue app

#vue #typescript

Hi,

I have an application that I’ve been working on and have gotten to the point I want to deploy it somewhere rather than running it locally.

Locally, this runs fine vue-cli-service serve however, when I run vue-cli-service build I get build errors saying that it can’t find modules, basically every import to my own modules fails, for example…

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import MarketOpeningTimeBadge from "@/components/MarketOpeningTimeBadge";

    @Component({
        components: {MarketOpeningTimeBadge}
    })
    export default class MarketOpeningTimes extends Vue {

    }
</script>

Example Error…

 error  in C:/projects/Research and Development/daleellis/sentiment-investment/client/src/components/MarketOpeningTimes.vue

ERROR in C:/projects/Research and Development/daleellis/sentiment-investment/client/src/components/MarketOpeningTimes.vue
12:36 Cannot find module '@/components/MarketOpeningTimeBadge'.
    10 | <script lang="ts">
    11 |     import {Component, Vue} from 'vue-property-decorator';
  > 12 |     import MarketOpeningTimeBadge from "@/components/MarketOpeningTimeBadge";
       |                                    ^
    13 | 
    14 |     @Component({
    15 |         components: {MarketOpeningTimeBadge}
There are no issues when I run serve locally in regards to the application working, but I notice that also displays the errors in the console.

What do I need to do to resolve the build?

Thanks

"vue": "^2.6.10",
"vue-class-component": "^7.0.2",
"vue-property-decorator": "^8.1.0",
"vue-router": "^3.0.3",
"vue-socket.io": "^3.0.7",
"vuetify": "^1.5.5",
"vuex": "^3.0.1",
"vuex-class": "^0.3.2"

Top comments (4)

briwa • Jul 12 '19 • Edited

I think I had this issue before. Just to confirm with you, do you have vue-shim.d.ts file generated by the CLI? Because the way the CLI set up the webpack is that the compiler needed that shim since the .vue files are not recognizable. This is the content of the file:

// vue-shim.d.ts
declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

If it's already there, then it might be a different issue... Let me know.

Dale Ellis • Jul 12 '19

Hi briwa,

I have a shims-vue.d.ts file rather than a vue-shim.d.ts, which has the same content.

I just tried renaming to vue-shim.d.ts but makes no difference.

Noticed on here Microsoft vue TypeScript Starter that its shims rather than shim, tried that and same error.

So I'm confused, should it be vue-shim.d.ts, vue-shims.d.ts or shims-vue.d.ts

This is my file structure

I'm sure my shims-vue.d.ts was generated by the vueui client so I'd hope that was right.

Any suggestions on what to try now?

Thanks,
Dale

briwa • Jul 12 '19

Actually the file name doesn't matter as long as it's there with the .d.ts. Now I'm not too sure what caused yours.

Dale Ellis • Jul 12 '19

Post on another forum suggested adding .vue to the imports and that has gotten rid of those errors

DEV Community

Issue building Vue app

Top comments (4)

Read next

Understanding JavaScript and TypeScript: A Beginner's Guide

Text translation using langchain.js and Gemini in a NestJS application

Prisma Part 1: Your Easy Tutorial to Set up Prisma

A simple example to understand Module Augmentation in TypeScript