React & FuseBox alias settings - Absolute Paths

Question

I am using React with FuseBox as bundler. The issue I am having at the moment is that aliasing isn't working so I can help deal with relative path hell.

My structure of the project:

stores folder has my MobX stores and an index.ts file that exports all the stores. services has a bunch of service classes all exported in there respective files (no index.ts)

So in my fuse.ts I have:

alias: {
    "services": "~/services",
    "stores": "~/stores"
},

Then in my ui folder for example I am importing like so:

import AccountStore from "stores";

I get [ts] Cannot find module 'stores' error on that line at "stores".

Not sure have I got the alias section wrong? My homeDir in fuse.ts is set to "src/". I don't have any paths or baseUrl set in tsconfig like I did have when we were using webpack to setup absolute paths. Not sure if those are needed again or if it is something I am doing wrong with alias.

Any tips would be great :)

I have looked at the alias documentation on the fusebox site and followed it and tried a few different combinations but not getting any closer to it working. Would love some examples from people who have got this working.

Edit: I have additionally done the following while trying to figure this out:

• remove .fusebox folder
• restarted vscode
• have checked the bundle and it is adding a tilde there so fusebox must be recognising it?

will continue to add more things I try..

Answer 1

My solution to the problem I was having was to put the tsconfig.json file inside my src folder and the project/app inside ~.

Inside tsconfig.json i set baseUrl to root.

{
    "compilerOptions": {
        "baseUrl": ".",
        // ...
    }
}

This then allowed me to do absolute imports that would be the same across all files so it would be easy to reuse imports and quickly copy if needed.

import { service1, service2, service3 } from '~/services';
import { store1, store2 } from '~/stores';    

The tilde usually represents home or base on a lot of systems so a few devs agreed it would be appropriate to use it in our folder structure. Though did have to remember to remove ~ from .gitignore if you have something that is autogenerated and its automatically in there.