How i can build webpack 5 for IE11

Question

i have a problem with webpack 5 and ie11 i try top build my code for ie11 with webpack he compile the code but in ie11 i have a error syntax in my bundle.js

error :

1 */
2 /******/ (() => { // webpackBootstrap
3 /******/  var __webpack_modules__ = ({
4   const path = require('path');

i have a error in line 2 => (() => it's error with syntaxe error

my webpack.config.js

module.exports = {
    entry: __dirname+"/wwwroot/source/app.js",
    mode : "development",
    output: {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename:"bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', {
                                targets: {
                                    "ie": "11"
                                }
                            }]
                        ]
                    }
                }
            }
        ]
    },
}

and my package.json

{
  "name": "totallydays",
  "version": "1.0.0",
  "description": "clone airbnb projet fin d'année",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch"
  },
  "author": "benoit vaisse",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "babel-loader": "^8.2.1",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0"
  },
  "dependencies": {
    "bootstrap": "^4.5.3",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1"
  }
}

thanks for all

Benoît Vaisse · Accepted Answer · 2020-11-16T22:17:47.167

Ok i find the probleme must add line target: ['web', 'es5'] in my config webpack

const path = require('path');

module.exports = {
    entry: __dirname + "/wwwroot/source/app.js",
    mode: "development",
    output: {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename: "bundle.js"
    },
    target: ['web', 'es5'],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', {
                                targets: {
                                    "ie": "11"
                                }
                            }]
                        ]
                    }
                }
            }
        ]
    },
}

see here : After build via Webpack 5 app stoped working on Internet Explorer (IE11)

Thanks for posting the solution to this issue. I suggest you try to mark your own answer to this question after 48 hrs when it is available to mark. It can help other community members in the future in similar kinds of issues. Thanks for your understanding. — Deepak-MSFT, Nov 16 '20 at 01:25
Instead of setting different target entries for webpack and @babel/preset-env, I would recommend to set "browserslist": ["ie 11"] in the package.json. Both babel and webpack will take this entry as source for their code generation. — Philip, Nov 02 '21 at 17:03

score 0 · Answer 2 · answered Nov 02 '21 at 17:15

Add the following browserlist entry to your package.json

"browserslist": ["ie 11"]

and remove the targets entry from the @babel/preset-env configuration.

Then babel as well as webpack will use the same config source for their code output.

How i can build webpack 5 for IE11

2 Answers2