Quasar: Typescript path alias not working

Created on 8 Jan 2020  Â·  5Comments  Â·  Source: quasarframework/quasar

In my tsconfig.json I set a path alias but when I execute quasar dev I get the following output:

These dependencies were not found:
* @/components/admin/admin in ./src/router/routes.ts
* @/components/admin/box-plan/box-plan.component.vue in ./src/router/routes.ts
....

This is my complete tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "quasar"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ],
    "typeRoots": [
      "src/types",
      "node_modules/@types"
    ],
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}

OS: macOS Catalina (10.15.2)
Node: v10.16.3
NPM: 6.9.0

Before I moved to Quasar, this app was built by a Vue CLI app and the Typescript Configuration worked as expected.

bug

Most helpful comment

@IlCallo Thanks a lot for your help. This worked:

chainWebpack (config) {
  config.resolve
    .alias
    .set('@', path.resolve(__dirname, 'src'));
}

All 5 comments

I think you should also add the path alias into webpack configuration using quasar.conf.js > build > extendWebpack (or chainWebpack)

Of course it would be a good idea to check if it's possible to keep them in sync (make webpack automatically read TS paths and adding them for compilation)

@IlCallo Thanks a lot for your help. This worked:

chainWebpack (config) {
  config.resolve
    .alias
    .set('@', path.resolve(__dirname, 'src'));
}

hi @IlCallo , it works in .vue file, but still doesn't work in .ts file in src-electron (electron mode)

Note that the "src" alias embedded into Quasar already is perfectly equivalent to "@"

@jeoy well, that's strange, I think the aliases are the same for spa and electron webpack configs. But your can hook into electron webpack config too, if I remember correctly

Was this page helpful?
0 / 5 - 0 ratings