TSError: ⨯ Unable to compile TypeScript - node.js

My Project is built on Nodejs with TypeScript
I'm getting this compilation error in my Node.js app:
E:\NodeProjects\esshop-mongodb-nodejs\node_modules\ts-node\src\index.ts:859
return new TSError(diagnosticText, diagnosticCodes, diagnostics);
TSError: ⨯ Unable to compile TypeScript:
src/posts/post.dto.ts:5:10 - error TS1219: Experimental support for decorators is a feature that is
subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.
5 public author: string;
src/posts/post.dto.ts
import { IsString } from 'class-validator';
class CreatePostDto {
#IsString()
public author: string;
#IsString()
public content: string;
#IsString()
public title: string;
}
export default CreatePostDto;
my tsconfig.json:
{
"compilerOptions": {
"sourceMap": true,
"target": "ES6",
"outDir": "./dist",
"baseUrl": "./src",
"alwaysStrict": true,
"noImplicitAny": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
]
}
I installed latest version: [ts-node, typescript]
project repo in github:
https://github.com/barrytestfl/esshop-mongodb-nodejs

My problem solved by change this options in tsconfig.json:
"esModuleInterop": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true
This worked for me
my tsconfig.json file :
{
"compilerOptions": {
"sourceMap": true,
"target": "es2019",
"outDir": "./dist",
"baseUrl": "./src",
"alwaysStrict": true,
"noImplicitAny": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"esModuleInterop": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
]
}

Related

Cannot find module 'react' error when using next-auth in nodejs

Works fine in my local environment but when i try to deploy my server getting
Error: Cannot find module 'react'
on /project/src/node_modules/next-auth/react/index.js
it seems like next-auth using React for some parts.
my ts config:
{
"compilerOptions": {
"target": "es2022",
"lib": ["ES2022"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "ES2022",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"exclude": ["node_modules"],
"ts-node": {
"esm": true,
"experimentalSpecifierResolution": "node"
}
}
my package.json:
I've used ts-node --esm for build command

How to use tsconfig-paths with ts-node

How do you setup paths with typescript to run with ts-node? And later compile paths to absolute paths when compiling?
I have following very minimal structure:
koki.ts:
export const calculate = (a: number, b: number) => {
return a + b;
};
index.ts:
import { calculate } from "#koki/koki";
const result = calculate(1, 2);
console.log(result);
tsconfig.json:
{
"ts-node": {
"transpileOnly": true,
"require": ["tsconfig-paths/register"]
},
"compilerOptions": {
"target": "es2017",
"module": "commonjs",
"lib": ["dom", "es6", "es2017", "esnext.asynciterable"],
"skipLibCheck": true,
"sourceMap": true,
"outDir": "./dist",
"moduleResolution": "node",
"removeComments": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"resolveJsonModule": true,
"baseUrl": ".",
"paths": {
"#/*": ["*"],
"#koki/*": ["koki/*"]
}
},
"exclude": ["node_modules"],
"include": ["./src/**/*.ts"]
}
I am getting:
ts-node src/index.ts
Error: Cannot find module '#koki/koki'
Require stack:
- /home/pwnage/Documents/github/test-node/src/index.ts
In my case, I added the -r option to ts-node scripts
package.json
"scripts": {
"start": "ts-node -r tsconfig-paths/register src/index.ts",
}
ts-node works well in these codes
import { env } from "#/config/env";

Top level await gives error in build but works on dev

My code works when ran npm run dev but when I build it it gives this error. According to the docs I need target set to ES2017 or higher in tsconfig.json but I am using ESNEXT which I believe is compatible
error
tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": false,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": ["./src"]
}
Because I was using vite in the question, vite.config.ts is what I should have been looking to edit instead of tsconfig.json
here is the fix to it
vite.config.ts
export default defineConfig({
build: {
minify: 'esbuild',
target: "esnext"
}
})

How can CommonJS and ES6 modules be included in the same repo?

I have a NestJS/Typescript backend where I am trying to use two different third-party services that use different importing formats. The two are below:
PDFTron uses: const { PDFNet } = require('#pdftron/pdfnet-node');
Prisma uses: import { PrismaClient } from '#prisma/client'
I have asked PDFTron support to see if an module import style similar to Prisma works for their service, but they have told me it doesn't. So, how can I use both third parties if PDFTron doesn't work in Typescript files?
For reference, my tsconfig file contains the below:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"baseUrl": "./",
"allowJs": true,
"skipLibCheck": false,
"strict": false,
"strictNullChecks": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"module": "commonjs",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"tsBuildInfoFile": ".tsbuildinfo"
},
"exclude": ["node_modules"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

Cannot find name 'localStorage'. and Cannot find name 'window'. in react when using next.js for SSR

I am struggling to use localStorage or window.localStorage in react.
Please have a look at the below code
if (typeof window !== "undefined") {
localStorage.setItem(key, value)
}
I got the error : Cannot find name 'localStorage'
I have also tried with links given below but face same error :
https://dev.to/dendekky/accessing-localstorage-in-nextjs-39he
https://awesomereact.com/videos/Jz-zJ7lA4io
Here is my tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"exclude": [
"node_modules"
],
"include": [
"**/*.ts",
"**/*.tsx"
]
}

Resources