Webpack - Internet Explorer 11 showing blank app: SCRIPT1010 error - Identifier was expected

I am currently utilizing Webpack in conjunction with my Vuejs application.

Unfortunately, I am encountering an issue where my application fails to load on Internet Explorer 11. Here is a snapshot of the console error message:

https://i.sstatic.net/eYwWm.png

The error displayed in the console is SCRIPT1010: Expected identifier

webpack.config.js


{
    test: /\.(es6|js|mjs)$/,
    exclude: /node_modules/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env']
        }
    }
},    

.babelrc


{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": 3,
                "modules": false,
                "debug": true
            }
        ]
    ]
}

.browerslistrc


> 0.25%
not ie <= 10

main.js


import "core-js/stable";

Answer №1

As indicated in the stacktrace, the error originates from the "async" library being utilized. Referencing the documentation (https://caolan.github.io/async/v3/), it states:

Async is designed to function in any ES2015 environment (Node 6+ and modern browsers). If you intend to use Async in an older environment (such as Node 4 or IE11), transpilation will be necessary.

Since async comes from the node_modules directory and is excluded in your Webpack loader configuration, async is not being transpiled. To address this issue, you can modify your exclude rule accordingly:

exclude: /node_modules\/(?!async)/,

However, resolving this specific problem may not guarantee overall compatibility with IE11 if there are other incompatible libraries present. You can adjust the rule to include additional packages for transpilation like so:

exclude: /node_modules\/(?!async|library2|library3)/,

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 consistency of the input box is lacking

Why is my input box not consistent? Every time I add it, the width increases. I understand it's because of the 'col' control but it's creating a messy layout as shown in the image below https://i.sstatic.net/Q1PHL.png This is the code ...

Making an asynchronous call from Index.html to PHP Script

I am currently working on implementing an AJAX call to my PHP Script. While I can successfully echo the results from my data.php file, I am now facing a challenge regarding how to initiate the call from index.html in order to retrieve the table results s ...

Having trouble with gapi.client.request() not functioning properly?

I've been trying to use the Google API for freebase, and even though I'm following the correct call as per the documentation, it seems like there is an issue. The Chrome debugger is showing that something is wrong with this supposedly simple call ...

Is it possible to determine if jQuery find returns true or false?

Snippet of HTML Code <div class="container1"> <div class="box1">Box 1</div> <div class="box2">Box 2</div> <div class="box3">Box 3</div> </div> <div clas ...

The functionality of the ajax hash navigation feature seems to be malfunctioning

I've been trying to use hashes for my navigation, but everytime the page loads, my script resets the initial hash to #home. It doesn't matter what hash I add in the URL: Here is the script that runs to check if the hash exists and what content t ...

Using react-select to display "N items selected" instead of listing out all the selected items

Exploring the potential of react-select as a city-picker selector for users to choose one or multiple cities to filter data. Take a look at how it appears on my page: https://i.sstatic.net/A3cBX.png The list of cities may be extensive, and I am concerned ...

Is there a way to eliminate all elements with a specific class name from the DOM?

My website includes a section with product elements that are identified by the cart-item class. <div id="cart"> <h1 class="ui-widget-header">Demo Site</h1> <div class="ui-widget-content"> <ol id="insert-zone" cl ...

Utilize React HOC (Higher Order Component) and Redux to retrieve data and pass it as props

In my quest to develop a Higher Order Component (HOC) that can execute methods to fetch data from the backend and display a loader mask during loading, I encountered a challenge. I aim to have the flexibility of passing different actions for various compon ...

JavaScript Discord Bot Unresponsive to Commands

I'm currently working on setting up my first discord bot from a github repository. It successfully connects to discord and logs into the server, but it's not responding to !help commands or any other commands for that matter. The code for the com ...

Confirmation of successful form submission

I have created a form to collect user details. Once the form is submitted, the page reloads. I am looking to show a success message after the page reloads. <form name="myForm" class="contactus-template" method="post" onsubm ...

Handling Forms with Node and Express

I'm currently following a guide to create a node/express application using the jade template engine. I've encountered a 404 error when trying to submit a form. In my routing, I have this line: app.post('sign_up', sign_up); which is caus ...

Unveil as you scroll - ScrollMagic

I am working on a skill chart that dynamically fills when the document loads. I am exploring the possibility of using ScrollMagic to animate the chart filling as the user scrolls down. After trying various combinations of classes and pseudo-classes in the ...

Tips for asynchronously modifying data array elements by adding and slicing

I am facing an issue in my vuejs application where I need to modify an array of items after the app has finished loading. My current setup looks like this: var n = 100; var myData = []; function loadMovies(n){ // async ajax requests // add items to ...

Using jQuery to target nested HTML elements is a great way to efficiently manipulate

Within the code below, I have a complex HTML structure that is simplified: <div id="firstdiv" class="container"> <ul> <li id="4"> <a title="ID:4">Tree</a> <ul> <li id="005"> ...

Removing the initial 0 from the input

I have a form input field that I want to format using jQuery 1.7.2 <input style="text-align:right;" type="text" name="DiversionCalc_Diversion_Rate" id="calc_dr" value="0.25%" /> My goal is to adjust the formatting when the input field loses focus. ...

Function is not triggered in React component

When the LoginPage calls AuthForm, the structure is as follows: function mapDispatchToProps(dispatch: Redux.Dispatch<any>) { return { signUpWithEmail: function(email: string, password: string) { // bla bla }, }; } handleForm ...

What causes Vue to only update once when there are two closely timed mutations to reactive data?

Can you take a look at this simple example? export default { data() { return { name: "Amy", age: 18, }; }, computed: { combinedDataForWatching() { return { name: this.name, age: this.age, ...

The TypeScript factory design pattern is throwing an error stating that the property does not

While working with TypeScript, I encountered an issue when trying to implement the factory pattern. Specifically, I am unable to access child functions that do not exist in the super class without encountering a compiler error. Here is the structure of my ...

Encountering an error stating that 'coordinates should consist of an array with two or more positions'

Utilizing turf.js to generate a line depicting the path of an individual while their location is tracked. An array of coordinate arrays resembling Turf.js (lineString) is causing this error: Uncaught Error: coordinates must be an array of two or more posi ...

Having trouble with your Ajax post request?

I am currently working on creating a form that allows users to input information and submit it without the page refreshing. The processing of the form data will occur after the user clicks the submit button. To achieve this, I am utilizing jQuery and Ajax ...