serverless framework not recognizing tsconfig's paths - node.js

I'm trying to deploy my Node.js app to Lambda using Serverless framework, however, my Node code uses paths from tsconfig.json for referencing imports but the Serverless deploy process fails. How do you wire up serverless.yml to acknowledge and use paths defined in tsconfig.json?
I've installed serverless-plugin-typescript, but it does not seem to recognize paths from tsconfig.
serverless.yml
service:
name: app-name
custom:
webpack:
webpackConfig: ./webpack.config.js
includeModules: true
plugins:
- serverless-webpack
- serverless-plugin-typescript
...
tsconfig.ts
{
"compileOnSave": true,
"compilerOptions": {
"lib": [
"es2017"
],
"baseUrl": "./src",
"declaration": true,
"downlevelIteration": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"module": "commonjs",
"moduleResolution": "node",
"noUnusedLocals": true,
"noUnusedParameters": true,
"outDir": "./dist",
"paths": {
"#config/*": [
"config/*"
],
"#core/*": [
"core/*"
],
"#infra/*": [
"infra/*"
],
"#modules/*": [
"modules/*"
],
"#shared/*": [
"shared/*"
]
},
"preserveConstEnums": true,
"removeComments": true,
"rootDir": "./src",
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"strictNullChecks": false,
"target": "es2017",
"typeRoots": [
"node_modules/#types"
],
"types": [
"node"
]
},
"include": [
"./**/*.ts"
],
"exclude": [
"node_modules/**/*",
".serverless/**/*",
".webpack/**/*",
"_warmup/**/*",
".vscode/**/*"
]
}

I found an answer. Turns out you need to install tsconfig-paths-webpack-plugin. Then in webpack.config.js you add the following:
npm install --save-dev tsconfig-paths-webpack-plugin
inside webpack.config.js:
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
...
resolve: {
plugins: [new TsconfigPathsPlugin({ configFile: "./tsconfig.json" })]
},
...
};
NOTE: be sure to use the plugins inside the resolve section. There is a plugins a the root, however, TsconfigPathsPlugin only works in resolve/plugins.
I hope this helps you if you experience this same issue.

Related

Eslint / Prettier Ignoring files with .mock extension

I am using Angular with Eslint and Prettier configured for the entire project. All the files are checked correctly according to rules. Unfortunately, the files that have .mock in name are completely ignored. The file is called for example test.mock.ts and is ignored by Eslint/Prettier. If I rename it to test.mocks.ts or anything else without the mock keyword, it starts to work.
Does anyone know why it behave like this?
Eslint config file:
{
"extends": ["prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error"]
},
"root": true,
"ignorePatterns": [
"projects/**/*"
],
"overrides": [
{
"files": [
"*.ts"
],
"parserOptions": {
"project": [
"tsconfig.json"
],
"createDefaultProgram": true
},
"extends": [
"plugin:#angular-eslint/recommended",
"plugin:#angular-eslint/template/process-inline-templates"
],
"rules": {
...some rules...
}
}
]
}
Tsconfig file:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"downlevelIteration": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2020",
"moduleResolution": "node",
"experimentalDecorators": true,
"importHelpers": true,
"typeRoots": [
"node_modules/#types"
],
"target": "es2020",
"lib": [
"es2020",
"dom"
],
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
"paths": {
"#generated/*": [
"libs/shared/*"
],
}
}
}
Turned out I had in .eslintignore file rule to ignore all .mock files.

SWC typescript is not affect fast reload

I'm trying to improve nodemon server/start speed.
my script command in package.json is
installed npm install --save-dev ts-node #swc/core #swc/helpers regenerator-runtime
scripts: {
"dev": "nodemon --watch src server.ts"
}
and tsconfig.json is
{
"compilerOptions": {
"baseUrl": ".",
"target": "ES6",
"module": "commonjs",
"removeComments": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"types": [
"node",
"bytebuffer"
],
"moduleResolution": "node",
"pretty": true,
"sourceMap": true,
"skipLibCheck": true,
"suppressImplicitAnyIndexErrors": true,
// "noImplicitAny": false,
"resolveJsonModule": true,
"outDir": "./build",
"typeRoots": [
"./src/interfaces/index.d.ts",
"node_modules/#types"
],
"paths": {
"#config/*": [
"./src/config/*"
],
"#controllers/*": [
"./src/controllers/*"
],
"#dao/*": [
"./src/dao/*"
],
"#json/*": [
"./src/json/*"
],
"#lib/*": [
"./src/lib/*"
],
"#mappers/*": [
"./src/mappers/*"
],
"#models/*": [
"./src/models/*"
],
"#plugins/*": [
"./src/plugins/*"
],
"#routes/*": [
"./src/routes/*"
],
"#utils/*": [
"./src/utils/*"
]
}
},
"ts-node": {
"swc": true
},
"filesGlob": [
"./src/**/*.ts"
],
"exclude": [
"node_modules",
"src/lib/customTypings"
]
}
and mainly also mentioned in tsconfig.json file
ts-node: {
"swc": true
}
after Configuring all the steps still nodemon server taking 2 min to restart after changes.
Are there any changes that need to do to the current setup? and I followed this question
I did all the changes still it is not effect in speed of compile

