How to use babel with webpack for ie11 compatibility

user_12459158 0
Viewed 2481

It's the first time i use webpack with babel, my goal is to make my small template app compatible with ie11.

For some reason I ignore, my JS does not work at all in ie11 even though I did set it as a target in my config. To test it, I use a ie11 on the internet but I don't have access to the stack errors since I'm on MacOS.

What am I missing here?

Source code for more info : https://github.com/VelynnXV/Front-End-Workflow

website : https://nifty-noether-cafbd5.netlify.app/

app.js

import regeneratorRuntime from "regenerator-runtime";

async function app() {

  console.log('App entry point')
  const template = document.getElementById('app')
  await new Promise(r => setTimeout(() => r(), 2500))
  template.innerHTML = `
  <div class="web-container">
      <div id="">
          Async / awat test
      </div>
  </div>
`
  console.log('App finished')
};
app();

webpack.config.json

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: ['core-js/stable', './src/app.js'],
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'app.js',
  },
  devServer: {
    publicPath: "./src/",
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
  plugins: [
    new HtmlWebpackPlugin({ // will generate the html file WITH app.js
      // see plugin here : https://webpack.js.org/plugins/html-webpack-plugin/
      template: './src/index.html',
      filename: './index.html'
    })
  ],
  module: {
    rules: [ // set of rules letting webpack know how to handle .xyz files 
      {
        test: /\.m?js$/, // source: https://webpack.js.org/loaders/babel-loader/
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',

        }
      }
    ],
  },
};

babel.config.js

// babel.config.js

module.exports = api => {
    return {
      plugins: [
        "@babel/plugin-proposal-nullish-coalescing-operator",
        "@babel/plugin-proposal-optional-chaining",
        "@babel/plugin-transform-runtime",
      ],
      
      presets: [
        [
          "@babel/preset-env",
          {
            useBuiltIns: "entry",
            corejs:3,
            // caller.target will be the same as the target option from webpack
            targets: api.caller(caller => caller && caller.target === "node")
              ? { node: "current" }
              : { chrome: "58", ie: "11" }
          }
        ]
      ]
    }
  }

package.json

{
  "name": "front-end-workflow",
  "version": "1.0.0",
  "description": "",
  "main": "src/app.js",
  "scripts": {
    "dev": "npm run clean && npm run build && webpack serve",
    "build": "webpack",
    "clean": "rimraf ./dist"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.17",
    "@babel/plugin-transform-runtime": "^7.12.17",
    "@babel/preset-env": "^7.12.17",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.2",
    "html-loader": "^2.1.0",
    "html-webpack-plugin": "^5.2.0",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.23.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@babel/runtime": "^7.6.3",
    "core-js": "^3.3.2"
  }
}
internet-explorer-11 babeljs webpack cross-browser javascript
1 Answers

You almost have a complete configuration for IE11 support. The only thing you're missing is a target: "es5" option in your webpack configuration. Babel correctly transpiled your files. Webpack also injected all the necessary polyfills. However, you need to tell Webpack when it bundles the code together to use a syntax that your target browser can understand. For whatever reason, Webpack set the default to a version of ES that contained arrow functions. The error that IE11 console was showing (SCRIPT1002:syntax error) was pointing at the very first occurrence of an arrow function in your bundled app.js file.

An extra tip: use comments: false in your babel config to strip the code comments out of your bundle. This can slightly decrease the size of your bundle.

You can git apply this diff in your repo to take the changes in.

diff --git a/babel.config.js b/babel.config.js
index 8d2442b..273176c 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -2,6 +2,7 @@
 
 module.exports = api => {
     return {
+      comments: false,
       plugins: [
         "@babel/plugin-transform-runtime",
       ],
diff --git a/webpack.config.js b/webpack.config.js
index 2243a11..08af521 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -21,6 +21,7 @@ module.exports = {
       filename: './index.html'
     })
   ],
+  target: "es5",
   module: {
     rules: [ // set of rules letting webpack know how to handle .xyz files using loader
       // see loaders : https://webpack.js.org/loaders/
user_48498000
Related