There was a problem identified in the file node_modules/@types/jqueryui/index.d.ts at line 645, column 11. The issue was reported

I encountered an issue with npm run build while using docker build. When I initially developed the project around 2 years ago, it worked perfectly with npm run build. However, upon rebuilding my development environment recently, I started encountering this error:

ERROR in node_modules/@types/jqueryui/index.d.ts(645,11): error TS1110: Type expected.

I attempted to resolve this by updating the typescript version on various platforms, which did improve the situation slightly but the error persisted in one specific location. If I remove @types/jqueryui, which is causing the error, then the error simply shifts to another package used in development.

Here are some of the steps I've taken: (1) Tried running as is (2) Updated the typescript version (3) Updated the @angular/compiler-cli version due to its dependency with TypeScript

I would greatly appreciate any guidance on how to eliminate this persisting error. Here are more details for reference:

(1) Error when executing the build command:

> [build_Hoge-front 10/10] RUN npm run build:
...
16.32 ERROR in node_modules/@types/jquery/JQuery.d.ts(12795,21): error TS1005: ')' expected.
... (bunch of other errors)

(3) Error after changing the version of @angular/compiler-cli:

> [build_Hoge-front 10/10] RUN npm run build:                                                                                                                                                                         
...
20.10 ERROR in node_modules/@types/jqueryui/index.d.ts(645,11): error TS1110: Type expected.

Package.json contents:

{
  "name": "Hoge-Test",
  "version": "0.0.0",
  "scripts": {
    ...
  }
  ...
}

Dockerfile contents:

FROM node:10.16.3-stretch@sha256:f4b6f471cdd4b66b27eef899e7f8423ecd9fbfc863b2cb7a59978a7f64c8e0c3 as build-front
WORKDIR /usr/src/hoge
COPY .git ./.git
COPY front-end ./front-end
WORKDIR /usr/src/hoge/front-end
RUN apt-get install -y git
RUN npm install
RUN npm install -g <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6c8d6cbe6908897958891">[email protected]</a>
RUN npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9a7aee4aaa0bbaaa5ace4b9bba6aebbacbaba89f8e7fce7f8">[email protected]</a> --save
RUN npm run build

I have experimented with different methods to address this issue such as altering package versions, however, the error persists. Any assistance or insights on resolving this problem would be highly appreciated.

Answer №1

I encountered the same issue and after some research, it seemed like the problem stemmed from version disparities.

After making a modification to the type as shown below, the issue was resolved, although there may be potential interface repercussions. Fortunately, I did not come across any negative consequences.

In order to rectify this problem, update type (645) in

node_modules/@types/jqueryui/index.d.ts
:

type ResizableThemingClass =
    | "ui-resizable"
    | "ui-resizable-resizing"
    | "ui-resizable-autohide"
    | "ui-resizable-handle"
    | `ui-resizable-${ResizableHandleDirection}`
    | "ui-resizable-ghost"
    | "ui-resizable-helper";

The revised value is as follows:

type ResizableThemingClass =
    | "ui-resizable"
    | "ui-resizable-resizing"
    | "ui-resizable-autohide"
    | "ui-resizable-handle"
    | "ui-resizable-n"
    | "ui-resizable-e"
    | "ui-resizable-s"
    | "ui-resizable-w"
    | "ui-resizable-ne"
    | "ui-resizable-se"
    | "ui-resizable-sw"
    | "ui-resizable-nw"
    | "ui-resizable-all"
    | "ui-resizable-ghost"
    | "ui-resizable-helper";

Answer №2

The issue has been successfully resolved. There was a glitch in the package version specification within the package.json file. It appears that the problem stemmed from updating the package version after a two-year period. The build process was completed without any issues once the following versions were corrected.

typescript: ~2.7.2 -> typescript: 2.7.2
@types/jquery: ^3.3.9 -> @types/jquery: 3.3.9
@types/jqueryui: ^1.12.4 -> @types/jqueryui: 1.12.4

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

The type 'undefined' cannot be assigned to the type 'string | Buffer | { key: string | Buffer; passphrase: string; } | GetPublicKeyOrSecret'

