We Keep Coding

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

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

Including Vue Components as node modules in a nuxt vue/typescript project

I have a nuxt project that I recently migrated to typescript. I also have a seperate repo full of vue components that are imported as node modules into my nuxt project.
I have included them in my typescript class based SFC using import Component from '#place/vue-component'
When I try to run my app I get 500 errors with this message render function or template not defined in component: Card but the app does compile successfully.
My tsconfig:
{
"compilerOptions": {
"target": "ES2018",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"types": [
"#types/node",
"#nuxt/types"
],
},
"exclude": [
"node_modules"
],
}
Any ideas would be appreciated!

It took a while but this is what worked for me:
In my vue.shim.d.ts file I needed to declare each import like this:
declare module "#place/vue-component" {
import Vue from 'vue'
export default Vue
}
and in addition:
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
Then this was my tsconfig:
{
"compilerOptions": {
"target": "ES2018",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"types": [
"#types/node",
"#nuxt/types"
],
},
"exclude": [
"node_modules"
],
}

SyntaxError: Unexpected token { when running ts-node in Angular Package Format project

I'm trying to run a typescript file with ts-node. Getting a weird error:
import { tes } from "./tes";
^
SyntaxError: Unexpected token {
at Module._compile (internal/modules/cjs/loader.js:720:23)
If I copy the project ts files into an empty directory and try to run the file without any configuration it works fine, so it's something in the configuration.
I also tried generating a brand new angular package format project:
ng new proj --create-application=false
cd proj
ng g library x
And if I delete all the tsconfig files associated with the project and the library, ts-node runs fine. When I leave them in I get the same error.
The tes file is inside a Angular Package Format library. This is the top level tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"lib": [
"es2018",
"dom"
],
"paths": {
"csv": [
"dist/csv/csv",
"dist/csv"
]
}
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
This is the project specific tsconfig.lib.json :
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"target": "es2015",
"declaration": true,
"inlineSources": true,
"types": [],
"lib": [
"dom",
"es2018"
]
},
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"enableResourceInlining": true
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]
}
Thoughts?

It looks like your tsconfig is set to output js using esnext modules, which aren't understood by node without configuration. You can either:
Remove the "module": "esnext", line from your tsconfig.json
Or, assuming you want to keep your config for Angular, configure your node to use the new ES module syntax e.g. by following the answer here

Ionic3 Highcharts-More import Error --JsAllow Not Set

I try to import Highcharts-more like this:
import Highmore from '../../node_modules/highcharts/highcharts-more';
then im getting the following Error:
Module '../../node_modules/highcharts/highcharts-more' was resolved to 'C:/Users/.../node_modules/highcharts/highcharts-more.js', but '--allowJs' is not set.
So I go into my tsconfig.json and add allowJs to my settings:
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
After that Im getting a new Error:
Cannot write file 'C:/Users/../node_modules/highcharts/highcharts-more.js' because it would overwrite input file.
I need highcharts-more in my whole Project and I couldnt find another way to import it. Please help

Use the same syntax as it's shown in this doc (Typescript section): https://www.npmjs.com/package/highcharts
The example is done for the exporting module - highcharts-more module should be imported analogically.