We Keep Coding

Absolute path Import for public folder is not working with Next.js in Jenkins

I wanted to import static images which are being served from public/images folder using an absolute path. Here is the tsconfig file given below
{
"compilerOptions": {
"allowJs": true,
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"declaration": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"jsx": "preserve",
"lib": ["dom", "dom.iterable", "esnext"],
"module": "esnext",
"moduleResolution": "node",
"noEmit": true,
"noFallthroughCasesInSwitch": true,
"noImplicitReturns": true,
"pretty": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"target": "es2018",
"incremental": true,
"baseUrl": ".",
"paths": {
"#/publicImages/*": ["public/images/*"],
"#/pages/*": ["src/pages/*"],
"#/modules/*": ["src/modules/*"],
"#/shared/*": ["src/shared/*"],
"#/sharedComponents/*": ["src/shared/components/*"],
"#/sharedUtilities/*": ["src/shared/utilities/*"],
"#/sharedInterfaces/*": ["src/interfaces/*"],
"#/config/*": ["src/config/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "public/**/*"],
"exclude": ["node_modules", "ssh-tunnels.js"],
"types": ["googlemaps", "markerclustererplus"]
}
As you can see I had added the public inside path and include.
I am adding this image path as shown below in one of my moduleName.constant.ts file.
It will work in the local env and also build well locally. But on pushing code in CI/CD, Jenkins throws the below error.
Could you help me with where I can improvise it further?

Allow tsnd compile with errors in a JS file with #ts-check

I am migrating a backend project to use typescript with tsnd, I have configured the tsconfig.json like this:
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"~/*": ["*"]
},
"declaration": true,
"esModuleInterop": true,
"module": "CommonJS",
"moduleResolution": "node",
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"sourceMap": true,
"strict": true,
"strictBindCallApply": true,
"strictFunctionTypes": true,
"strictNullChecks": true,
"strictPropertyInitialization": true,
"target": "ES2019",
"outDir": "dist",
"types": ["node"],
"useUnknownInCatchVariables": false,
"allowJs": true,
"resolveJsonModule": true
},
"include": ["src"],
"exclude": []
}
That is the script I use to start the project:
"dev": "tsnd --clear -r tsconfig-paths/register src/index.ts"
But if I put // #ts-check in the top of a js file I get the error:
[ERROR] 16:42:50 ⨯ Unable to compile TypeScript:
I would like to use // #ts-check in the js files because it helps me to identify problems, but at the same time I don't want the stop the compilation just because of that.

I found a solution:
in my tsconfig.json I can add inside the compilerOptions: "checkJs": true, then I don't need to add those // #ts-check in my js files anymore, then to allow the compilation of my project even with those errors in the js files, I can add also in my tsconfig.json:
"ts-node": {
"compilerOptions": {
"checkJs": false,
}
}
Keep in mind that is OUTSIDE of the compilerOptions.
At the end, this is how my tsconfig.json looks like:
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"~/*": ["*"]
},
"declaration": true,
"esModuleInterop": true,
"module": "CommonJS",
"moduleResolution": "node",
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"sourceMap": true,
"strict": true,
"alwaysStrict": true,
"strictBindCallApply": true,
"strictFunctionTypes": true,
"strictNullChecks": true,
"strictPropertyInitialization": true,
"target": "ES2019",
"outDir": "dist",
"types": ["node"],
"useUnknownInCatchVariables": false,
"allowJs": true,
"checkJs": true,
"resolveJsonModule": true,
"plugins": [
// Transform paths in output .js files
{ "transform": "typescript-transform-paths" },
// Transform paths in output .d.ts files (Include this line if you output declarations files)
{ "transform": "typescript-transform-paths", "afterDeclarations": true }
],
"skipLibCheck": true
},
"include": ["src"],
"exclude": ["node_modules"],
"ts-node": {
"compilerOptions": {
"checkJs": false,
}
}
}

Typescript compiler does not stop when a error occured in next js

i want use nextjs beside typescript in my project.
i used npx create-next-app --typescript(official way for add typescript to next).
everything ok but when a typescript error occured e.g const st:string =3; compiler successfully run and i recieved error only in my IDE and compiler don't stop.i want when run npm run dev command compiler show error to me and then failed.
I would be very grateful if anyone could help me
this is my tsconfig file
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}

if you want better intellisense to figure out what's going on, make sure you enable strictNullChecks: true and alwaysStrict: true
That will enhance your TSX experience
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"lib": ["ESNext", "DOM", "DOM.Iterable"],
"declaration": true,
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"noImplicitThis": true,
"alwaysStrict": true,
"moduleResolution": "node",
"noUnusedLocals": false,
"noUnusedParameters": false,
"jsx": "preserve",
"downlevelIteration": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"inlineSourceMap": true,
"inlineSources": true,
"experimentalDecorators": true,
"strictPropertyInitialization": true,
"baseUrl": ".",
"allowJs": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"isolatedModules": true,
"paths": {
"#/components/*": ["components/*"],
"#/config/*": ["config/*"],
"#/graphql/*": ["graphql/*"],
"#/lib/*": ["lib/*"],
"#/pages/*": ["pages/*"],
"#/scripts/*": ["scripts/*"],
"#/styles/*": ["styles/*"],
"#/test/*": ["test/*"],
"#/types/*": ["types/*"]
}
},
"include": ["**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
"exclude": ["node_modules", ".next", "out"]
}

How can I compile a project in typescript (tsdx) without including the source files?

I'm trying to compile a typescript project into javascript but for some reason, I keep getting the project's source files in the dist folder. I think it's something to do with my config but I've been through the docs and I can't find something about output folder structure or anything similar sounding. Here's my tsconfig:
{
"include": ["src", "types", "test"],
"compilerOptions": {
"target": "es5",
"module": "esnext",
"lib": ["dom", "esnext"],
"importHelpers": true,
"declaration": true,
"sourceMap": true,
"rootDir": "./src",
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noImplicitThis": true,
"alwaysStrict": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"*": ["src/*", "node_modules/*"]
},
"jsx": "react",
"esModuleInterop": true
}
}
I am using tsdx and read in one of their issues that some config values are skipped. Is there anyone familiar with the library?

you can only remove the "src" in your first option called "include"

No Files Created When Trying To Migrate JS from TS

I have a Next.js project in Typescript. I need to get it back to Javascript. I need to remove all Typescript markup or compile it to ES2018 JS.
I tried to run tsc command at the project root with this config:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": ".",
"paths": { "*": ["types/*"] },
"allowJs": true,
"allowSyntheticDefaultImports": true,
"jsx": "preserve",
"lib": ["dom", "es2018"],
"module": "esnext",
"moduleResolution": "node",
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"preserveConstEnums": true,
"removeComments": false,
"skipLibCheck": true,
"sourceMap": true,
"strict": false,
"target": "esnext",
"esModuleInterop": true,
"experimentalDecorators": true,
"strictPropertyInitialization": false
},
"include": [
"app/**/*"
],
"exclude": [".next", "server/**/*.*"]
}
Nothing happened.
I want .ts files to be replaced with .js files. If not possible, I need .js files next to .ts files. I can manually delete .ts files.

You have "noEmit": true in your config, which causes the compiler to not emit any .js files. As for deleting the .ts files you will need to do that manually.