Encountering numerous TypeScript errors due to a JavaScript file in Visual Studio 2017

Kindly review the update below

I utilized the following package as a foundation for my VS Project -> https://github.com/AngularClass/angular2-webpack-starter

Everything ran smoothly in Visual Studio Code, but when I attempted to convert it into a Visual Studio 2017 Project (node.js web), some issues arose.

In Visual Studio, TypeScript definitions seem to be installed in a specific directory 

C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\@types

In addition, I added @types/node in my package.json which created the appropriate node_modules folder.

Now, Visual Studio is displaying error code TS4090 (Conflicting definitions for 'node').

Is there a way, other than deleting the folder in \AppData, to instruct Visual Studio which @types it should utilize?

The complete setup of TypeScript is somewhat unclear to me... Does MSBuild identify an existing tsconfig.json? or do I need to configure it in the project-file as shown here?

UPDATE

I just realized that I was actually editing a .js file. As soon as I changed the extension to .ts, all warnings and errors disappeared. I was also encountering numerous typescript errors (such as TS2307, can't find module '@angular/core') before changing the extension from .js to .ts

The file simply had an import (from node)

import * as fs from 'fs';

Can someone please explain why these errors occurred? Why did a JS file result in over 200 typescript errors (some not even related to the above import)?

UPDATE2 the errors that are appearing include

  • TS2403 - Subsequent Variable declarations must have the same type.
  • TS2300 - Duplicate identifier 'PropertyKey'
  • TS4090 - Conflicting definitions for 'node' found (in other words: found in ./node_modules and 
    C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\@types

All these errors are caused by d.ts files in 

C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\@types
or 
C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\Common7\IDE\CommonExtensions\Microsoft\TypeScript\lib.es6.d.ts

As noted by Bowden Kelly, the root of these problems seems to be the definition files MS included in this directory 

C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\@types
, once I install my own definition files in ./node_modules, Visual Studio locates both definitions (if present) while editing JS files. So the solution would either be:

  • adhering to the MS Way
  • or somehow excluding MS Directory
javascripttypescriptnpmvisual-studio-2017

Answer №2

To address issues with JavaScript, consider disabling the "new JavaScript language service" in Visual Studio by navigating to 

Tools > Options > Text Editor > JavaScript/TypeScript > Language Service
. This simple solution has helped alleviate errors when opening various JavaScript files.

When encountering Angular 2 errors such as "cannot find module @angular/core," ensure that a tsconfig.json file is present in the project directory. Closing and reopening the solution will deactivate everything on the TypeScript tab of project properties.

If using TypeScript 2.x, ensure that the compiler can locate and utilize the types from Angular 2 found in 

node_modules/@angular/core/index.d.ts
, unless there is an overriding setting in the tsconfig file like types: [].

Despite sporadic unjustified errors in the Visual Studio Errors window, it is important to note that the Visual Studio TypeScript Language Service dictates errors and intellisense within the IDE and is linked to a specific TypeScript version (2.1 in VS 2017). The root cause may lie within the undocumented TypeScript Virtual Projects.

For further insights, consider exploring these informative links:

http://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types

https://github.com/Microsoft/TypeScript/issues/14540

Answer №3

The TypeScript definition files located at 

C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\@types
are specifically for JavaScript IntelliSense purposes. If your project includes TypeScript or is configured with a tsconfig.json file, you will need to obtain and store your own .d.ts files within the project. Fortunately, all the necessary .d.ts files are already included in the package.json, so a simple npm install should suffice.

If you're encountering conflicts related to 'node' definitions, it may be because you have duplicate copies of the node.d.ts file - one manual installation and one from the project's package.json.

In regards to the TypeScript errors in your JavaScript file, could you provide an example of one of the errors along with the corresponding code snippet?

Regarding integration with MSBuild, it might not be necessary for this project which is already set up to run with npm scripts + webpack. You may want to explore the following plugin: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner

Furthermore, working within a Node.js web project may not be ideal. It could be more beneficial to simply open the folder in Visual Studio by navigating to File > Open > Folder... This approach provides access to essential editing tools without being constrained by MSBuild or VS project structure, especially since this project wasn't designed to leverage those features.

Please keep me updated on any other challenges you come across.

Answer №4

Just letting you know, this issue has already been resolved in Visual Studio 17.2 👍

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can Node.js be successfully installed on an Ubuntu Server 20.04 running on a virtual environment?

Struggling with the installation of NodeJs and NPM on Ubuntu Server 20.04 in a Virtual Machine. The unpacking process seems to be taking an unusually long time compared to when I installed it on my physical computer running Ubuntu Desktop 20.04. Is there a ...

node.jsnpmaptubuntu-20.04ubuntu-server

Tips for eliminating corner indexes from a 2D array?

Exploring forward ray tracing algorithm using Three.js. I have developed a sample using a 2D array where the Spotlight's location is parsed, but not directly involved. To create lines of sight, I set: startPoint = position of SpotLight endPoint = ...

javascriptfor-loopmultidimensional-arraythree.js2d

"Embedding a Highcharts web chart within a pop-up modal window

I am looking to incorporate a Highcharts web chart onto a specific part of a Bootstrap modal, while ensuring the size remains dynamic along with the modal itself. Here's what I have attempted so far: Sample HTML code: <td><a href="#">${ ...

javascriptjquerycsstwitter-bootstraphighcharts

Deleting occurrences of a specific text from a JSON document and subsequently analyzing its contents

I am having an issue with a JSON file in which there are strings of characters attached to many of the field names. This is making it difficult for me to target those objects in JS. The structure looks like this: "bk:ParentField": { "bk:Field": "Va ...

javascriptjsonnode.jsparsingfs

Vue routing stops working when there is no hash in the URL (no designated input file)

I am facing the need to operate Vue router in its default mode, known as hash mode, and unable to use it in history mode. In this mode, all my dynamic routes have a leading hash, like http://myurl.com/#/highlights. However, removing that initial hash, such ...

javascriptvue.jsroutesurl-routingvue-router

Tips for creating an onChange function in an input field using jQuery

I am looking to dynamically create inputs where each input has an `onChange` function with a variable. Here is my code: var distinct_inputs = 0; $('.icon1').click( function(){ distinct_inputs = distinct_inputs + 1 ; $('#insert-file&apo ...

javascriptjqueryhtml

Utilizing Node.js modules in a frontend HTML file with the help of browserify

I am encountering difficulty using a node.js module on my website with browserify. The example provided only demonstrates how to run a separate JavaScript file, not how to incorporate the node.js module within the .html file itself. This seemingly simple i ...

javascriptjqueryhtmlnode.jsbrowserify

Refreshing the page triggers the callback function that retrieves the checkboxes selected in a Kendo treeview component

How can I retain the selected checkboxes after refreshing the page? Is there a way to achieve this using AJAX when submitting data to a database and then reloading the page? AJAX //AJAX call for button $("#primaryTextButton").kendoButton(); va ...

javascriptphpajaxcheckbox

Guide to retrieving account information from a MySQL database

I am currently developing a web application utilizing a three-tier architecture with express and docker. I am integrating mysql as the database to store user accounts. Below is my initialize-database.sql file: CREATE TABLE accounts( personId INT NOT N ...

javascriptmysqlnode.jsexpress

The MarkCompactCollector was unsuccessful in promoting the young object due to a failed allocation process

After successfully cloning a Git repository that houses a Vue project using the command git clone, I proceeded to run npm install in order to install all necessary dependencies, resulting in the creation of the node_modules folder. However, upon executing ...

javascriptnode.jsvue.jsnpm

Update AngularJS data models using the callback function "on change" from a jQuery plugin

Currently, I am in the process of developing a web application for a touchscreen computer that requires an on-screen keyboard. After searching extensively, I came across this fantastic (or at least the best one I could find) keyboard plugin: https://github ...

javascriptjquerydomangularjson-screen-keyboard

What is the best approach to gather both the intersection and the complements of two arrays in a single operation?

Comparing Arrays - const source = [1, 1, 1, 3, 4]; const target = [1, 2, 4, 5, 6]; Initializing Arrays - const matches1 = []; const matches2 = []; const unmatches1 = []; Array Matching Process - for (const line of source) { const line2Match = target.fi ...

javascriptarraysintersectionarray-differencecomplement

Utilizing socket.io to access the session object in an express application

While utilizing socket.io with express and incorporating express session along with express-socket.io-session, I am encountering difficulty in accessing the properties of the express session within the socket.io session object, and vice versa. const serve ...

javascriptexpresssocket.io

Using TypeScript to send state through history.push({...})

I recently utilized the history.push method to redirect to a specific URL while passing along some information through the included state. Here's how I implemented it: const history = useHistory() history.push({ pathname: '/someurl/', ...

javascriptreactjstypescriptreact-router

Jest-Native encountered an error: "SyntaxError: Unable to use import statement outside of a module"

Trying to perform unit testing using https://github.com/callstack/react-native-testing-library along with https://github.com/testing-library/jest-native. I am able to test plain JavaScript files without any issues, but I am facing an error when testing com ...

javascriptreactjsreact-nativeunit-testingjestjs

Can Autocomplete in Angular4+ support multiple selection options?

I am trying to implement a multi-selection feature on filtered items using an autocomplete function. I found inspiration from this tutorial and attempted the following code: The component : <form class="example-form"> <mat-form-field class=" ...

angulartypescriptangular-material

AngularJS supports asynchronous validation on blur

Using Angular JS version 1.5.6, I am looking to implement asynchronous input validation that occurs only on blur. However, I am unable to use modelOption: {debounce: 500} or modelOption: {updateOn: 'blur'} due to the directive being used with oth ...

javascriptangularjs

An unexpected error occurred in the file node_modules/@firebase/firestore/dist/index.d.ts at line 27:28 - Please insert a ']' at this location

When adding firebase to my Angular app, I encountered an error while running ng serve: ERROR in node_modules/@firebase/firestore/dist/index.d.ts:27:28 - error TS1005: ']' expected. 27 [K in keyof T & string as `${Prefix}.${K}`]+?: T[K]; ...

angulartypescriptfirebasenpmfirebase-realtime-database

Is it possible to display a thumbnail image in a separate full-sized window by using CSS or JavaScript?

I am currently utilizing a program called WebWorks 2020.1 that automatically creates <img> tags from my FrameMaker source input when published to DHTML. Unfortunately, I do not have the ability to directly modify the HTML <img> or <a> tag ...

javascripthtmlcssimage

Adding the most recent version of jquery causes the webpage to malfunction

Currently, I am facing a challenge on a website that has an outdated version of jQuery (1.7.2) included in the header. In order to use a plugin that requires the latest version of jQuery, I tried linking the newer version (2.1.3) in the footer. However, j ...

javascriptjquery