nextjs-tailwind-ionic-capacitor-starter icon indicating copy to clipboard operation
nextjs-tailwind-ionic-capacitor-starter copied to clipboard

"globalThis is not defined" - Android 9/10 Compatibility Issues

Open alexei-petru opened this issue 1 year ago • 3 comments

I’m encountering a "globalThis is not defined" error on Android 9 from the start after cloning the repo, and after adding more code I have other syntax errors on Android 10 as well ex. ".?" syntax. image

I’ve tried multiple approaches, including:

Adding polyfills Adjusting my browserslist configuration Starting a fresh Next.js project Unfortunately, nothing seems to resolve the issue.

Everything I have found is that mby using dynamic imports in Next.js might be related to the error.

As a newbie, I’m stuck and would really appreciate if someone smarter could help figure this out. I’d prefer not to completely restructure the project to use the official Ionic starter if possible, since everything else works.

Any advice or guidance would be greatly appreciated. Thank you!

alexei-petru avatar Aug 17 '24 15:08 alexei-petru

Hey @alexei-petru what version of Chrome is installed on the device / emulator?

Also, have you tried on a newer version of Android, e.g. 13.x or 14.x?

nathanchapman avatar Aug 20 '24 16:08 nathanchapman

Hey @nathanchapman, I am testing in android studio, so it's the default Android 9 (API 28) chrome 69.0.3497.100. After extending the project with a lot of ionic components mostly, I have more errors as "optional chaining operator" on android 10 (API 29) chrome 74.0.3729.185, both version I have taken from emulator browser "chrome://version/". On android 11/12/13/14 it works without errors.

alexei-petru avatar Aug 22 '24 08:08 alexei-petru

Yeahh, I believe this is just a browser incompatibility issue. The versions of Chrome that come stock on API 28 + 29 are ancient. For comparison, the latest version of Chrome is 128.0.6613.84

e.g. for the optional chaining errors you're seeing, this was first supported on Chrome 80.x https://caniuse.com/mdn-javascript_operators_optional_chaining

If you create emulator devices with API 28 or 29, you should still be able to update Chrome on them if I'm not mistaken

nathanchapman avatar Aug 22 '24 15:08 nathanchapman

@nathanchapman Thank you for the explanation, that helped me. I didn’t know about the Chrome and WebView relation. Updating Chrome" 7.0 - 9.0" or WebView "10 and later" works, tested in Android Studio emulators.

Android 6.0 and earlier: WebView was separate. Android 7.0 - 9.0: Combined with Chrome. Android 10 and later: WebView is separate again, updated independently via the Play Store.

PS. in the end, still didn't understand, why adding polyfills or updating browserslist doesn't work tho.

alexei-petru avatar Sep 15 '24 11:09 alexei-petru