The JavaScript bundling feature in Microsoft.AspNet.Web.Optimization does not properly minify template literals

Even with the most up-to-date version of 

Microsoft.AspNet.Web.Optimization v1.1.3
, I have encountered an issue regarding JavaScript minification when using template literals. When attempting to include code like the following in a bundle script:

var name = 'Bob';
var formattedName = `${name} says hello`;

The bundled files are merged without minifying the code, resulting in the following error message:

/* Minification failed. Returning unminified contents.
(2,13-14): run-time error JS1014: Invalid character: `
(2,15-16): run-time error JS1004: Expected ';': {
(2,30-31): run-time error JS1014: Invalid character: `
(3,1-2): run-time error JS1107: Expecting more source characters
*/

I am aware that template literals were introduced in ECMAScript2015 and may not be fully supported yet. Is there a workaround to achieve minification without reverting to traditional string concatenation methods?

var name = 'Bob';
var formattedName = name + ' says hello';

Additionally, can we expect support for template literals in future releases of 

Microsoft.AspNet.Web.Optimization
?

javascriptc#asp.netmodel-view-controllerbundling-and-minification

Answer №1

Utilizing the bundleconfig.json approach to minimize certain script files resulted in encountering similar issues during task execution: 

Illegal assignment: =
Expected ';'
Expected ';'
Expected expression
Expected '}'

I successfully altered the literal from:

style.textContent = `
...
`;

To:

style.textContent = `
...`;

This may not directly resolve your specific query (if you are using Gulp), but it could offer assistance to individuals who prefer not to rely on various npm packages for achieving a similar goal.

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

Sending blank data using ExpressJS ajax feature

I am encountering an issue while trying to send JSON data to my server as the POST requests are coming through with empty bodies. Below is the TypeScript code I am using on the front end: function sendData() : void { console.log("Sending data..."); var na ...

javascriptnode.jsexpress

Exploring Enumerations in Vue.js and Javascript

Is there a way to implement enums in a Vue file? I start by creating my enums in a JavaScript file const Status= Object.freeze({ Normal: "normal", Loading: "loading", Error: "error", Done: "done", }) ...

javascriptvue.jsenums

Select the send all text option when making a request

Using ajax, I can dynamically fill a drop-down select menu. My next step is to include all the text from the selected options in my request. <select name=".." > <option value="0"> ... </option> <option value="1"> xxx </option ...

javascriptjqueryhtmlajaxspring-mvc

How to address hover problems in D3.js when dealing with Path elements and updating tooltip information after brushing the focus

Seeking assistance with a Multi Series, Focus + Context D3 chart and hoping to address my main queries all at once. The questions that need resolving are: How can I prevent the tooltips I've generated from being affected by the hair-line (which t ...

javascriptjquerycsssvgd3.js

Troubleshooting ASP.net gridview paging issue causing unintended reload of other gridviews

I'm in need of some help with managing multiple grids on one page, a task I haven't tackled in quite some time. My current setup involves two grids and a treeview neatly organized within separate jQuery UI tabs. However, whenever I navigate betwe ...

asp.netgridview

Please refrain from including HTML code within the div element

When I input the following text inside a textarea: <strong>test</strong> and then display it within a div, the text appears in bold instead of showing the HTML code as entered. How can I prevent the HTML code from being rendered and instead d ...

javascriptjqueryhtml

Having trouble retrieving a JavaScript Object from a promise in Node.js

I am attempting to retrieve a JSON report with two parts and convert it into a JavaScript object in my mainFile.js, as demonstrated below: file1.js module.exports = async (param1, param2) => { try { await fun1(param1, param2); await ...

javascriptnode.jspromiseasync-await

Retrieving posted data in SailsJS

I attempted to retrieve the post data in my controller methods using the code snippet below: req.body.name Unfortunately, this approach did not yield the desired results. ...

javascriptnode.jssails.js

Unique Date Validation Customization

Looking for assistance with C# Here is the C# code snippet: protected void cusCustom_ServerValidate(object sender, ServerValidateEventArgs e) { if(e.Value.Length == 8) e.IsValid = true; else e.IsValid = false; } Page code snippet ...

c#.netasp.net

jQuery request avoids encountering any 'Access-Control-Allow-Origin error

I am attempting to retrieve content from one website and transfer it to another website. Unfortunately, I keep encountering the error mentioned in the title during my jQuery request. Below is the code I am using: $.ajax({ url: 'destinationURL' ...

javascriptjqueryrestsharepointsharepoint-2010

Trouble with JavaScript: Unable to Hide a Div Element

My goal is to hide the "target" div, but for some reason, it's not working as intended. When I try to hide the div with id "div1" instead of "target," it works fine. Can anyone help me figure out why I can't hide the "target" div? <html> & ...

javascriptjqueryhtmlcss

I'm attempting to create a button that changes to a bold red color when the condition is met

I am currently working on developing web applications using the Pixabay API. My goal is to allow users to mark an image as a favorite and have the heart icon change color to red accordingly. However, I seem to be facing issues with this functionality. To ...

javascriptvue.jsvuejs2vuetify.js

Error in Laravel Mix Vuejs component: Syntax problem detected in <template />

My development environment involves Windows 10 OS and I have created a Laravel 8 project integrated with VueJs. However, when I try to access the file ./components/app.vue, it returns a SyntaxError: Unexpected token (1:0) The content of the app.vue file i ...

javascriptnode.jslaravelvue.jsnpm

Pressing one button triggers different actions with each click

<script> function one() { // code for function one } function two() { // code for function two } </script> <button onclick="one(); two()">Click Me</button> This will execute both functions simultaneously. I am looking to fi ...

javascripthtml

Physically eliminate (and obliterate) a component from keep-alive

Is there a way to access and programmatically unmount a component instance loaded from Vue Route and persisted using <keep-alive> and <component>? I am working on a dynamic tab system where each tab renders a URL which displays its declared com ...

javascriptvue.jsvuexvue-routervuejs3

When an ASP.NET project encounters an error, it will automatically redirect to my custom login page using

When I run my project in Visual Studio, it opens Login.aspx as expected. However, when I try to browse the project using IIS, it fails to display Login.aspx. I have already set Login.aspx as the default document in IIS and tried clearing all cache, but th ...

asp.netiiswebforms

Enhancing the accessibility of Material UI Autocomplete through a Custom ListboxComponent

I have developed a custom ListboxComponent for the MUI Autocomplete component in MUI v4. How can I ensure that it meets the necessary accessibility requirements, such as navigating through options using the arrow keys? <Autocomplete ListboxComponent ...

javascriptreactjsmaterial-ui

JQuery: Implementing automatic selection in a selectbox

Seeking assistance on how to automatically preselect a value in a select box. I am trying to have the select box automatically choose admin aid VI, but my script is not functioning correctly. Can anyone provide guidance on this issue? Here is the HTML co ...

javascriptjqueryhtml

Issue with "Maximum call stack.." error triggered by RequireJS version 2.1.9 in combination with Grunt

I've encountered an issue while using Grunt to construct a multi-module application (Backbone, Marionette, RequireJS, Handlebars). The error message "Error: RangeError: Maximum call stack size exceeded" keeps appearing. Interestingly, replacing the r. ...

javascriptnode.jsbackbone.jsrequirejsgruntjs

Using jQuery, input data into a textarea element

I need assistance in extracting text from an element and inserting additional attributes to the text. The modified text should then be displayed in another element when a button is clicked. In my code snippet, the console.log() method correctly logs the d ...

javascriptjqueryarrays