What is the actual correct way to do path aliases?

Ionic Framework Ionic React
1

So, I have a module that handles some Firebase initialization called initFirebase.js in my project’s src/utils folder. I need to import it into a component called Summary.tsx in my project’s src/components/modals folder. In the interest of not having to type import { thing } from '../../utils/initFirebase' with an arbitrary number of ../'s depending on file location, I am trying to set up path aliases.

In typescript, usually, this is done by adding a baseUrl and paths property to your tsconfig.json file something like this:

{
  "compilerOptions": {
    ...
    "baseUrl": "src",
    "paths": {
      "@utils": ["utils/*"],
      "@components": ["components/*"],
      "@modals": ["components/modals/*"],
      ...
    }
    ...
  }
}

And this does fix half the problem. If I make those changes, VSCode correctly identifies any defined aliases so that if I mouse-over import { thing } from '@utils/initFirebase it says module "c:/Users/Vanessa/Git/project-name/src/utils/initFirebase" which is exactly where the file is.

BUT, as soon as I run ionic serve I still get the error:

Module not found: Error: Can't resolve '@utils/initFirebase' in 'C:\Users\Vanessa\Git\project-name\src\components\modals'

I have spent all day and night on this problem. If you google it, you find some people who say that making those changes to your tsconfig.json is all you need to do, but that mostly seems to be from older results talking about earlier versions of Ionic. I have tried installing babel-plugin-module-resolver to my project. I have tried overwriting webkit.config.js with my own which forces my aliases into the existing paths definition. I have tried turning initFirebase.js into initFirebase.ts with all the correct Firebase-specific type definitions on every variable, like, just in case. I have sifted through auto-translated Russian and Chinese forums and tried every possible permutation of every suggestion like "baseUrl": ".", "baseUrl": "./", "baseUrl": "./*", and so on, and so on… So forgive me if I sound a little exasperated at this point.

Someone must have an answer. Are custom path aliases simply impossible in Ionic v6 or is there some official intended solution out there somewhere that has somehow evaded me and everyone else on stack overflow? Let this thread be the one and only useful google result for this question:

Is there an intended way we are supposed to define path aliases for resolving module imports that works with Ionic v6, React, and TypeScript?
If so, what is it?
If not, then has anyone found a solution they could share. Please, I’ll try anything no matter how hacky/questionable/illegal.

2

I haven’t done this myself, but Ionic React uses CRA, so the problem is quite likely to be CRA.

Here’s an article on setting up path aliases in CRA and it involves using craco.

The challenge is that you will have to use some tool like craco, react-app-rewired, and so on to overwrite the webpack config; overwriting webkit.config.js manually will not do anything because CRA will regenerate it every time you run the serve command.

Another issue is this all depends on which version of CRA you are using. CRA 4 uses Webpack 4, while CRA 5 uses Webpack 5. Ionic supports both. Version 5 can be a real pain to get working with overrides as documented in this issue.

This is all off the top of my head, but digging more into how to set up aliases with CRA is where the solution will be.

3

Related: Ionic 6 TypeScript Path Alias Configuration