MSBUILD encounters numerous JQuery errors when compiling a web project with TypeScript

Currently, I am working on a .net core 3.1 (netcoreapp3.1) razor pages project that includes typescript files and a few javascript files. The project builds perfectly from Visual Studio 2019 (professional) as well as from the command line using MSBuild.

However, when attempting to build from a "deployment" folder where the project has been checked out from source control, I encounter several typescript errors. These errors are of the following nature:

error TS2315: Build:Type 'JQuery' is not generic.
error TS2702: Build:'JQuery' only refers to a type, but is being used as a namespace here.
error TS2339: Build:Property 'css' does not exist on type 'string'.

(please note: one of the above errors is more frequent than the other two)

It seems like the jquery typing files are not being detected properly. They are clearly mentioned in the .csproj file:

  
<ItemGroup>
    <PackageReference Include="jquery.TypeScript.DefinitelyTyped" Version="3.1.2" />
    <PackageReference Include="jqueryui.TypeScript.DefinitelyTyped" Version="1.5.1" />
    <PackageReference Include="Microsoft.TypeScript.MSBuild" Version="3.9.6">
        <PrivateAssets>all</PrivateAssets>
        <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
    </PackageReference>
</ItemGroup>

The tsconfig.json also seems normal:

{
    "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",
        "skipLibCheck": true,
        "outDir": "../Source"
    },
    "exclude": [
        "node_modules"
    ]
}

Edit: I have tried getting a fresh copy of the entire solution from source control into a new directory, performed nuget restore, dotnet restore, and msbuild /t:restore without success. MSBuild continues to fail with the same set of errors. Building the solution in VS2019 works fine without any errors.

At this point, I am unsure of what to investigate next. Does anyone have any suggestions on what could potentially be going wrong?

typescriptmsbuild

Answer №1

Problem Solved.

The issue stemmed from a node_modules\typings (types?) folder located above the project directory within the solution. This folder was not included in the source control, leading to discrepancies in clean locations.

In addition, there were outdated typings in "scripts\typings", which may have caused further complications.

The resolution involved:

  1. Removing unnecessary typings

  2. Creating a libman.json file with required typings (right-click on "wwwroot" and select "add -> client-side library"):

    {
      "version": "1.0",
      "defaultProvider": "unpkg",
      "libraries": [
        {
          "library": "@types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ef4efebfbece7deadb0abb0ae">[email protected]</a>",
          "destination": "wwwroot/types/jquery/"
        },
        {
          "library": "@types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6958f9c9c8a83a6d4c8d5c8d4">[email protected]</a>",
          "destination": "wwwroot/types/sizzle/"
        },
        {
          "library": "@types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="472d363222353e322e07766976756975">[email protected]</a>",
          "destination": "wwwroot/types/jqueryui/"
        }
      ]
    }
  1. Specify typings explicitly in tsconfig.json:
    {
      "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es6",
        "skipLibCheck": false,
        "outDir": "../Source",
        "typeRoots": [ "./types" ]
      },
      "exclude": [
      ]
    }

The key takeaway... Typescript compiler from Nuget is good, while type definitions from Nuget should be approached with caution. Relying solely on Visual Studio's default for typeRoots can lead to issues.

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 Envs in Bit be linked together?

