I have 3 different TS file and loading 2 TS file dynamically as below in 1 main TS file
if(x==='xyz'){
import('../../common1').then((common)=>{
common.loadContent()
})
} else if(x==='abc'){
import('../../common2').then((common)=>{
common.loadContent()
})
}
Now in both TS file I am importing jquery and also import jquery parent TS file
import * as $ from "jquery"
My tsconfig.json
{
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"typeRoots": ["./node_modules/#types", "./node_modules/#microsoft"],
"types": ["es6-promise", "webpack-env"],
"lib": ["es5", "dom", "es2015.collection"]
}
}
So my question is do jquery file will load 3 times or only once.
Webpack is a bit unpredictable in this case, I'm struggling with it myself, but I don't think it will be loaded multiple times. After the first time it is cached and will be taken from the module cache. The only important thing is that you set the module type in the tsconfig.json to "esnext", what you have done.
Related
The module arrayGenerator.ts lies inside a subfolder, it works fine for other modules(Array.ts) inside the parent folder. But when I add a new module Sorting.ts, it gives me can't resolve the error.
There is inconsistency regarding the compilation. no Array.js in dist but it was working.. path is like this. and below is my tsconfig.json. I tried some configurations like change "src" to "src/**/*", but all don't work or the compiler turned down the changes.
dir
- slices
- dist
- Array.ts
- Sorting.ts
- bricks
- arrayGenerator.ts
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"noEmit": true
},
"include": [
"src"
]
}
The issue disappeared after I transferred code to a new template.
I had a similar issue, and it went away after re-saving the files that caused errors. The problem is very reproducible when moving or renaming files. Seems like Webpack is not updating its cache.
I am trying to import files using regular import and with the custom absolute paths in Nextjs using typescript.
For some reason I keep getting an error that the module cannot be found but my IDE is able to link the file when I click on it. Also, when its a regular javascript file, instead of typescript, it works fine and files are imported.
For now im using // #ts-ignore and it works, but I wonder if there is a better way to solve this error.
My tsconfig:
{
"compilerOptions": {
"target": "es2015",
"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",
"baseUrl": ".",
"paths": {
"#/*": ["src/components/*"],
"#/*": ["public/assets/images/*"],
}
},
"include": [
"public/**/*",
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}
Try changing the path of the import.
If you have a baseUrl of “.”, the path would be ...from '/public/...'. instead of ...from './public/...'
The following StackOverflow answer told me how to use react-app-rewired to import JavaScript files from outside the src folder, without ejecting the app:
https://stackoverflow.com/a/55298684/377011
However, when using this with a Typescript file outside of the src folder (i.e. import * from '../../myfile.ts'), I get the following error:
Module not found: Can't resolve 'ts-loader' in '...\myapp'
So I installed ts-loader (yarn add ts-loader), but now I'm getting
Error: TypeScript emitted no output for ...\myapp\src\index.tsx
noEmit is set to true in my tsconfig.json.
Any idea?
Edit: This is my tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}
I am having an issue with VSC where all my typescript classes are triggering the intellisense and coming up with this warning:
"[ts] Experimental support for is a feature that is subject to change
in a future build. Set the 'experimentalDecorators' option to remove
this warning."
This is a documented issue, with various fixes documented in these posts:
https://github.com/Microsoft/TypeScript/issues/9335
Experimental decorators warning in Visual Studio Code
However I am using a now more recent version of VSC (it was actually me updating it today that seems to have triggered something), and with that none of the solutions mentioned here seem to work.
I have:
Added the "typescript.tsdk": "../node_modules/typescript/lib" option to my .vscode settings
Removed various lines in the tsconfig.json file in the root of the app including lib, baseUrl and others, fully reopening VSC inbetween tries
Tried alternate Typescript versions in my package.json
Restarted my computer on the off chance
Here's my current tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2016",
"dom"
]
}
}
I am using VSC version 2.3.2 and my TS version in my package.json is set to "typescript": "~2.2.0".
Is there something here I'm missing?
this is what what worked for me:
tsconfig.js (relevant part):
{
"compilerOptions": {
...
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"outDir": "dist",
...
},
"include": [
"src/index.ts"
]
}
Here is the full file:
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": true,
"strictNullChecks": true,
"allowJs": true,
"lib": [
"es6"
],
"module": "commonjs",
"moduleResolution": "node",
"outDir": "dist",
"sourceMap": true,
"target": "es6"
},
"include": [
"src/db/**/*.ts",
"src/index.ts"
]
}
Basically I just added the include attribute instead of using the files attribute.
I already tried to include a line of typings but that doesnt resolve this issue for me
here is my tsconfig.json file:
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/#types"
],
"types": [
"jasmine"
]
}
}
the path to node_modules is correct
I'm using this temporary solution - while I hope that the atom-typescript plugin can solve it better.
Install the types;
npm install #types/jasmine --save-dev
Added this line into my src/app/app.component.spec.ts file;
import '../../node_modules/#types/jasmine';
Didn't need to add it into any other spec files, editing just this one file solves the issue for me.
Another work-around I found, works, but not as good as above for me, so depending on your needs was to edit "package.json", by moving the jasmine reference in the "devDependencies" up to the "dependencies" section;
"#types/jasmine": "^2.5.38"
I encountered the same issue. To fix it, I removed the typeRoots, and just kept the types array.
I've already solved same problem. I'm Atom user too. Just exclude spec.ts files in tsconfig.json. My tsconfig.json looks now like this:
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/#types"
]
},
"exclude": [
"./src/*.spec.ts",
]
}
Read more about tsconfig here: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html