I'm trying out TypeScript for the first time and am migrating an existing JavaScript codebase.
I've followed the directions on the TS migration guide but ran into build problems right away.
The main blocker I'm hitting is that tsc is complaining about trying to compile a .ts file that lives in my node_modules directory.
My tsconfig.json is:
{
"compilerOptions": {
"outDir": "./dist",
"allowJs": true,
"lib": ["esnext"],
"target": "es5"
},
"include": ["./src/**/*"],
"exclude": ["node_modules", "__tests__"]
}
As you can see, I've tried to tell tsc to ignore the node_modules directory, but it looks like it's still going in there.
This is the error - though I'm not sure how helpful it is:
node_modules/http-link-dataloader/dist/src/types.d.ts:14:22 - error TS2304: Cannot find name 'RequestInit'.
14 referrerPolicy?: RequestInit['referrerPolicy'];
~~~~~~~~~~~
Any advice?
You might need a "skipLibCheck": true in compiler options.
Via: https://github.com/Microsoft/TypeScript/issues/14293
Edit: Digging into this further you shouldn't really need to skipLibCheck. The issue is that TS is looking into the definitions for http-link-dataloader and it cannot find RequestInit.
Looking into the definition file for http-link-dataloader it does not actually define the type for RequestInit:
https://github.com/prisma/http-link-dataloader/blob/master/src/types.ts
Further digging has lead me to find that RequestInit is actually part of fetch. Relevant GitHub Issue
In order to use typings for client side js like fetch you'll want to use the dom library in typescript.
"lib": [
"dom",
...
]
Related
Earlier, I have two JS files:
old-file.js
new-file.js
I later noticed that my app.js' intellisense was always referring to the old-file.js but not the new-file.js, so I deleted the old-file.js (as though I've renamed the old file). But now, when working on my app.js, the intellisense has gone missing, which means VSCode does not automatically make use of the definitions in the new-file.js, which has the same and also additional object declarations.
I tried looking for my Typescript and JavaScript Language Features built-in extension but can't find it in my VSCode. I also restarted my VSCode many times but still not working. My jsconfig.json looks fine in the project root folder as shown below:
{
"compilerOptions": {
"module": "commonjs",
"target": "es2016",
"jsx": "preserve"
},
"exclude": [
"node_modules",
"**/node_modules/*"
],
"typeAcquisition": {
"include": [
"jquery",
"angular"
]
}
}
Note that I was talking about the "implicit intellisense" of VSCode across external files, no import statements, nothing. Also note that my app.js and new-file.js will always be merged as app.min.js by terser at the later stage. Does anyone know what happen to my situation and how can I restore the intellisense of my new-file.js and put it back to work like the old one? Many thanks!
My structure is:
/Home
/home.js
/Home.jsx
In .jsx I'm trying to use go to defenition feature on path with webpack alias. To resolve webpack aliases I have jsconfig.json with this params:
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"moduleResolution": "node",
"jsx": "react-jsx",
"baseUrl": "./",
"paths": {
"#/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
And only in this type of situation
when .jsx and .js files of same name in same folder
I can't use the feature.
If I rename file it starting to work. Also it works in WebStorm without any changes.
Please, tell me what's wrong...
I fixed it!
The problem has disappeared when I deactivated this extenssion: JavaScript and TypeScript Nightly
VSCode uses TS engine under the hood to analyze JS. And the convention in TS is to omit file extension. So from TS engine’s POV, these two files of same name but diff extension are confusing.
I guess it’s just a limitation (or a bug? I’m not sure) of the TS language engine, not necessary anything you did wrong. WebStorm obviously uses other implementation to analyze/resolve package reference. Thus you don’t encounter problem there.
I don’t really know solution to your problem, can only provide above explanation. If I were you I’d just rename my file, not gonna spend time fighting tools.
I'm the author of next-translate library, and I'm working on an experimental version to which I get an error with React 16.14.0 and I don't understand why it happens. Upgrading React to version 17 then it works fine, but I don't want to force everyone who uses the new version of my library to migrate their React version.
I've created a reproducible error example:
https://github.com/aralroca/next-translate-error-reproduction
In order to reproduce this issue:
Clone this repo
Run yarn && yarn dev
Open localhost:3000
Open devtools
Error was not caught ReferenceError: exports is not defined
And the prerelease code of my lib is here:
https://github.com/vinissimus/next-translate/tree/1.0.0-experimental.14
tsconfig.json
{
"compilerOptions": {
"strict": false,
"module": "es6",
"target": "es5",
"jsx": "react",
"removeComments": true,
"moduleResolution": "node",
"esModuleInterop": true,
"declaration": true,
"lib": ["esnext", "dom"],
"allowJs": true,
"forceConsistentCasingInFileNames": true,
"outDir": "./lib/esm"
},
"include": ["./src"]
}
tsconfig-cjs.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "CommonJS",
"outDir": "./lib/cjs",
"declaration": false
}
}
And this is the package code:
https://www.runpkg.com/?next-translate#1.0.0-experimental.14
If anyone knows where this error came from and can help me I would be very grateful! I've been trying to solve it for several days but I'm a little lost because I don't know why it's happening... Thanks!
Note: Looks that it only happens in development, doing yarn build && yarn start works fine.
I've already fixed it, but if I'm honest, I haven't understood why... Let's see if someone can explain it to me!
I was debugging and saw that it was something in my library code that caused TypeScript to compile badly. So, I was uncommenting line by line, until I saw what was wrong with the line:
import App from 'next/app'
// Inside getInitialProps wrapper...
App.getInitialProps() // THIS LINE
It seems that when commenting App.getInitialProps() then TypeScript it compiles well. Fortunately, I have been able to dispense with this line of code in my library and now with prerelease 1.0.0-experimental.15 it seems to work well with React 16.
I don't really understand why this could be happening, could it be because I have Next.js as peerDependency? I hope someone can clarify for me why this was happening 🙏
Glad you've found the bug, here's the explanation of your case.
Let's compare the compiled result of both version:
Look around ln:54 in both files 1.0.0-experimental.14
1.0.0-experimental.15.
var react_1 = __importDefault(require("react"));
// The key different is the exclusion of this line:
var app_1 = __importDefault(require("next/app"));
var I18nProvider_1 = __importDefault(require("./I18nProvider"));
var loadNamespaces_1 = __importDefault(require("./loadNamespaces"));
Because you don't use App.getInitialProps() no more, the import App from 'next/app' is also dropped by TypeScript. The real problem lies in next/app module.
Following the breadcrumbs, we see next/app simple re-exports next/dist/pages/_app:
module.exports = require('./dist/pages/_app')
As of the content of ./dist/pages/_app, go check this link. It refs exports as a global variable everywhere, and that's causing the problem: Error was not caught ReferenceError: exports is not defined
The problem is clear, that code of next/dist/pages/_app.js is included in the bundled JS code shipped to the webpage without being transpiled properly by webpack.
But after this point I cannot provide further help since I'm not familiar with the next.js stack. Guess you need to tune the webpack config to do something about that exports global variable.
I have an Angular 6 app that I need to include a JS library. The library is proprietary so I cannot get into the specifics of what it is, but the issue I'm having is the TypeScript compiler seems to get confused with characters such as this <<24>> thinking it is a type casting when it's really not. Because of this issue I get the following error when I compile.
error TS8011: 'type arguments' can only be used in a .ts file
The file I'm including, that it's baking at, is a traditional JS file. I cannot modify this file as it's a minified library, and it's not available via NPM.
My initial thought was to just have the TS compiler to ignore/exclude the file, but that doesn't work for some reason. Here is a tsconfig.json config I've tried that didn't work.
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"allowJs": true,
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
]
},
"exclude": [
"./src/js/MyLib.js"
]
}
I have tried with "allowJs" enabled and disabled, but I get the same error.
Do you all have any idea how I can get the TS compiler to effectively ignore this file so I can just import it with a script tag?
Thanks!
The way you need to reference those types of files (standard .js files) is one of two ways:
Add the script reference in the script array in the angular.json file
Add the script reference directly in the index.html file
I would go with the first option as the documentation specifically states this:
https://angular.io/guide/workspace-config#additional-build-and-test-options
An object containing JavaScript script files to add to the global
context of the project. The scripts are loaded exactly as if you had
added them in a tag inside index.html. See more in Styles and
scripts configuration below.
I think the issue you're having is that you're trying to use import statements or reference the script file in a way that the tsc (TypeScript Compiler) is trying to transpile it.
I am trying to migrate my code from java script to type script and using Visual Studio Code as editor.
When I rename the files from js to ts in my project, I do not see any suggestions / warnings (usually underlined red color - say for example variable type not declared in origianl JS file).
Currently I am compiling the ts code manually and fixing the errors but is there any preference setting in VS code to detect the errors directly instead of compiling and checking ?
The tsconfig.json is:
{
"compilerOptions": {
"module": "commonjs",
"allowJs": true,
"target": "es6"
},
"exclude": ["node_modules"]
}
Thank you.
Added the below type definition rule to tslint.json file to get this reflected in VS code editor: "typedef": [true, "call-signature", "parameter", "member-variable-declaration"] - That solved the issue.