Sapphire - Imagine a framework•9mo ago

Issue with path aliases not working when using imports (TypeScript)

Not sure what exactly is going on, normally I'm only using TS paths like "@lib/*": ["src/lib/*"] but I wanted to start implementing something similar in my bot to make it so I don't have a bunch of ../../../ and whatnot when I'm having to import certain types/classes/etc.. Never had any issues with this while using NextJS, but I assume this has to be an issue with my tsconfig/package.json files. This is the error I'm getting at the moment:

[4:56:11 AM] Starting compilation in watch mode...

[4:56:16 AM] Found 0 errors. Watching for file changes.

node:internal/modules/cjs/loader:1147
  throw err;
  ^

Error: Cannot find module '@lib/utils'
Require stack:
- /home/doc/Documents/Projects/WebDev/Robot/dist/lib/guild/user/DatabaseService.js
- /home/doc/Documents/Projects/WebDev/Robot/dist/lib/guild/user/index.js
- /home/doc/Documents/Projects/WebDev/Robot/dist/client.js
- /home/doc/Documents/Projects/WebDev/Robot/dist/index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
    at Module._load (node:internal/modules/cjs/loader:985:27)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/home/doc/Documents/Projects/WebDev/Robot/dist/lib/guild/user/DatabaseService.js:5:17)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/doc/Documents/Projects/WebDev/Robot/dist/lib/guild/user/DatabaseService.js',
    '/home/doc/Documents/Projects/WebDev/Robot/dist/lib/guild/user/index.js',
    '/home/doc/Documents/Projects/WebDev/Robot/dist/client.js',
    '/home/doc/Documents/Projects/WebDev/Robot/dist/index.js'
  ]
}

[4:56:11 AM] Starting compilation in watch mode...

[4:56:16 AM] Found 0 errors. Watching for file changes.

node:internal/modules/cjs/loader:1147
  throw err;
  ^

Error: Cannot find module '@lib/utils'
Require stack:
- /home/doc/Documents/Projects/WebDev/Robot/dist/lib/guild/user/DatabaseService.js
- /home/doc/Documents/Projects/WebDev/Robot/dist/lib/guild/user/index.js
- /home/doc/Documents/Projects/WebDev/Robot/dist/client.js
- /home/doc/Documents/Projects/WebDev/Robot/dist/index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
    at Module._load (node:internal/modules/cjs/loader:985:27)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/home/doc/Documents/Projects/WebDev/Robot/dist/lib/guild/user/DatabaseService.js:5:17)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/doc/Documents/Projects/WebDev/Robot/dist/lib/guild/user/DatabaseService.js',
    '/home/doc/Documents/Projects/WebDev/Robot/dist/lib/guild/user/index.js',
    '/home/doc/Documents/Projects/WebDev/Robot/dist/client.js',
    '/home/doc/Documents/Projects/WebDev/Robot/dist/index.js'
  ]
}

Currently this is my tsconfig.json:

{
    "extends": ["@sapphire/ts-config", "@sapphire/ts-config/extra-strict", "@sapphire/ts-config/decorators"],
    "compilerOptions": {
        "baseUrl": ".",
        "module": "CommonJS",
        "moduleResolution": "Node",
        "rootDir": "src",
        "outDir": "dist",
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "resolveJsonModule": true,
        "tsBuildInfoFile": "dist/.tsbuildinfo",
        "paths": {
            "@lib/*": ["src/lib/*"]
        }
    },

    "include": ["src"],
    "compileOnSave": true
}

{
    "extends": ["@sapphire/ts-config", "@sapphire/ts-config/extra-strict", "@sapphire/ts-config/decorators"],
    "compilerOptions": {
        "baseUrl": ".",
        "module": "CommonJS",
        "moduleResolution": "Node",
        "rootDir": "src",
        "outDir": "dist",
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "resolveJsonModule": true,
        "tsBuildInfoFile": "dist/.tsbuildinfo",
        "paths": {
            "@lib/*": ["src/lib/*"]
        }
    },

    "include": ["src"],
    "compileOnSave": true
}

If needed I can share my package.json as well. Just not sure what I'm what I'm doing wrong here... This is a real pain because I just started using eslint more to improve my code and so I'm doing a lot of refactoring and.. yeah. Considering my codebase it's a bit overwhelming. I'd like to figure out how to get these ts paths working though if possible.

Solution:

The error is a NodeJS runtime error. Not a TS compile error. TS doesn't recalculate aliases and output resolved paths. You need to also configure your aliases in package.json subpath imports. Note that you also need to switch to # instead of @ then because that's what node requires. https://nodejs.org/api/packages.html#subpath-imports You can look at various examples from /tag bots ( @Spinel command)...

Jump to solution

8 Replies

Solution

Favna•9mo ago

Recommend you also review the options set by the extended configs btw. You have some duplicate config options. Just go into your node_modules to compare.

DocOP•9mo ago

ah okay gotcha it actually does allow me to import like that in some files, just not in others

DocOP•9mo ago

although this is probably working because the file is one just exporting interfaces

DocOP•9mo ago

also not sure if this is relevant, but i am using a tsconfig.eslint.json file as well with the following in it:

{
    "extends": "./tsconfig.json",
    "includes": ["src"]
}

{
    "extends": "./tsconfig.json",
    "includes": ["src"]
}

but I have modified my tsconfig.json slightly with the following in it:

{
    "extends": ["@sapphire/ts-config", "@sapphire/ts-config/extra-strict", "@sapphire/ts-config/decorators"],
    "compilerOptions": {
        "rootDir": "src",
        "outDir": "dist",
        "tsBuildInfoFile": "dist/.tsbuildinfo",
        "paths": {
            "@lib/*": ["./src/lib/*"]
        }
    },

    "include": ["src"],
    "compileOnSave": true
}

{
    "extends": ["@sapphire/ts-config", "@sapphire/ts-config/extra-strict", "@sapphire/ts-config/decorators"],
    "compilerOptions": {
        "rootDir": "src",
        "outDir": "dist",
        "tsBuildInfoFile": "dist/.tsbuildinfo",
        "paths": {
            "@lib/*": ["./src/lib/*"]
        }
    },

    "include": ["src"],
    "compileOnSave": true
}

Favna•9mo ago

I'm sorry but I'm not sure how this is relevant. I already gave you the solution. You need to provide the aliases for NodeJS as well. Exactly as I described.

DocOP•9mo ago

Yeah my apologies, I was tired and wasn't quite thorough in going over everything you said. I really appreciate the help in better understanding this so thank you

DocOP•9mo ago

@Favna by the way I also just wanna say... Thank you for all the effort and everything you've done and everyone else has done with this framework and everything associated with it. I've loved working with it and it's made developing my bot a very enjoyable and rewarding project. As a Discord bot developer that uses TypeScript, I greatly appreciate all the help you've given answering this question and the ones I've had in the past.

Gaming

Programming

Issue with path aliases not working when using imports (TypeScript)