[SOLVED] Browser Incompatibility (Babel?) - SyntaxError: Unexpected token '…'. Expected a property name

Hi,

I decided to test my website on an older version of Safari (assuming that a lot of potential users may be using that on their iPhone or iPad).

My site doesn’t load. It returns this error:

image

This error is thrown in the console when loading the live site on Safari 11.0.1. I have not been able to replicate the issue locally as I cannot install the older version of Safari. Opening the file with this error in does not provide much more context as it’s the main JS file:

The error suggests it’s an issue with browser compatibility - specifically the spread operator.

I managed to open the local development server on an iOS simulator running Safari 11.0.1 but it returned lots of errors. It returned the same error but instead seemed to be related to the stripe package (the getOptionsFromArgs function is Stripe-related):

I followed this guide to ensure the Stripe node_module was recompiled. I deployed again. I still get the same error.

My next assumption was that this issue could be solved by adding / tweaking some Babel configuration to ensure spread operators are transpiled properly.

Unfortunately, I have been down a rabbit hole of trying to figure out how to use Babel, how to use its plugins and how to use it with Meteor.

  • Do I just add Babel plugins as Meteor packages?
  • Do they need to be added as NPM packages?
  • Do I need to create a .babelrc file or does Meteor handle it once they’re installed?
  • Other than a spread operator plugin, how do I know which other plugins I need?
  • Which spread operator plugin do I need? There seem to be several different ones.

My Meteor version is 1.11.1. React@16.13.1. I can provide the list of Meteor & NPM packages if it’s helpful.

I’d appreciate any help - even the slightest bit of guidance on how to properly use Babel (I couldn’t find many resources on using Meteor with Babel specifically).

I have tried installing react-app-polyfill and including these files in my main.jsx file.

I have also tried to install and include core-js and regenerator-runtime.

I have tried to install these:

    "@babel/core": "^7.13.15",
    "@babel/preset-env": "^7.13.15",
    "@babel/preset-react": "^7.13.13",
    "babel-preset-meteor": "^7.9.0"`

Using this .babelrc file:

{
  "presets": [
    "meteor",
    "react",
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ],
    "@babel/preset-react"
  ]
}

I have also tried to include all of my NPM packages in the Meteor recompile config but that has also not fixed the issue.

I have tried to explicitly include Safari and iOS Safari in my browserslist:

  "browserslist": [
    "defaults",
    ">0.2%",
    "maintained node versions",
    "ie 11",
    "ios_saf 11.0-11.4.1",
    "safari 11.0-11.1.2"
  ]

This has also done nothing.

Stripe is definitely causing the errors.

importing it or requiring it throws SyntaxError from bundle or a load of errors locally.

SOLUTION (for me at least):

Downgrade stripe package to version "stripe": "8.111.0".

I originally had 8.121.0. Upgrading to 8.144.0 didn’t work, so I downgraded to 6.36.0. I then slowly updated in chunks to see the maximum version that I could install.

This version works for Safari 11.0 & 11.2 now as well.