Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

OL 6.9.0 does not work in IE11

See original GitHub issue

I downloaded the latest release of OL 6.9.0

Created a simple website:

<!DOCTYPE html>
<html>
<head>
    <title>Base map</title>
    <meta charset="utf-8">
    <script src="ol.js"></script>
    <link rel="stylesheet" href="ol.css">
    <style>
        html, body, .map {
            font-family: sans-serif;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <script>
        var map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: [ 4083008.076023652,6555612.176249601 ],
                zoom  : 14
            }),
            layers: [
                new ol.layer.Tile({
                    baselayer: true,
                    zIndex : 0,
                    visible: true,
                    source : new ol.source.OSM()
                }),
            ]
        });
    </script>
</body>
</html>

In Chrome, FF, EDGE, Opera, Vivaldi I see a map

But in IE11 I see a blank page and get an error: “Symbol” is undefined ol.js (2,11750)

I tried to configure “webpack-config-legacy-build.js” adding the option “ie 11” or “ie10” and even “ie9” there (and: npm run build-legacy) - the assembly does not change…

export default {
  entry: ['regenerator-runtime/runtime', './build/index.js'],
  devtool: 'source-map',
  mode: 'production',
  target: ['web', 'es5'],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  targets: 'ie 11, last 2 versions, not dead',
                },
              ],
            ],
          },
        },
      },
    ],
  },
  //...

How do I build for older browsers?

Issue Analytics

State:
Created 2 years ago
Comments:7 (7 by maintainers)

Top GitHub Comments

1reaction

mike-000commented, Oct 18, 2021

#12891 should fix this. The examples need GeoTIFF dependencies to be transpiled to ES5 syntax. The legacy build needs either a polyfill or mock definition for Reflect. The polyfil.io Reflect definition does not support typed arrays and throws an error. Either use a better polyfill such as https://cdnjs.com/libraries/core-js (which includes much more than is needed) or a minimal definition which resolves the references

if (typeof Reflect === 'undefined') {
  window.Reflect = {};
  Reflect.getOwnPropertyDescriptor = function() {
    return {};
  };
  Reflect.getPrototypeOf = function() {
    return {};
  };
}

https://jsbin.com/sawoqik/edit?html,js,output

A full definition is only needed for GeoTIFF sources, which cannot work in IE as the workers need ES6 support - and ES6 includes Reflect.

0reactions

gevrumcommented, Oct 18, 2021

It is possible that by connecting the npm package to your project, you can achieve builds that work in IE11. But it is not possible to perform the assembly in the form of a library.

The last build (npm run build-legacy) from the source code that works for me is version 6.4.3.