Ionic 6 TypeScript Path Alias Configuration

Ionic Framework Ionic Vue
1

I am trying to connect Ionic Vue up to an existing MonoRepo with some vue projects and many raw TypeScript projects that include our business code/services etc.

I would like to configure Ionic Vue to use our TypeScript path aliases e.g.

tsconfig.json

"paths": {
      "@/*": [
        "./src/*"
      ],
      "@core/*": ["../projects/core/src/*"],
}

I have done this but get the error:

Module not found: Error: Can't resolve '@core/error/CustomError' in 'D:\dev\repo\myApp\src\views'

To get this to work with vite and webpack in web projects we usually have to define our aliases in their configs e.g.

vite.config.js

resolve: {
      extensions: ['.tsx', '.ts', '.js', '.json', '.mjs'],
      alias: {
        '@core': path.resolve(__dirname, '../core/src'),
}

how do I gain access to the build config and subsequently modify it for a vue Ionic project?

2

for those looking for answers (which is a little tricky round here might I add). I managed to get this working by telling babel how to interpret my aliases. I had to install babel module resolver plugin to get this to work.

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'module-resolver',
      {
        alias: {
          '@core': '../projects/core/src',
        },
      },
    ],
  ],
};
2 Likes