My React environment is set up at this link: . It is configured with the following dependencies: { /** * standardize your component dependencies. * @see https://bit.dev/docs/react-env/dependencies **/ "policy": { // peer and dev ...

reactjstypescriptbit.dev

When a node_module package includes type imports, Next.js can encounter build failures during the linting and type validity checking processes

This NextJS 13 project utilizes a package that has an inner core dependency (react-leaflet->@react-leaflet/core). When running yarn run build, the build fails at "Linting and checking validity of types." It appears to be a TypeScript compatibility iss ...

typescriptnpmnext.jsvercelreact-leaflet

Creating and utilizing multi-module NPM packages written in Typescript: A comprehensive guide

For a while now, I've been quite at ease creating and utilizing NPM packages with Typescript. However, these packages have typically been provided and consumed as a single module. Now, I'm interested in publishing packages that contain more than ...

typescriptnpmmodulepackage

Top method for changing Enum to Set in TypeScript

Take a look at the enum below: enum Animes { OnePiece = 'One Piece', Naruto = 'Naruto', Bleach = 'Bleach' } How can we efficiently transform this enum into a Set? ...

reactjstypescript

Sending VSCode to external functions

My primary entrypoint containing the activate() function is: extension.ts import * as vscode from "vscode"; import { subscribe } from "./eventListeners.ts"; export function activate(context: vscode.ExtensionContext) { vscode.command ...

typescriptvscode-extensions

Tips for accessing the StaticRouterContext in Typescript with react-router-dom

Currently, I am implementing SSR for my app specifically targeting robots. There is a possibility that the render of the <App/> component may lead to a route not being found. In order to handle this scenario, I need to identify when the render ends ...

reactjstypescriptreact-routerreact-router-domserver-side-rendering

Retrieve the values of a dynamic JSON object and convert them into a comma-separated string using Typescript

I recently encountered a dynamic JSON object: { "SMSPhone": [ "SMS Phone Number is not valid" ], "VoicePhone": [ "Voice Phone Number is not valid" ] } My goal is to extract the va ...

angulartypescript

Contrasting Compositions with Generics

Let's consider a scenario where we have an abstract class A and three concrete classes that inherit from it: A1, A2, and A3. There is also another hierarchy tree with an abstract class B and three concrete classes B1, B2, and B3. Each concrete class A ...

typescriptgenericscomposition

React dynamic table

I've been experimenting with creating a dynamic table in React that allows users to add and delete rows. I need the data entered by the user to be saved, possibly using in-state management so that I can work with it later. Essentially, I'm looki ...

javascriptreactjstypescripttwitter-bootstrapmaterial-ui

Top tips for accessing and modifying an immutable object within a component retrieved from an RXJS/NGRX store in Angular

This week we successfully updated our Angular v9 app to v11 and RXJS v6.6 with minimal issues. However, due to the store being in freeze mode, we are encountering errors when trying to update the store in certain areas of our code. While most of the issue ...

angulartypescriptrxjsngrxangular11

Combining Angular subscriptions to fetch multiple data streams

I am looking to retrieve the most recent subscription from a group of subscriptions. Whenever the value of my FormControl changes, I want to capture only the latest value after the user has finished typing. Below is the code snippet I am using - let cont ...

javascriptangulartypescriptrxjs

Accessing Github REST API with Next-auth token

Looking to enable user login and retrieve specific user data using the Github REST API, such as repositories and issues. After successfully implementing the login feature, I encountered an obstacle with the Github REST API that requires a token for endpoi ...

typescriptgithubnext.jsgithub-apinext-auth

Struggling with using Redux with tassign in Angular (typescript) to combine state.array and action.array. However, encountering an issue where state.array.join is not a function

Redux function to combine all videos: function combineAllVideos(state, action) { return tassign(state, { allVideos: state.allVideos.concat([action.data]) }); } Declaration + State for all videos array: allVideos: Array<Object>; OR allVid ...

angulartypescriptreduxangular-redux

Despite the presence of a producer and topic, sending Kafka messages is proving to be a challenge

Currently, I am using TypeScript and the KafkaJS library on my local machine with a single Kafka broker. After successfully connecting a producer, confirming the creation of my topic, and creating messages like so: const changeMessage = { key: id, ...

javascripttypescriptapache-kafkakafkajs

What is the procedure for entering the output generated by genMockFromModule when creating a custom mock in Jest?

Looking at my orders directory structure, I have a function in the orders/helpers file that I want to test using a manual Jest mock. orders __mocks__ helpers.ts __tests__ orders.ts helpers.ts orders.ts The orders/helpers.ts file contains ...

reactjstypescriptjestjs

Parsing temporary storage of database query results

My experience with OOP languages like C# and Java has been good, but I am relatively new to JavaScript/TypeScript. I find callback functions confusing, especially when using them with the BaaS ParseDB. For example, finding all playlists for a certain user ...

javascripttypescriptcallback

Guide on how to display matching options in an input box using HTML datalist based on user input at the beginning

I am a beginner in React and I am looking to create an autocomplete suggestion box for a text input field. I want the suggestions to only match the first letters of the available options, unlike the current behavior of HTML's <datalist>. Althou ...

htmlreactjstypescriptinputhtml-datalist

Obtain the promise value before returning the observable

I'm facing an issue with the code below, as it's not working properly. I want to return an observable once the promise is resolved. Any thoughts or suggestions would be greatly appreciated. getParalelos() { let _observable; this.getTo ...

angulartypescriptweb

Using TypeScript and Node.js with Express; I encountered an issue where it was not possible to set a class property of a controller using

I have a Node application using Express that incorporates TypeScript with Babel. Recently, I attempted to create a UserController which includes a private property called _user: User and initialize it within the class constructor. However, every time I ru ...

node.jstypescriptexpress

Combining data from various API calls into one cohesive array using RXJS

My RXJS Pipeline is structured as follows: const logs: number[] = [1, 2, 3, 4]; const url = 'http://some-url-here.com'; const pipeline = from(logs).pipe( switchMap(logId => this.callEndpoint(url, logId).pipe(map(response => response. ...

typescriptrxjsnestjs