I know this question has been asked a lot of times. But none of the solutions seems to work for me.
I have setup a project installing typescript and ts-node to run the project in dev.
The project structure is as follows
.
├── src
│ ├── utils
│ │ └── logger.ts
│ ├── custom
│ │ └── services
| | └── func.service.ts
│ └── index.ts
├── package.json
└── tsconfig.json
Below is my tsconfig.json file
{
"compilerOptions": {
"target": "ES6",
"module": "CommonJS",
"outDir": "./dist",
"baseUrl": "./src",
"removeComments": true,
"incremental": true,
"esModuleInterop": true,
"paths": {
"#utils/*": [
"utils/*"
],
"#custom/*": [
"custom/*"
]
}
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
]
}
I am importing the utils/logger in the src/index.ts file as import { Log } from '#utils/logger'
so when I run the below command
$ yarn dev
(which is configured to run ts-node src/index)
I am getting the below error
$ ts-node src/index
Error: Cannot find module '#utils/logger'
...
code: 'MODULE_NOT_FOUND',
...
error Command failed with exit code 1.
Went through different answers in the site, but none of them worked.
Edit: The intellisense in vscode works fine and detects the paths correctly
Related
I'm modularising my code to split my oauth routes into a seperate typescript file in a sibling folder. I'm not sure what I'm doing wrong when trying to import from a seperate folder. On ts-node run its unable to find the authRoutes.ts.
My set up is have 3 seperate ts-configs, one is in the root of the workplace which has all the main settings I need whilst I have 2 seperate ts-config files in the /src/routes and /src/ts folder that extends from the root with the only difference being the outDirs in each of the 2.
I've tried setting up the /src/routes path as a "path:" setting in the root ts-config with the same error when trying to run ts-node. Below is my folder structure and my root ts-config both other ts-config file uses to extend.
import authRoutes from "../routes/authRoutes";
app/
├─ public/
│ ├─ css/
│ ├─ js/
│ ├─ routes/
├─ src/
│ ├─ routes/
│ │ ├─ tsconfig.json
│ │ ├─ authRoute.ts
│ ├─ scss/
│ ├─ ts/
│ │ ├─ tsconfig.json
│ │ ├─ app.ts
├─ views/
tsconfig.json
{
"include": ["src/**/*"],
"compilerOptions": {
"target": "es2022",
"module": "es2022",
"composite": true,
"moduleResolution": "node",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
},
"ts-node": {
"esm": true
},
"references": [
{ "path": "./src/ts/tsconfig.json" },
{ "path": "./src/routes/tsconfig.json" }
]
}
I have an example monorepo with 3 packages: back, front and shared. With the following folder structure:
root
├── back
│ ├── dist
│ ├── src
│ ├── test.ts
│ ├── package.json
│ └── tsconfig.json
├── front
├── shared
│ ├── dist
│ ├── src
│ ├── my-enum.ts
│ ├── package.json
│ └── tsconfig.json
├── package.json
└── tsconfig.json
test.ts
import { MyEnum } from '#test/shared/src/my-enum'
setTimeout(() => console.log(2 == MyEnum.B), 1000, 1)
my-enum.ts
export enum MyEnum{ A = 1, B, C }
When I build the back package typescript generates in the dist folder a test.js file with var my_enum_1 = require("#test/shared/src/my-enum");, however the compiled files of the shared package are in the dist folder, not in src, so if I try to run with node I get the following error:
Error: Qualified path resolution failed: we looked for the following paths, but none could be accessed.
Source path: E:\Repository\workspace_test\shared\src\my-enum
Not found: E:\Repository\workspace_test\shared\src\my-enum
Not found: E:\Repository\workspace_test\shared\src\my-enum.js
Not found: E:\Repository\workspace_test\shared\src\my-enum.json
Not found: E:\Repository\workspace_test\shared\src\my-enum.node
If I use ts-node instead of node it works, but that's not how I'd like to run this after deploy. I assume there's something I need to change in my tsconfig.json files but I can't find out what it is, other related SO questions I could find weren't very helpful.
I uploaded an example repo on github to make things easier to anyone willing to help, but here are my ts.config files:
Root:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true
}
}
Back:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"composite": true,
"outDir": "dist",
"rootDir": "src"
},
"references": [
{ "path": "../shared" }
]
}
Shared:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"composite": true,
"outDir": "dist",
"rootDir": "src"
}
}
Ok, so to fix this I had to change the package.json instead of the tsconfig.json. Making the main field in shared/package-json point to the dist folder doesn't do anything for some reason, but the exports field actually works, so creating an alias there solved the issue.
So for this example project it would be something like "exports": { "./src/my-enum": "./dist/src/my-enum.js" }.
I'm using the express framework in NodeJS with typescript in the backend. Unfortunately, I get a very annoying error:
error TS2307: Cannot find module 'src/interfaces/vault' or its
corresponding type declarations.
Here are some details about my app:
folder structure (shortened)
.
├── node_modules
├── src
│ ├── controllers
│ │ └── test.ts
│ ├── interfaces
│ │ └── vault.ts
│ └── index.ts
└── tsconfig.json
└── tslint.json
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es6",
"noImplicitAny": false,
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist",
"baseUrl": ".",
"paths": {
"*": [
"node_modules/*"
]
}
},
"include": [
"src/**/*"
]
}
The error appears, when I import an interface, class, or something else from another file, by a nonrelative path. Here is an example, in which the test controller, tries to import the vault interface.
// not working
import { iVault } from "src/interfaces/vault";
// working
import { iVault } from "../interfaces/vault";
I know there are a lot of similar questions out there. But no provided solutions helped me.
From my understanding, the nonrelative import should work because of the include section of my tsconfig.json. I also use node as moduleResolution. So I really can't find the mistake.
Hi I'm having problems with the tsconfig paths
The folder structure looks like this:
.
├── src
│ ├── components
│ │ └── someComponent.ts
│ ├── models
│ │ └── tree.ts
│ ├── slices
│ | └── activeItem.ts
| └── more_stuff...
└── tsconfig.json
And the tsconfig.json file is configured like this
{
"compilerOptions": {
"jsx": "react",
"allowJs": true,
"module": "commonjs",
"skipLibCheck": true,
"esModuleInterop": true,
"noImplicitAny": true,
"sourceMap": true,
"baseUrl": "./src",
"outDir": "dist",
"moduleResolution": "node",
"resolveJsonModule": true,
"paths": {
"#slices/*": ["slices/*"],
"#models/*": ["models/*"],
"#typedefs/*": ["types/*"]
}
},
"include": [
"src/**/*",
]
}
And then when I try to use #slices in src/components/some-component.ts like this:
import { TreeNode } from '#models/tree'
import { selectItems } from '#slices/activeItem'
VS code recognices the folder and show its contents in the linter, but when I run the application I got the error
Module not found: Error: Can't resolve '#slices/activeItem' in
'/workspace/electron/keysafe/src/components/tree/tree-item'
Field 'browser' doesn't contain a valid alias configuration
/workspace/electron/keysafe/node_modules/#slices/activeItem.ts doesn't exist
Notice that in the error it's trying to look for the folder inside
node_modules
It only fails with the slices folder, if I remove the import the
others work without any issues.
I've already tried renaming the folder and the alias to cs,
customSlices but the problem persists only with that folder.
I had the same issue with #types but changing the alias to #typedefs solved it (I guess it's reserved by TS)
The problem: the structure of dist Typescript output directory changes based on the imported modules in my server/app.ts.
Directory server holds server (Node) files, shared holds common models (classes) while dist is the out directory:
├───dist
├───server
│ app.ts
│ tsconfig.json
│
├───shared
│ customer.model.ts
| index.ts
│
│── package.json
│── tsconfig.json
If I run tsc -p server with the following server/app.ts:
import * as path from 'path';
// ..
console.log('Starting the server...');
Here is the output dist folder:
└───server
app.js
app.js.map
As soon as I import shared/customer.model.ts:
import * as path from 'path';
import { Customer } from '../shared';
// ..
console.log('Starting the server...');
It becomes:
└───server
├───server
│ app.js
│ app.js.map
│
└───shared
customer.model.js
customer.model.js.map
index.js
index.js.map
File tsconfig.json:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../dist/server",
"baseUrl": "./",
"module": "commonjs"
}
}
I'd like to have a predictable directory structure like the following, I know I should play with rootDir and rootDirs options, but I don't know how:
├───server
│ app.js
│ app.js.map
│
└───shared
customer.model.js
customer.model.js.map
index.js
index.js.map
According to my understanding of this FAQ, this should produce the desired structure:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"rootDir": <path-to-the-parent of server, shared and dist>
"outDir": "../dist",
If you want to get folder structure in dist/ like this
├───server
│ app.js
│ app.js.map
│
└───shared
customer.model.js
customer.model.js.map
index.js
index.js.map
I think that your base tsconfig should be:
{
"compilerOptions": {
"outDir": "dist",
"baseUrl": "./",
"module": "commonjs"
},
"include": [
"./server/**/*.ts",
"./shared/**/*.ts"
]
}
In your example, I don't think you need two tsconfig files.