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

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

Related

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!

How to make angular find imports automatically in vs code

I have a angular project generated with nrwl/nx, I generated an model folder manually, but if I try to import something from it I have to do it manually. Is there anyway to make a file where I can put the path to my models and it will automatically be found?
I looked a bit and found this in my tsconfig.base.json
{
"compileOnSave": false,
"compilerOptions": {
"rootDir": ".",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"module": "esnext",
"lib": ["es2017", "dom"],
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"baseUrl": ".",
"paths": {
"#moniesta-admin/auth-lib": ["libs/auth-lib/src/index.ts"],
}
},
"exclude": ["node_modules", "tmp"]
}
I tried to add it like my auth-lib folder but that does not work either. This is how the index.ts of auth-lib looks:
export * from './lib/auth-lib.module';
EDIT:
I tried to add my model like this:
"#moniesta-admin/model": ["model/index.ts"],
this is how the index.ts looks:
export * from '../models/*'
but this gives me the following error:
the typedeclaration or module was not found
EDIT v2:
Command is the following:
ng g #nrwl/angular:lib

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

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.

Categories