An illustration of webpack 4 and Vue.js compatibility tailored specifically for Internet Explorer 11, featuring multiple entry points

This feels like déjà vu - yet another issue with Internet Explorer and webpack. I'm on the brink of deploying my project when IE 11 decides to mess everything up.

I thought I had covered all bases with babel-polyfill and the latest versions, but of course, it couldn't be that simple.

Now I'm faced with this error message:

The object doesn't support the property or method "includes". (Originally in German: Das Objekt unterstützt die Eigenschaft oder Methode "includes" nicht)

The problem seems to be related to this line of code:

/******/ if (!me.children.includes(request)) me.children.push(request);

It's clear that Array.prototype.includes is not being polyfilled as expected.

My webpack configuration for client-side rendering using Vue.js looks something like this:

module.exports = {
  target: 'web',
  entry: {
    app1: ['babel-polyfill', 'picturefill', './src/entry-client1.js'],
    app2: ['babel-polyfill', 'picturefill', './src/entry-client1.js']
  },
  output: {
    path: path.resolve('public/dist'),
    publicPath: '/dist'
  }
  /* some other stuff */
}

I am running Webpack version 4.1 and Vue version 2.5.15, encountering issues specifically with IE11.

If anyone has a working example of a webpack configuration that supports IE11, please share. I've given up on dealing with previous versions of IE at this point.

Answer №1

If you're looking to enhance cross-browser support in your project, consider installing the core-js polyfill library using either 'npm i --save core-js' or 'yarn add core-js'. Afterwards, make sure to add the following line at the top of your project's entry point:

import 'core-js'

Check out the core-js polyfill library on npm for an easy way to ensure better browser compatibility.

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

Having trouble getting a JS file to work with the Laravel Inertia.js and Vue.js3 template

Just getting started with inertia.js and facing an issue. My CSS styles are being applied, but my JavaScript file isn't functioning as expected. I'm working on an admin dashboard using Laravel 9 and vue.js-3 with a custom HTML template. Interes ...

Having trouble with this ajax code? It's not showing up dynamically

There is a live search bar in my project where the results are filtered as the user types. Each result is a clickable link that should load on the same page, but I'm facing some issues with the implementation. The search functionality is powered by a ...

Tips for combining values from two inputs to an angular ng-model in AngularJS

I am working with an angular application and I am trying to figure out how to combine values from multiple inputs into one ng-model. Here is an example of my current input: <input type="text" class="form-control input-md" name="type" ng-model="flat.f ...

What is the best way to transfer an image between Angular components and then showcase it?

I've developed a feature using an observable and I'm attempting to transfer a dataURL from one component to another in order to display it as an image. Here is the HTML code for the component where I want to send data from: <canvas id="p ...

What's going on with the background color? It doesn't seem

I have incorporated Bootstrap into my html code and I am attempting to modify the background color of a div when the screen resolution changes from large to medium or small. Even though I have added a class, the change does not reflect when adjusting the ...

Is there a way to retrieve a large number of users through an API using async await?

I am trying to retrieve all users from an API and I want to identify which user receives the highest payment. For instance let users=['tom','jenny','smith','Joe'] async function getUsers() { let response = awa ...

vue2 navigate back without resetting parameters from the most recent navigation

I currently have a navigation structure with 4 pages: Home Page [ Home.vue ] Create Home Page [ CreateOrView.vue ] View Home Page [ CreateOrView.vue ] Summary Page [ Summary.vue ] On the "Home Page," I have two buttons: First Button :to="{ ...

Troubleshooting problems with deploying a full stack application on Azure Static Web Apps

I've been struggling with this issue for a week now and any suggestions would be greatly appreciated! I'm working on a catalog website for a client. My server and database are hosted on Azure SQL, while the frontend is built using vue.js compiled ...

Using JavaScript to dynamically alter the background image of an HTML document from a selection of filenames

Just starting out with JavaScript and working on a simple project. My goal is to have the background image of an HTML document change to a random picture from a directory named 'Background' every time the page is opened. function main() { // ...

Exploring the Interaction between Express.js Requests and Mongoose Models

We're currently in the process of developing a REST API alongside my colleagues using Express.js and Mongoose. As we work with certain Mongoose Model methods and statics, we find the need to have access to the Express.js Request object for additional ...

Transforming an HTML Attribute into a JavaScript Object

I'm encountering an issue with converting an HTML-data attribute into a JavaScript Object. Here is my approach: The data Attribute appears as: <a id="stringObj" data-string="{'Foo':'Bar'}">Some A-Tag</a> In JavaScri ...

A more efficient approach to creating a personalized design

After realizing the original question was unclear and wouldn't solve my problem, I have decided to edit it and create a new one. For my project, I require a customized layout where users can move, resize, add, or remove each box according to their pr ...

Maintain the div in its current location when zooming the map

I created a multi-layer map and added a div to it. However, the issue arises when I zoom in on the image, causing the div to change its position unexpectedly. For example, if I place the div over India and then zoom and drag the image, the div ends up in U ...

What is the best way to incorporate JQuery into html content retrieved through an ajax request?

In my jsp file, there is a div structured like this : <div id="response" class="response"></div> After triggering an ajax call to a servlet, the content of this div gets updated with the following elements : <div id="response" class="res ...

End of container Bootstrap 4 row with two columns at the edge

I'm currently working on an angular project with bootstrap 4. Within the container, there are two rows. I specifically want one row to always be positioned at the bottom of the container. Despite trying methods like justify-content: flex-end;, botto ...

In a React application, the input field unexpectedly loses focus after typing just one character

Has anyone encountered an issue with a dropdown menu causing input field focus to be lost after typing one character? I've attempted setting unique keys for each field, but it hasn't resolved the problem. For reference, here is the link to the p ...

Developing a Link Element in Angular 2

Exploring the creation of a wrapper component in Angular 2, inspired by tools like react-bootstrap. The goal is to avoid repeating the component structure each time and instead create a reusable component. The desired reusable component should have a stru ...

What is the best way to load data that is essential for the entire functionality of an AngularJs Application?

Within my application, there exists essential data that is utilized by various controllers to carry out their functions. For instance, the user and other entities must make REST calls to the server. Currently, I have an AppController (app.js) responsible ...

I require the ability to retrieve only the data from a UI grid column, specifically based on the column name selected

I need help with my angularjs application that utilizes Ui grid. There is an external dropdown menu located outside of the ui grid, which lists all the column names in the grid. I want to be able to select a specific column name from this dropdown and retr ...

Is there a way to eliminate the header and footer from a Flutter WebView?

Here is the code snippet I tried to implement: I found a video tutorial by Joannes Mike on YouTube demonstrating how to remove the header and footer in Flutter WebView. However, it seems that Flutter has updated their library and the functions no longer w ...