Verification Code for JWT This function is used to verify a jwt using typescript. public verify( token: string, secretOrPublicKey?: string | Buffer, options?: jwt.VerifyOptions ): Promise<object | string> { if (!secretOrPublicKey) { ...

Is it possible to interpret this in TypeScript?

I need assistance in understanding the following Code snippet. Can someone guide me through it? [Symbol.iterator](): IterableIterator<IPv4> { return this; } ...

Angular 6 custom validation: Ensure that at least one textarea is completed

Is there a way for me to display an error message when the submit button is clicked and none of the textarea fields are filled out? And how can I set it up so that the submit action only renders when at least one field is completed? Looking for the best ap ...

What are the steps to resolve routing issues within an Angular component integrated into an ASP.NET Core web application?

When it comes to routing in Angular, I have been following the Angular tutorial from documentation. My example application integrates Angular components with an ASP.NET Core 2.2 web app, and these components are displayed within .cshtml views. I use Angul ...

Unraveling HTML in TypeScript with Angular 2

After receiving encoded HTML from the back-end, I am struggling to decode it. I have attempted to use decodeURIComponent and decodeURI. The server sent me: "<table style="background-color: white;"> <tbody> <tr> ...

Unlocking the Power of Angular 12: Leveraging the Subscribe Method to Access Multiple REST APIs

We have a task where we need to make multiple REST API calls from the ngOnInit() method, one after the other. After making the first call, we need to pass the response to the second API call, and similarly for the third call, we need to get the value from ...

Swagger is refusing to cooperate because my model's attributes are set to true

Currently delving into Swagger and its documentation functionality through a YAML file. Previously, I had used @swagger in the controller file and everything worked fine. However, when attempting to transition to a YAML file for better organization, issues ...

The type 'angular' does not have a property of this kind

Having trouble importing a method into my Angular component. An error keeps popping up: Property 'alerta' does not exist on type 'typeof PasswordResetService'. any I've double-checked the code and everything seems to be in order! ...

converting an angular object into a string representation

I stumbled upon this guide: . and it includes the following piece of code: import { Component } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl ...

Troubleshooting localhost issue with a Chrome extension in Visual Studio Code

When working in VS Code, I encountered an issue with launching my HTML AngularJS project on localhost. Every time I try to launch the project, I receive an error message stating "Failed to load resource: net::ERR_CONNECTION_REFUSED (http://localhost:8080/) ...

Issue encountered in Angular app-routing module.ts: Type error TS2322: The type '"enabled"' cannot be assigned to type 'InitialNavigation | undefined'

When I recently updated my project from Angular 11 to 14, I encountered the following error when running "ng serve". Error: src/app/app-routing.module.ts:107:7 - error TS2322: Type '"enabled"' is not assignable to type 'InitialNavigation | u ...

Resetting values in Angular Reactive Forms

I have a complex FormGroup that includes multiple FormControls, FormGroups, and FormArrays. In order to reset the form to its initial state, I need to save the initial values, which may be fetched from the server as JSON data. The challenge is to reset th ...

Tips for correctly setting object initial values in React CreateContext

How can I correctly define the initial value of the constance trainsDetails in React Create Context? The trainsDetails is an object with various properties, fetched as a single object from an endpoint and has the values specified below in the TrainsDetails ...

Using TypeScript to Return a Derived Class as a Method's Return Type

I'm currently facing a challenge with an abstract class in typescript that includes a method to provide a callback for later use. The issue lies in the return type of the method, as it is set to the class itself, preventing me from using fluent style ...

Is the "Angular is not functioning" error message the result of a missing import?

Encountering an 'is not a function' error in Angular 7 / TypeScript 3, using an EventEmitter. This issue has been extensively discussed (a b), but solutions have not garnered many upvotes (a b c d e f). I am close to resolving it, but need s ...

Add a parameter to an npm script command

My npm script is set up as follows: "scripts": { "example": "webpack-dev-server --content-base examples/embeddable/" }, I am trying to create the --content-base argument dynamically based on the input when running the npm script. For example, I want ...

What is the reason why the [active] attribute does not function properly in <a mat-tab-link> in Angular?

<div class="d-flex d-column themed-tab-nav"> <nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel" mat-stretch-tabs="false" mat-align-tabs="start"> <a mat-tab-l ...

How can I ensure the proper file path for a PHP file in order to avoid a 404 error when sending an HTTP post request in Angular?

I am facing an issue where register_insert.php is not being found. Can anyone assist me in determining the correct path? Here is the code snippet: constructor(private httpClient: HttpClient) { } insertData() { this.httpClient.post( ...

utilize makeStyles to modify button text color

Initially, my button was styled like this: style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', height: 48, padding: '0 30px', }}> It worke ...

Unlocking the power of Vue and TypeScript: Retrieving the data property in the render function

I am facing an issue while trying to implement this code in TypeScript within render method: TS2339: Property 'options' does not exist on type 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition' import Vue fr ...