Doesn't work in Internet Explorer

[filips123]

Actual behavior

3Box doesn't work in Internet Explorer. When calling any of its functions, there will be an error so it will be impossible to use it.

The problem is that IE doesn't support async/await and arrow functions. They (and probably also some other unsupported syntaxes) are included in Webpack generated file (and on CDN). So the code will fail.

If this won't affect speed and performance in modern browsers, Webpack can probably be configured to transcompile them into supported syntaxes.

Expected behavior

This should not happen. It already works normally in Microsoft Edge, Firefox and Chrome.

Reproducing

1. Create a simple HTML file with required 3Box bundle:

   <script src="https://unpkg.com/3box/dist/3box.js"></script>

2. Optionally serve this file with the local web server (it would be same with or without the server):

   python3 -m http.server 80 # Python 3
   php -S localhost:80 # PHP

3. Open this file in IE and open browser's JavaScript console. You will see errors.

Logs

SCRIPT1002: Syntax error
3box.js (13411,1)

Enviroment

• Operating system: Windows 10
• Browser: Internet Explorer 11

[oed]

Thanks for reporting! Sorry for the slow response. Is Expected ';' the only output to the logs? I don't have a windows machine to test on unfortunately :/

[filips123]

@oed Unfortunately, yes.

[oed]

Odd, I can't really debug since I don't have windows. Do you have the same issue if you run Chrome or Firefox?

[filips123]

No. It works there.

[oed]

Ok, thanks. Any chance you wanna try the example in this repo to debug it in Edge?

[filips123]

Ok. Can you give me some instructions about this?

[oed]

Sure, start by cloning the 3box-js repo:

$ git clone https://github.com/3box/3box-js.git

Then cd into the 3box-js folder, and run:

$ npm run example:start

Then go to localhost:30000 to test

[filips123]

@oed

I tested with the example, but the page doesn't load in Edge. If I enter URL of the example, the page will refresh, URL will be reset to first one and page will freeze for few seconds. There are no errors in the console and even the request isn't shown in network monitor in Edge.

I found out that page didn't load because Edge sometimes block local sites without modifications. Page now load and I will now try to figure out where the syntax error is.

But there are probably more useful errors in Internet Explorer. It displays that there is some syntax error. Page then won't work, but it will load.

Here are logs from the console:

HTML1506: Unexpected token.
192.168.64.101:30000 (131,3)

SCRIPT1002: Syntax error
index.js (1,29)

SCRIPT1002: Syntax error
3box.js (9693,1)

[oed]

@filips123 anyway you can figure out what the actual syntax error is? Would be very helpful, thanks :)

[filips123]

@oed

I think I know what was the issue.

I tested functions only in browser's console. Because the function is asynchronous, I used await before it. The problem is that, unlike Firefox and Chrome, Edge doesn't support await in browser's console. So this caused the error. The example works correctly (after fixes about local sites), and also my code works if I use it in async function in the script.

But there are problems in Internet Explorer. It doesn't support async/await and arrow functions. They (and probably also some other unsupported syntaxes) are included in Webpack generated file (and on CDN). So the code will fail. If this won't affect speed and performance in modern browsers, Webpack can probably be configured to transcompile them into supported syntaxes.

[oed]

@filips123 That makes sense, thanks for investigating! Do you know how to set up the correct transcompile? If so, contributions are very welcome 😄

[filips123]

No, I don't know much about Webpack.

I found some related issues about arrow functions: webpack/loader-utils#92 webpack/webpack-dev-server#1282

And for async/await: https://codingitwrong.com/2018/02/05/await-off-my-shoulders.html https://cmichel.io/how-is-async-await-transpiled-to-es5

You should research how will that changes affect speed and performance in modern browsers.

[oed]

@filips123 when you install the npm package there should be a lib folder which contains es5 builds. Did you try that?

Thanks for the links btw, this is on our radar but not immediate prio. I'll let you know when we get to it :)

[oed]

@zachferland Do you have some quick thoughts on this issue?

[zachferland]

Our builds and lib folders are already transpiled to es5, assuming edge should have full es5 support, but maybe there are some idiosyncrasies. And it is also possible that something is not quite configured on our end for that specific case.

The easiest thing we can do is try setting edge as a babel target. With babel 7 you can just specify the browsers/versions you want to support. But could be tradeoffs there. Generally I would recommend anyone does their own builds including our files so that can meet the exact targets they want.

https://babeljs.io/docs/en/babel-preset-env

[filips123]

@zachferland How should lib folders be generated?

[zachferland]

the lib folder is just the es5 transpiled of the src folder. Its also what the package exports by default. So if you import or require 3box in your own js files it uses the files from the lib. The script 'nom run build:es5' will also generate it from the source, if you want them locally.

If you wanted to try something quickly, you could use all our build configs to create a new dist file. But change our babelrc to target edge, like described in the link above. Running the example creates a build as part of that, so if you edit the .babelrc file and use that example you will see any changes reflected there.

[filips123]

@zachferland Are this ES5 builds available in CDN?

[zachferland]

The build on CDN is es5 target. But like I mentioned above, maybe edge has some idiosyncrasies and we don't have the exact build configs to support it, can't tell at the moment

[filips123]

@zachferland No, in Edge it works (see https://github.com/3box/3box-js/issues/301#issuecomment-461040645). The problems are now in Internet Explorer. This is probably because it doesn't fully support ES5 or related things. If the IE should be supported, build config should be changed. If not, this issue can probably be closed.

[oed]

Thanks for all of your feedback here @filips123! Supporting IE is not an immediate priority for us, but keeping this issue open for future reference 🙂