As of LuciadRIA version 2020.1, Internet Explorer is no longer supported out-of-the-box in the ESM version of LuciadRIA (ESM = ECMAScript Modules, as opposed to AMD). This article explains your options if you want to use LuciadRIA 2020.1 with Internet Explorer support.

Why was Internet Explorer 11 support dropped in the ESM version of LuciadRIA?

Internet Explorer support was dropped mainly for performance reasons. Targeting IE means modern language features have to be emulated. Modern browsers like Chrome, Firefox, Safari and Edge don’t need this emulation. They have built-in support for these features. Benchmarks have shown significant performance gains by using native modern JS language features. By packaging LuciadRIA as a modern JS library (without emulation for IE), your users can benefit from these performance gains. Internet Explorer support should not hold back users with a modern browser.

I still need to support Internet Explorer 11 in my application. What are my options?

If you still need to support Internet Explorer 11, you have the following options:

  1. Use the AMD version of the API. This version of the API still has out-of-the-box to support for Internet Explorer 11. This is done for backwards compatibility with older projects. Note that modern browsers are not able to benefit from increased performance when using the AMD version of the API.

  2. Transpile the ESM version of the API with Babel, with IE11 as a target. If you’re using the ESM version of the API and you need to support IE11, you can transpile the modules in our API down to ES5 with IE11 support. This can be done with Babel.If you’re already using the ESM version of the API, you’re probably already using a module bundler like webpack with babel and some polyfills for IE11. As an example, you can set up webpack and babel-loader to transpile LuciadRIA modules like this:

    1. Make sure babel and webpack dependencies are installed

      npm install -D babel-loader @babel/core @babel/preset-env webpack
    2. Update the webpack configuration (webpack.config.js).

      First determine where on the file system the LuciadRIA API is located:

      // Put this at the top of your webpack configuration
      const path = require("path");
      const fs = require("fs");
      const realPath = (modulePath) => {
        const fullPath = path.join(__dirname, modulePath);
        return fs.existsSync(fullPath) && fs.realpathSync(fullPath);
      };
      const riaCorePath = realPath("node_modules/@luciad/ria");
      // uncomment the following lines if you also use constructive geometry or military symbology.
      // const riaGeometryPath = realPath("node_modules/@luciad/geometry");
      // const riaSymbologyPath = realPath("node_modules/@luciad/symbology);

      and then add it configure it to be transpiled to an IE 11 compatible target:

      // This is an entry in the webpack.config.module.rules array
      {
        test: /\.(js)$/,
        include: [riaCorePath /*, riaGeometryPath, riaSymbologyPath */] // you can include your own sources as well, if you want those to be transpiled using this IE11 babel-loader
        loader: "babel-loader",
        options: {
          presets: [
            ["@babel/preset-env", {
              "targets": {
                "browsers": [
                  "ie >= 11"
                ]
              },
              // add polyfills using corejs
              // remove these 2 options if you have another way of adding polyfills
              "useBuiltIns": "entry",
              "corejs": 3
            }
          ]]
        }
      },
    3. Develop and build your application as usual When you now run webpack, it will transpile LuciadRIA modules to a lower ECMAScript version, which is compatible with IE11.

If you’re not using webpack in your project, you use the same options for babel to transpile the LuciadRIA ES modules to support IE11.

If you transpile the LuciadRIA modules down to ES5, in order to support IE11, you lose the performance benefits on modern browsers. If you want the best of both worlds, you can serve a "legacy" IE11 version of your application to IE11 users, and a "modern" version to other users. This allows your application to work on IE11, while also allowing performance benefits on modern browsers. You can read more about this approach in this article.

Running the LuciadRIA samples on Internet Explorer 11

If you want to directly run the samples on Internet Explorer from the sample server, you must repackage all samples. You can do this by running the following command in the LuciadRIA installation directory:

npm run pack-all-samples -- --ie11support

You can of course also run every sample separately as explained in Editing, building and running the sample code. You must then also run the sample as follows:

npm run dev -- --ie11support