TS-JEST Mongoose/MongoDB incompatibility with ESM

I am trying to get Node Express/Typescript app that uses Mongoose (which drags in Mongodb) to work with Jest. I know what the error is, I just can't find the correct configuration to get jest and mongodb to play nicely.
No matter what I try I either get:
chart-review-server2.0/node_modules/mongodb/src/bson.ts:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import type {
^^^^^^
SyntaxError: Cannot use import statement outside a module
or if I try to exclude it from the config using transformIgnorePatterns in my jest.config.js configuration like this: transformIgnorePatterns: ['node_modules/(?!(mongodb))'], I get:
RangeError: Maximum call stack size exceeded
at Object.get [as ObjectId] (node_modules/mongodb/src/bson.ts:38:3)
at Object.get [as ObjectId] (node_modules/mongodb/src/bson.ts:38:3)...
My jest.config.js file looks like this:
module.exports = {
preset: "ts-jest",
testEnvironment: "node",
transformIgnorePatterns: [`node_modules/(?!(mongodb))`],
transform: {
'^.+\\.ts?$': 'ts-jest'
},
moduleDirectories: [ "node_modules", "src", "test"],
verbose: true,
testMatch: ["<rootDir>/test/*(*.)+(test).+(ts)"],
setupFiles: [
'dotenv/config'
],
};
my tsconfig.json looks like this:
{
"compilerOptions": {
"lib": [
"es6"
],
"module": "commonjs",
"target": "es5",
"rootDirs": [
"./src"
],
"outDir": "./dist",
"baseUrl": "./src",
"moduleResolution": "node",
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"allowJs": true,
"downlevelIteration": true,
"isolatedModules": false,
"noEmit": true
},
"include": [
"src/**/*.ts",
"test/**/*.ts"
],
"exclude": [
"node_modules"
],
"types": [
"node"
],
"typeRoots": [
"node_modules/#types"
]
}
Thanks in advance for any replies, and for reading this.
Commenting out moduleDirectories on jest.config.js solved the issue for me. All credits to #jimmythecode, see his answer.

How to use paths with ts-node?

I have this project structure:
How to configure tsconfig.json for using paths like #app/, #server/.
I try this:
{
"compilerOptions": {
"module": "CommonJS",
"target": "es5",
"lib": [
"esnext",
"dom"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": false,
"baseUrl": "..",
"paths": {
"#app/*": [
"app/*"
],
"#server/*": [
"server/*"
]
}
},
"include": [
"."
]
}
Same config works with webpack and ts-loader, but when i run npx ts-node server/index.ts i got error:
npx ts-node server/index.ts
Error: Cannot find module '#server/a'
server/index.ts :
import a from '#server/a'
console.log('This is index.ts')
a()
Your config works for webpack because you run webpack from the project root. It does not work for server.ts because the path is relative to its directory. Try:
"paths": {
"#app/*": [
"../app/*"
],
"#server/*": [
"../server/*"
]
}
If you need to do it for both, you need two different tsconfig.json - one in the root and one in app or server.
Take a look at my project: https://github.com/mmomtchev/rlayers
It uses this feature a lot.

Angular 7: adding local module with npm link

I've created a package with a module outside of folder with an appication that should contain the module to test it. Then I've added package with npm link #scope/module-name. After that I've added paths to root tsconfig.json.
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2018",
"dom"
],
"paths": {
"#scope/module-name": [
"node_modules/#scope/module-name"
],
"#scope/module-name/*": [
"node_modules/#scope/module-name/*"
]
}
}
}
I've also added package to include in tsconfig.app.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": []
},
"include": [
"**/*.ts",
"../node_modules/#scope/**/*.ts",
],
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
And yes, I've added "preserveSymlinks": true in angular.json as it's said in similar questions on SO.
In app.module.ts I'm doing
import { DispRegistryModule } from "#scope/module-name/public_api.d.ts";
But still I'm gettig an error
ERROR in ./node_modules/#scope/module-name/public_api.d.ts Module
build failed (from ./node_modules/#ngtools/webpack/src/index.js):
Error:
D:\internal\test-app\node_modules#scope\module-name\public_api.d.ts
is missing from the TypeScript compilation. Please make sure it is in
your tsconfig via the 'files' or 'include' property.
How can I fix the error?

Resources