Using TypeScript path aliases to resolve import errors

After creating a Vue.js project using Vue CLI 3 and setting up the import statement with the @ alias, I encountered an error when running npm run build. Can you explain why this happened?

Error Message

$ npm run build

> [email protected] build /Users/???/Desktop/example
> vue-cli-service build


⠙  Building for production...Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
⠼  Building for production...

 ERROR  Failed to compile with 1 errors                                                                                 21:07:57

This dependency was not found:

* @/models/Member in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/
babel-loader/lib!./node_modules/ts-loader??ref--13-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader
/lib??vue-loader-options!./src/main/javascript/components/Vote.vue?vue&type=script&lang=ts&

To install it, you can run: npm install --save @/models/Member
 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/???.npm/_logs/2019-04-30T12_07_57_611Z-debug.log

Files

tsconfig.json

    "paths": {
      "@/*": [
        "src/main/javascript/*",
        "src/test/javascript/*"
      ]
    },

src/main/javascript/models/Member.ts

export default class Member {
 ...
}

src/main/javascript/components/Vote.vue

import Member from '@/models/Member'; // import error

Source Code: https://github.com/yoshikit1996/vuejs-exercise

Syntax Highlight

My VSCode can detect import error but didn't detect it with @ alias.

typescriptvue.jsvue-cli-3

Answer №1

To customize aliases in Vue.js, you have the option to utilize either configureWebpack or chainWebpack within the vue.config.js file.

vue.config.js

const path = require('path')
module.exports = {
  chainWebpack: config => {
        config.resolve.alias
        .set('@', path.resolve(__dirname, 'src/main/javascript'));
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhance Vue render function by incorporating slots in child component directly, avoiding the need for a

I'm trying to create a functional component that can dynamically render different components based on a prop. One of the components I need to render is a <v-select>, and I want to pass all slots/props down to it as if it was called directly. < ...

vue.jsvue-render-function

Storing data received from httpClient.get and utilizing it in the future after reading

Searching for a solution to read and store data from a text file, I encountered the issue of variable scope. Despite my attempts to use the data across the project by creating a global variable, it still gets cleared once the variable scope ends. import ...

angulartypescriptangular-httpclient

The @HostListener in Angular2 does not function correctly within a component that is inherited from another component

My Angular2-based client-side application has a base class: abstract class BaseClass { @HostListener('window:beforeunload') beforeUnloadHandler() { console.log('bla'); } } and two similar derived classes: @Component({ ...

angulartypescriptangular2-template

Is it possible for TypeScript to convert a generic enum type into a string at runtime?

Enumerations and interfaces are an important part of my codebase: enum EventId { FOO = 'FOO', BAR = 'BAR', } interface EventIdOptionsMap { [EventId.FOO]: { fooOption: string; }, [EventId.BAR]: { barOption: number; } ...

typescriptenumstypescript-generics

Can Vue instances support private computed properties?

Vue is a versatile tool that I utilize for both service classes and components. When it comes to reactive computeds, they prove to be incredibly beneficial. However, I often find myself wanting a clear way to differentiate between public interface compute ...

typescriptvue.js

Error: The value of the expression has been altered after it was already checked. Initial value was 'undefined'. An exception has occurred

Although this question has been asked multiple times, I have read similar issues and still struggle to organize my code to resolve this particular exception. Within my component, there is a property that dynamically changes based on a condition: public e ...

angulartypescript

What might be causing the transition not to function properly within my Vue components?

I have been working on a Vue application where I have two interconnected components. One of them is named loginRegister.vue and its code is as follows: loginRegister.vue: <template> <BaseModal idBtn = ...

vue.jsvuejs3vitevue-transitionsvue-slot

observe, don't upgrade modify vue

I am attempting to modify a variable by watching and updating it in HTML <p>{{customer.creditsLeft}}</p> using Vue.js data() { customer: {}, } watch: { '$store.state.jobs.listBooking.customer': function (newVal) { this.cust ...

vue.jsredux

Send information from a form to a PHP script using axios

I'm having trouble correctly utilizing axios to send form data to a PHP script. Can anyone confirm if the syntax of my axios code is accurate? Additionally, I would like to know how I can verify the data that is being transmitted via the POST method. ...

phpvue.jsvuejs2http-postvuetify.js

Contrast between employing typeof for a type parameter in a generic function and not using it

Can you explain the difference between using InstanceType<typeof UserManager> and InstanceType<UserManager> I'm trying to understand TypeScript better. I noticed in TS' typeof documentation that SomeGeneric<typeof UserManager> ...

typescript

Directive for Angular 2: Expand Further

Looking to create a custom readmore directive in Angular2 that will collapse and expand long blocks of text based on a specified max height, rather than character count. The directive will include "Read more" and "Close" links. <div read-more [maxHeigh ...

angulartypescriptangular2-templateangular2-directives

Is using $timeout still considered the most efficient method for waiting on an Angular directive template to load?

When it comes to waiting for a directive's template to render, our team has been following the approach of enclosing our DOM manipulation code in a $timeout within the directive's link function. This method was commonly used in the past, but I&ap ...

javascriptangularjstypescriptdirective

Having trouble locating the module while importing MP3 files in a React project

UPDATE The issue stemmed from my limited understanding of the environment I was working in, but the responses provided below may be helpful for others facing similar challenges. EDIT: It appears that there is a problem with trying to import an mp3 file in ...

javascriptreactjstypescriptaudiojsx

Styler column - Bootstrap-vue - VueJS

The goal is to format the 'from' and 'to' columns in a way that displays their description rather than their code in the table. <b-table id="my-table" hover striped small outlined :items="items" :fields="fields" class="mt-0 mb-0"> ...

vue.jsbootstrap-vue

Asynchronous data is required for the computation of a property

export default { data() { return { projects: [] } }, mounted() { axios.get('...') .then(({ data } => this.projects = data) }, computed: { personalProjects() { return this.projects.filter(...) ...

vue.js

Create a CSS menu that remains fixed at the top of the page and highlights the current submenu as

When explaining a concept, I find it easier to include a drawing to ensure clarity. https://i.stack.imgur.com/IChFy.png My goal is to keep the menu at the top of the page after scrolling past the header. https://i.stack.imgur.com/3fzJ6.png Using Bootst ...

cssvue.jsbootstrap-4

Angular is throwing an error stating that it is unable to access the 'name' property of an undefined object

While working on my Angular application, I encountered the following error message: " Cannot read property 'name' of undefined" https://i.stack.imgur.com/O3vlh.png I've been searching through my code but am unable to pinpoint the issue. T ...

angulartypescript

How Vue3 enables components to share props

Having recently made the switch from Vue2 to Vue3, I find myself a bit perplexed about the best approach for sharing props among multiple components. My goal is to create input components that can share common props such as "type", "name", and so on. Previ ...

typescriptvue.jsvue-composition-apivue-propsvue-options-api

What is the best way to connect to a JSON key that is consistently returned with a varying or unpredictable name?

I am currently working on an Angular 4.x application where my goal is to showcase a random Wikipedia article. Each time I check the JSON data in Chrome Dev Tools under query/pages, I notice that the pageID always has a different number. The structure of th ...

javascriptangularresttypescriptwikipedia-api

Kendo's comboBox for local virtualization

Looking to implement virtualization for local data using the kendo object ComboBox. I've tried different methods, but only the current page (first 40 elements) is displayed. I followed a code structure similar to the kendo virtualization tutorial an ...

angulartypescriptcomboboxkendo-uivirtualization