An issue has been detected in the jsoneditor component of the ang-jsoneditor module at line 13, character 9

Currently, I am facing an issue with my angular project when running npm start. Strangely enough, the problem only arises after doing a fresh npm install, not when copying over the older node-modules folder. There haven't been any recent changes to my package.json file, yet upon running npm start, this error occurs:

ERROR in node_modules/ang-jsoneditor/jsoneditor/jsoneditor.component.d.ts(13,9): error TS1086: An accessor cannot be declared in an ambient context.


I attempted to update typescript to the latest version, but it turned out to be incompatible with the version of angular-cli I am using. I also tried updating both jsoneditor and ang-jsoneditor.

The exact cause of this issue remains uncertain, whether it's a version mismatch or another underlying error.

Below is a snippet of my package.json:

{
  "name": "Project",
  "version": "2.0.0",
  "license": "MIT",
  "dependencies": {
    "@angular/animations": "^7.2.12",
    "@angular/cdk": "~7.1.0",
    "@angular/common": "^7.2.12",
    "@angular/compiler": "^7.2.12",
    "@angular/core": "^7.2.12",
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "^7.3.8",
    "@angular/compiler-cli": "^7.2.12",
    "ang-jsoneditor": "^1.9.4",
    "jsoneditor": "^5.34.0",
    "typescript": "^3.2.4"
  }
}

Your input and assistance are greatly appreciated.

angulartypescriptnode-modulesjsoneditor

Answer №1

It appears that the ang-jsoneditor package is not functioning properly with Angular 7 due to a newer version of TypeScript that includes a significant breaking change. While an official fix has not been provided on the related GitHub issue, you may want to consider installing a previous version of ang-jsoneditor that is compatible with Angular 7.

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

Produce new lines of code using the vscode.window.activeTextEditor.edit method in Visual Studio Code

Hey everyone, I'm currently working on a vscode extension that can automatically generate template code based on the language you are using when you click a button. However, there seems to be an issue with the formatting of the generated code as it do ...

typescriptvisual-studio-codevscode-extensions

Enhanced interface with plugins

I've been developing a "manager" class that allows for the integration of "plugins". Each plugin has the ability to enhance the data property of the manager class. // manager.ts interface Data { // some props } class Manager { data: Data; ...

typescriptinterfacestatic-typing

Design buttons that are generated dynamically to match the style

I have a challenge in styling dynamically generated buttons. I've developed a component responsible for generating these dynamic buttons. const TIMER_PRESETS: Record<string, number> = { FIFTHTEENSEC: 15, THIRTYSEC: 30, FORTYFIVESEC: 45, ...

cssreactjstypescriptmaterial-uiclient-side

An object that appears to be empty at first glance, but contains values that are undefined

I am facing an issue with my object that I am populating with information. The logs show the object as empty, but when I inspect it in Chrome, it appears to have the correct details filled in. Here is a snapshot of what the logs display: closed: closed o ...

javascriptreactjstypescript

Typescript: Dynamic return type determined by argument properties

I have a function that should return two different types based on its argument props. interface IPaginateParams { perPage: number; currentPage: number; isFromStart?: boolean; } interface IWithPagination<Data, TParams extends IPaginateParams = IPa ...

typescripttypescript-generics

Angular 8 project experiencing issues with Bootstrap dropdown functionality

I have successfully installed the packages listed below: npm install --save bootstrap@3 npm install --save popper.js angular-popper npm install jquery --save Afterwards, I included the styles and scripts in the angular.json file in the exact order as sho ...

javascriptjqueryangularbootstrap-4popper.js

Exploring the potential of React with Typescript: Learn how to maximize

Having some difficulties working with Amplitude in a React and Typescript environment. Anyone else experiencing this? What is the proper way to import Amplitude and initialize it correctly? When attempting to use import amp from 'amplitude-js'; ...

reactjstypescriptamplitude-analytics

What is the best way to transform the data stored in Observable<any> into a string using typescript?

