How to use paths with ts-node? - node.js

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.

Related

Executing typescript code using ts-node gives "Cannot use import statement outside a module" error

I am trying to run apollo-server and the code I have written is in TypeScript.
My code folder contains a tsconfig.json which looks like this:
{
"compilerOptions": {
"target": "esnext",
"lib": [
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"include": [
"server"
]
}
The command I am running is below:
$ npx ts-node ./server/index.ts
If I remove the tsconfig.json (which of course I can't do), the command above works fine. I am not sure which configuration is actually causing the problem.
the setting you are searching is "module": "commonjs". As ts-node is executing your code in the nodejs environment you have to use its module system. If you need your config as default for your project you can create a second tsconfig tsconfig.node.json and target it with ts-node --project <tsconfig.json>
tsconfig.node.json:
{
"extends": "./",
"compilerOptions": {
"module": "commonjs",
},
}

serverless framework not recognizing tsconfig's paths

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.

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?

Rollup does not bundle declaration file

I am trying to build a library made with TypeScript. I am using the paths property in tsconfig.json.
My tsconfig.json looks like this:
{
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"target": "es2015",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"experimentalDecorators": true,
"sourceMap": true,
"lib": [
"esnext",
"dom"
],
"strict": true,
"sourceRoot": "./src",
"rootDir": "./src",
"outDir": "build",
"declaration": true,
"declarationDir": "build",
"baseUrl": "./src",
"noUnusedLocals": true,
"paths": {
"modules/*": [
"modules/*"
],
"common/*": [
"common/*"
]
}
},
"exclude": [
"node_modules",
"build"
]
}
And my rollup config looks like this:
import typescript from 'rollup-plugin-typescript2'
export default {
entry: "./src/index.ts",
output: {
file: './build/index.js',
format: 'cjs'
},
plugins: [
typescript({ typescript: require("typescript"), declaration: true, clean: true })
]
}
However, when I build using rollup -c, it creates this in my build folder:
Where the index.js is bundled just fine, but the declaration file here simply imports from the /common folder and that folder basically contains all the other folders from the src directory but only with a single declaration file per folder, furthermore, these files try to import using the paths aliases instead of being built with relative imports, so they do not work.
How do I tell rollup to build a single declaration file instead of this?
rollup-plugin-typescript keeps the folder structure for declaration files. To bundle the declaration too, you should use rollup-plugin-ts as well:
https://github.com/wessberg/rollup-plugin-ts

Typescript not see nodejs globals

I was using Typescript 1.8 with typings, but i decided to upgrade to typescript 2.8 with #types. I downloaded #types/node, but console show errors:
error TS2304: Cannot find name 'require'.
The structure of my project is the following:
node_modules
src >
client
server >
tsconfig.ts
tsconfig.ts:
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es6",
"typeRoots": [
"../node_modules/#types"
],
"noImplicitAny": true,
"moduleResolution": "node",
"sourceMap": true,
"outDir": "server",
"baseUrl": "."
},
"include": [
"src/**/*"
]
}
Adding "types": ["node"] not help
Based on your directory structure, it looks like the path for the typeRoots option is incorrect - it should be a relative path from your tsconfig file. Your node_modules directory is 2 levels higher than the location of your tsconfig, so your type roots should be:
"../../node_modules/#types"
Full tsconfig:
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es6",
"typeRoots": [
"../../node_modules/#types"
],
"noImplicitAny": true,
"moduleResolution": "node",
"sourceMap": true,
"outDir": "server",
"baseUrl": "."
},
"include": [
"src/**/*"
]
}

Resources