Encountering a JS_Parse_Error error while trying to update the TypeScript target to ES6 using aurelia-b

I encountered an issue that is causing difficulties in utilizing async/await or yield/generators.

Initially, I utilized the aurelia skeleton for typescript & asp5 (aspnetcore) with the default target set to es5. To incorporate async/await in my TypeScript code, I attempted to switch the target to es6.

Upon modifying the tsconfig.json from es5 to es6, a few issues arose. Initially, there were duplication errors which I managed to resolve. However, the remaining concern relates to errors in the dependencies within aurelia-bundler.

Note: Consider this as the root for the file paths in the stack trace: C:\My\My.App\src\My.App.Web\node_modules\aurelia-bundler\node_modules\systemjs-builder

[13:37:07] 'bundle-dev' errored after 1.17 s

[13:37:07] Error: Unexpected token: name (App) (line: 13, col: 8, pos: 594)

Error

at new JS_Parse_Error (eval at <anonymous> (C:\..\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:1526:18)
<!-- Truncated for brevity -->
[13:37:07] 'bundle' errored after 1.57 min

[13:37:07] Error in plugin 'run-sequence(bundle-dev)'

Message:

    bundle-dev promise

Could anyone shed light on why this might be happening? I will update with any additional information required.

Thank you immensely.

UPDATE 1

One of the build steps for this project involves using aurelia-bundler to generate javascript bundles referenced by the app. This has mainly remained untouched from the aurelia skeleton. Identifying the code at line 13 is rather challenging.

I tried upgrading Node from v4 to v6, but the error persisted, so I reverted back to v4.4.4.

In addition, I made attempts to update the system-js configuration within config.js without success.

Here are my current configurations:

tasks/bundles.js

<!-- Configuration details here -->

wwwroot/config.js

<!-- Configuration details here -->
typescriptaureliasystemjsuglifyjs

Answer №1

Which version of Node.js is currently installed on your system? If you're using Node v4, consider upgrading to Node v6 for better performance.

The error message you're encountering suggests a JavaScript parsing issue, likely due to incomplete ES6 support in your runtime environment. Updating your Node.js version might resolve this issue. If not, could you please check line 13, column 8 in your code as mentioned in the error message?

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

Iterate through each item in an object using Angular

I attempted to utilize a forEach loop, but it's indicating that it's undefined for some reason. Here is my code snippet: var array: MoneyDTO[] = prices array.forEach(function (money: MoneyDTO) { if (money.currency == 'QTW& ...

angulartypescript

How can one define a getter within an interface?

One of my classes is structured like this (only showing a portion here): export class LinkedListNode<t> extends windward.WrObject implements ILinkedListNode<t> { public get next(): LinkedListNode<t> { return this._next === thi ...

typescripttypescript1.5

Exploring the functionalities of class methods within an Angular export function

Is it possible to utilize a method from an exported function defined in a class file? export function MSALInstanceFactory(): IPublicClientApplication { return new PublicClientApplication({ auth: AzureService.getConfiguration(), <-------- Com ...

javascriptnode.jsangulartypescriptnpm

Definition in Typescript: The term "value is" refers to a function that takes in any number of arguments of

export function isFunction(value: any): value is (...args: any[]) => any { return typeof value === 'function'; } What is the reason behind using value is (...args: any[]) => any instead of boolean ? ...

javascripttypescript

Issue with importing and exporting external types causing failures in Jest unit tests for Vue 2

I am in the process of creating a package that will contain various types, enums, consts, and interfaces that I frequently use across different projects. To achieve this, I have set up a main.ts file where I have consolidated all the exports and specified ...

typescriptvue.jsjestjsrollupmodule-export

Mysterious issue arises during deployment of Typescript-React application on Heroku

I am working on a TypeScript-React application generated using create-react-app. Deploying it to Heroku is proving to be a challenge as the process fails with an error message during installation and build: remote: Creating an optimized production b ...

reactjstypescriptheroku

imported classes from a module cannot be accessed within the same module

Here is some TypeScript code that I wrote: Within my module, I am importing a library called ts-events. import {SyncEvent} from 'ts-events' module MyModule{ export class MyService{ } } In the same module but in a different file, I'm ...

angularjstypescriptservicetypescript-typings

Ensuring accurate properties are sent to popup notifications

As a newcomer to a React & ASP.NET project, I am facing a challenge in displaying upload status notifications. The task may seem simple, but I need help in figuring out how to create popup notifications that indicate which files have been successfully uplo ...

reactjstypescriptreact-reduxantd

How can we leverage mapped types in TypeScript to eliminate properties and promisify methods?

Below is the provided code snippet: class A { x = 0; y = 0; visible = false; render() { return 1; } } type RemoveProperties<T> = { readonly [P in keyof T]: T[P] extends Function ? T[P] : never//; }; type JustMethodKe ...

typescripttypescript-typingsmapped-types

The React component fails to render when clicking on a Material-UI MenuItem

In my code, there is a simple mui Menu, where a MenuItem should trigger the rendering of another React component. The issue I am facing is that the Menu is being rendered in a separate file, which contains the definitions for the close and handleClick func ...

reactjstypescriptmaterial-ui

Error: Module not found - Issue with importing SVG files in NextJS

Currently, I am utilizing the babel plugin inline-react-svg to import inline SVGs in NextJS. Here is a snippet from my .babelrc configuration file: { "presets": ["next/babel"], "plugins": [ "inline-react-svg" ...

reactjstypescriptfrontendnext.jsbabeljs

Unresolved issue with RxJS - Finalize not triggering

When attempting a logout request, I have encountered an issue where the same actions need to be dispatched regardless of whether the request is successful or fails. My initial plan was to utilize the finalize() operator for this purpose. Unfortunately, I ...

angulartypescriptrxjs

Deactivating Bootstrap Modal in Angular

Looking for advice on managing a Bootstrap Modal in Angular 7 I have a Form inside a Bootstrap Modal that I need to reset when the modal is closed (by clicking outside of it). Despite searching on Google, I haven't been able to find a solution. Any ...

javascriptnode.jsangulartypescript

Incorporating the Discogs disconnect node module into an Aurelia project

Currently, I am working with aurelia.io and want to integrate the "disconnect" npm package into my app to interact with the Discogs API. To add the package to my project, I executed the command npm install disconnect --save within the app's directory. ...

npmaureliadisconnectdiscogs-api

The issue arises when trying to use data provided by a service, resulting in an "undefined

Looking to create a handler that generates an array of categories based on the presence of "categories" for a specific "resource". However, encountering an error with the last method. ERROR TypeError: "this.allProjectResources is undefined" import { Res ...

javascriptangulartypescript

Looking for a SSR Component to Choose Dates?

In the process of designing a landing page, I encountered a challenge with incorporating a date picker feature. My goal is to have users select a date and then be redirected to another page upon clicking a button. The technology stack includes NextJS where ...

reactjstypescriptnext.jsreact-hooks

Creating an array of objects in Angular 2

I'm facing an issue with the following expression: public mySentences:Array<string> = [ {id: 1, text: 'Sentence 1'}, {id: 2, text: 'Sentence 2'}, {id: 3, text: 'Sentence 3'}, {id: 4, text: 'Sen ...

arraysangulartypescript

What is the most graceful method to define a class attribute just once?

Is there a clean and efficient way to set a value only once within a TypeScript class? In other words, is there a way to make a value read-only after it has been assigned? For instance: class FooExample { public fixedValue: string; public setFixe ...

typescripttypescript-class

The mat-slide-toggle component does not recognize the checked binding

My angular app contains the mat-slide-toggle functionality. switchValue: {{ switch }} <br /> <mat-slide-toggle [checked]="switch" (toggleChange)="toggle()">Toggle me!</mat-slide-toggle> </div> This is how the ...

angulartypescript

I have a Visual Studio 2019 solution that consists of two projects - one is an Angular project and the other is written in TypeScript. I have successfully configured

We are currently utilizing Visual Studio 2019 (not the VS Code version) for our project. Within this solution, we have multiple projects included. One of these projects contains Angular code that we compile using the traditional 'ng build' comma ...

angulartypescriptvisual-studio-2019