Modern browsers and iOS WKWebView

1

Hello meteor.js community.

I wanted to post about an issue on which I spent a heck of a lot of time troubleshooting, in case it helps anyone with the same issue, or if the core meteor team can address it upstream. The issue arose after I deployed a newly meteor3-compatible app, and tried loading that app in a WKWebView on iOS.

The webview would render a blank white screen with an error saying something like
core-js module not found in your node_modules

I eventually tracked the problem to the fact that modern-browsers packages was identifying the WKWebView as a legacy browser, i.e. Meteor.isModern === false.

I fixed the issue by injecting code into the modern-browsers to check the browser for WKWebView and force it to be interpreted as modern. I do this during the build phase in my CI/CD pipeline.

e.g.
(sed -i '/const lowerCaseName/c\if (browser?.name?.toLowerCase?.().includes("wkwebview")) return true;\n const lowerCaseName =' bundle/programs/server/packages/modern-browsers.js)

In detail,
Here: modern-browsers/modern.js at main · meteorbase/modern-browsers · GitHub
We need to go to ~line 70
function isModern(browser) {...}
And patch that function to check if the browser is WKWebView, and return true no matter what.
It could be something like this

function isModern(browser) {
  const lowerCaseName =
    browser && typeof browser.name === 'string' && browser.name.toLowerCase();
  // add this next line as a catch-all for wkwebview
  if (lowerCaseName.includes('wkwebview') return true;

  return (
    !!lowerCaseName &&
    hasOwn.call(minimumVersions, lowerCaseName) &&
    greaterThanOrEqualTo(
      [~~browser.major, ~~browser.minor, ~~browser.patch],
      minimumVersions[lowerCaseName].version
    )
  );
}
1 Like