Hey there, I'm just starting out with Angular and TypeScript. I want to get the value of an Observable as a string. How can this be achieved? The BmxComponent file export class BmxComponent { asyncString = this.httpService.getDataBmx(); curr ...

jsonstringangulartypescriptobservable

What steps should I take to troubleshoot an error with accessing 'request.body' within an async function that is returning a 'ReadableStream' object instead of the data I was expecting?

While developing my CRUD functionality in Next.js with TypeScript and Prisma, I encountered an issue with the PUT method. The GET method handler works fine, but for some reason, the PUT method is causing errors that I'm struggling to resolve. When in ...

reactjstypescriptnext.js13next-api

Ways to modify the color of mat-icon within an input field using Angular 6

Here is the code from my HTML file: <div class="input-field"> <div> <input type="text" id="name" required email/> <label for="name">Email: <mat-icon svgIcon="mail" class="change-color"></mat-icon> &l ...

cssangularinputicons

Angular Bootstrap: How to Resolve the Error "Function $(...).collapse() is Undefined"

I'm a beginner with Bootstrap and I'm attempting to trigger the .collapse() function using JavaScript within an Angular controller when a user clicks on a link. The goal is to close the collapsible navbar when a link is clicked, as the routing in ...

javascriptjqueryangulartwitter-bootstrapbootstrap-4

Both radio buttons are being chosen simultaneously

<div class="container"> <div class="row"> <form> <div class="form-group"> <label>username</label> <br /> <input type="text" class=" ...

htmlangularbuttonradio-button

Utilizing the backtick operator for string interpolation allows for dynamic value insertion

Greetings! Currently, I am delving into the world of Angular 2 and have stumbled upon some interesting discoveries. To enhance my knowledge of TypeScript, I decided to utilize the ScratchJS extension on the Chrome browser. During this exploration, I experi ...

angulartypescriptstring-interpolation

The utilization of .forRoot() in the feature modules hierarchy

Could someone please explain to me the best way to organize a hierarchy of nested feature modules with .forRoot() calls? For instance, let's say I have modules structured like this: - MainModule - SharedModule - FeatureModuleA - FeatureModuleA1 ...

angularangular-material2

What is the best way to send the body in a GET request using Angular 2+?

My API's GET method is located at "http://abc/abc" Typically, the GET method includes parameters as get(url, options), with only two arguments. However, in my scenario, I need to include a body with the request. The body structure is as follows: { ...

typescriptangular6angular5

useEffect does not trigger a rerender on the primary parent component

I am facing an issue where the main parent component does not re-render when I change the state 'click button' in another component while using useEffect. Oddly enough, the main <App /> component only re-renders properly when I reload the p ...

javascriptreactjstypescriptreact-hooks

Is it possible to dynamically assign and call functions through an Object in Angular 6?

I implemented a click handler for a button that is generated dynamically. Within the click handler function, I am invoking a callback function. However, I encountered an issue where an error message popped up stating that "Callback function is not a fu ...

javascripthtmlangularthis

Is there a way for me to retrieve the classes that have been applied to an Angular 2 component through HTML?

I have created a custom component that I want to use in the following way: <vx-alert class="au-upper-center"> <p>Upper Center</p> </vx-alert> Inside the vx-alert component, I need to access and manipulate the classes applied i ...

angular

Understanding the mechanism behind how the import statement knows to navigate to the package.json file

I find myself stuck in bed at the moment, and despite numerous Google searches with no clear answers, I have chosen to seek help here. Could someone please clarify how scoping works when using import in TypeScript and determining whether to check the pack ...

javascripttypescriptnpmimport

Encountered difficulties when attempting to install Angular Universal in my angular13 application

I'm facing some challenges while trying to incorporate @nguniversal/ into my angular 13 application. Are there any experts who can offer assistance? Angular CLI: 13.0.4 Node: 16.13.1 Package Manager: npm 8.1.2 npm ERR! code ERESOLVE npm ERR! ERESO ...

angularnpm