search

alphagov / accessible-autocomplete

An autocomplete component, built to be accessible.
https://alphagov.github.io/accessible-autocomplete/examples/
MIT License
917 stars 149 forks source link

Autocomplete webpack build outputs syntax that causes a parse error in IE8 #306

Open NickColley opened 6 years ago

NickColley commented 6 years ago

This project does not support IE8 which if fine but it makes it hard to progressively use this without having scripts throw errors in older browsers, ideally we'd be able to conditionally use this project without errors.

At the moment since we're using Webpack to build this project when you load the JavaScript it'll fail due to the use of the 'default' keyword.

This can't be avoided by feature detection 'cutting the mustard' and returning early since the error happens when parsing the file.

We'd want to use rollup (probably more appropriate for a library anyway and result in a small filesize), with legacy mode turned on like we do in GOV.UK Frontend.

colinrotherham commented 6 years ago

Hi @nickcolley, unfortunately it's a little more involved than just uglify.

There are Object methods that need polyfills (we can try @babel/preset-env to automatically add these via browserslist) and keys like .default which will need quoting ["default"] back to ES3 levels.

As nice as the speed increase is, Webpack hot module replacement isn't old IE compatible when doing local development with multiple browsers open.

Again, specifying the webpack -p flag enables various "production" optimisations that bypass the IE8 uglify tweaks.

I'll open a branch with some tweaks to fix a few of these.

NickColley commented 6 years ago

Hey Colin, I think we want to try to move towards Rollup since that's what we use on GOV.UK Frontend, would welcome any improvements to the webpack setup if it does not take you too much time though.

colinrotherham commented 6 years ago

There's a quick "update everything" we can do but internal parts of webpack are still choking IE8 which may be quite tricky to work around.

Like this bit:

ie8 crash

When bundlers (and libraries like React) have ended support for old IE it's an uphill struggle!

What's the latest with this repo's SauceLabs integration?

I'm seeing different results than the ones linked on the home page via the https://saucelabs.com/u/tvararu-alphagov account.

NickColley commented 6 years ago

We have had to pin our version of Rollup since they removed IE8 support, it's difficult times to support IE8 and use modules :(

https://github.com/alphagov/govuk-frontend/blob/master/package.json.test.js

We've had some issues with Saucelabs in the past, since it is not deterministic.