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?

tony19 · Accepted Answer · 2019-02-06 23:16:06Z

11

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.

answered Feb 6, 2019 at 23:16

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Giacomo Over a year ago

is there an issue in having: "@/*": [ "src/app_marketplace/*", "src/app_producer/*" ]?

tony19 Over a year ago

There shouldn't be issue doing that unless you have identical directory trees under both dirs (e.g., src/app_marketplace/foo/foo.ts and src/app_producer/foo/foo.ts, in which case the first found path takes precedence).

Collectives™ on Stack Overflow

Vue-typescript error with webpack alias, path not found

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related