DApp doesn't load on Android 6.0

[tomlinton]

As reported by @franck. The DApp gives an endless loading indicator on Android 6.0. Console reveals Unexpected token ....

This is due to the older version of Chromium used in that version of Android (so its not Android specific, but old version of Chromium specific) not supporting es6 and I suspect the DApp is missing the correct babel transforms/preset.

[franckc]

A user reported this issue, on two of his devices:

• Android Version 6.0.1
• Android 5.1. Phone Meizu. Flyme 6.3.0.0G

I recommended he updates his webview package but his device did not allow him to update...

[rtman]

@tomlinton @franckc sounds like babel-es6-polyfill would do the trick?

[franckc]

@rtman I'm not very familiar with the mobile side of things but it would seem to me you are right.

@tomlinton a) does Ryan's suggestion sound good to you ? b) Do you know if this issue is reproducible under the Android simulator so that if @rtman tries to fix it by using babel-es6-polyfill he can verify the fix works ?

[tomlinton]

I have tried that (and a host of others).

Yep you can reproduce it in an Android simulator. Or you can also use a workaround to install an older version of chrome (<= 44 in Android 6.0 from memory).

[tomlinton]

Another approach I've tried with no success was setting the targets for @babel/preset-env via a browserlist query to something very wide, e.g. "browserslist": "> 0.1%, Android 67".

[tomlinton]

An idea popped into my head while I was walking today. Perhaps this is caused by the web3 package, it is marked as external in our webpack config so it won't get bundled, therefore none of the transforms/polyfill will apply.

I'll try this out sometime when I get some time, but if anyone else wants to have a play go for it!

[tomlinton]

Made a bit of progress with this by removing the external web3 config. Getting close to a fix. The issue now is that babel is not transpiling code from our other packages (due to monorepo). E.g. @origin/graphql doesn't get transpiled and so fails.

Here is what you need for a reproduction if anyone wants to play with it:

1. Use branch tomlinton/babel-error-repro which has minifcation disabled and uses echo-loader to show the files being transpiled.
2. Get an old version of Chrome. I used this on OSX.
3. Run npm run build from the DApp dir.
4. Serve it up via python -m SimpleHTTPServer 8000 or similar.
5. Open in browser and observe error.

I think from here the babel config might need to be moved around, and rootMode used.

Relevant issues:

babel/babel#8945
babel/babel#8309

[micahalcorn]

Taking this off of @tomlinton's plate 🍽

FAQ article here ❓