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?

Importing types from outside the root dir

I have a problem with using a shared folder between app and server which are in a single repository. My project structure is like below:
- project
-- app
--- src
--- package.json
--- tsconfig.json
-- shared //this folder should be accessible in backend and app
-- lib //backend
-- package.json //backend
-- tsconfig.json //backend
Can someone tell me why I can't use inside app components my types placed in shared? Right now when I try to import like this:
import { Test } from "../../shared/test.interface";
compiler throw me this error:
File '.../shared/test.interface.ts' is not under 'rootDir' '.../app'. 'rootDir' is expected to contain all source files.
When i try to import this file inside lib (backend) then everything is ok. How can i properly configure app to have availability to import types from shared inside app?
here is my tsconfig.json for app
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"composite": true,
"declaration": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"noUnusedLocals": false,
"noUnusedParameters": true,
"removeComments": false,
"preserveConstEnums": true,
"baseUrl": "src/",
"outDir": "src/dist",
"sourceMap": true,
"skipLibCheck": true,
"noImplicitAny": false,
"strictNullChecks": false,
"strict": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"typeRoots": [
"./node_modules/#types"
],
"lib": [
"dom",
"dom.iterable"
],
"isolatedModules": true,
"incremental": true,
"allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true
},
"exclude": [
"node_modules"
],
"include": [
"src/**/*"
]
}
Thanks for any help!

tsconfig paths not importing css modules, only js/ts files

I used Vite to scaffold a typescript-react project, and i wanted to use the given tsconfig.json file to create shortcuts for my directories, so i wont have to deal with long relative paths when importing stuff in my components.
This is tsconfig.json :
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "./src",
"paths": {
"#styles/*": ["styles/*"],
"#routes/*": ["routes/*"],
"#components/*": ["components/*"],
"#assets/*": ["assets/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
I get an error when trying to import LandingPage.module.css into my component LandingPage.tsx using this line : import styles from "#styles/LandingPage.module.css";
here's the relevant folder structure :
The Intellisense in VS Code when i type import styles from "#styles/" shows only the js file in styles folder, and doesn't pick up on the css module.
Attempted solution :
A comment about restarting the Typescript server, didn't work.
Ref : This SO question

Disable type checking from all .tsx files

I'm trying to prevent type checking from my typescript project as it's still under development.
I tried adding "checkJs": false in my tsconfig file but still type checking triggers. Only solution i found was to add // #ts-nocheck in every file of my project. Is there a way to disable type checking without having to add // #ts-nocheck to every single file and instead use it in a single place.
my tsconfig.json file
{
"compilerOptions": {
"target": "es5",
"checkJs": false,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noEmit": true,
"jsx": "preserve",
"isolatedModules": true
},
"include": [
"src"
]
}

create .eslintrc.js in your root to ignore what you want or config your eslint. please read the docs, there are many rules in there. your case:
module.exports = {
extends: ["react-app", "plugin:prettier/recommended"],
rules: {
"#typescript-eslint/ban-ts-ignore": "off"
},
plugins: ["react", "#typescript-eslint", "prettier"]
};
to igore type check

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"