Vue-typescript error with webpack alias, path not found

Question

I have a problem configuring webpack alias on a vue project with typescript. The same issue is not faced if I'm using normal javascript, hence my confusion

The project is divided in 2, "app_marketplace", "app_producer" (which is like the admin), I also have a 3rd folder for shared components and utilities.

Project folder structure:

• .env.marketplace
• .env.producer
• public/
• src/
  • app_marketplace/
  • app_producer/
  • app_shared/
• vue.config.js
• tslint files, babel, package.json, etc..

I run the 2 app separately from the script in the package.json.

For instance, "serve:marketplace": "vue-cli-service serve --mode marketplace src/app_marketplace/main.ts" calls my .env.marketplace file and sets the env to VUE_APP_MARKETPLACE=true

Now, in my vue.config.js I'm making use of the env variable to set the aliases.

configureWebpack: {
    resolve: {
        alias: {
            '~': path.resolve(__dirname, 'src/app_shared'),
            '@': path.resolve(__dirname, process.env.VUE_APP_MARKETPLACE ? 'src/app_marketplace' : 'src/app_producer')
        }
    }
}

The problem is that a lot of the imports don't work or give me error, starting from my main.ts inside app_marketplace. Another thing I can't explain is why some of them work and some don't.

import App from './App.vue'
import router from '~/router' // ERROR
import store from '@/store' // ERROR
import '@/plugins'
import '~/directives'
import { DEBUG } from '~/const/debug' // ERROR

What am I doing wrong?

Answer 1

Your tsconfig.json should have a paths config that matches your Webpack path aliases:

{
  "paths": {
    "~/*": [
      "src/app_shared/*",
    ],
    "@/*": [
      "src/*"
    ]
  },
  ...
}

Since the file is JSON, you won't be able to do conditional path aliases in the file.