Search code examples
javascriptinternet-explorerbabeljsmomentjs

Babel / Moment.js / Bundled javascript fails in IE/Safari

I have taken over a Vue.js project from someone else and am experiencing some cross-browser issues with the bundled javascript code. I am not an expert in Babel, and suspect that maybe some configuration is incorrect?

I can run the Vue.js website locally on my own dev machine, and I can publish it as an Azure web app. Testing the website gives the following results:

  • Chrome: Runs fine, when hosted locally and in Azure.
  • IE 11: Runs fine, when hosted locally, but fails when hosted in Azure.
  • Safari: Fails when hosted in Azure (have not tried locally)

What surprises me, is that IE 11 works fine, when the website is hosted locally, but fails when the website is hosted in Azure. It's the same bundled js file.

When the website is hosted in Azure, both IE and Safari fail on the same line in the bundled js file. The IE error message is:

SCRIPT5018: Unexpected quantifier

The Safari error message is:

SyntaxError: Invalid regular expression: nothing to repeat

The code line with the error is this:

,"./node_modules/moment/locale/ar-dz.js":function(n,t,i){
//! moment.js locale configuration
//! locale : Arabic (Algeria) [ar-dz]
//! author : Amine Roukh: https://github.com/Amine27
//! author : Abdel Said: https://github.com/abdelsaid
//! author : Ahmed Elkhatib
//! author : forabi https://github.com/forabi
//! author : Noureddine LOUAHEDJ : https://github.com/noureddinem
(function(n,t){t(i("./node_modules/moment/moment.js"))})(this,function(n){"use strict";
//! moment.js locale configuration
var i=function(n){return n===0?0:n===1?1:n===2?2:n%100>=3&&n%100<=10?3:n%100>=11?4:5},u={s:["??? ?? ?????","????? ?????",["???????","???????"],"%d ????","%d ?????","%d ?????",],m:["??? ?? ?????","????? ?????",["???????","???????"],"%d ?????","%d ?????","%d ?????",],h:["??? ?? ????","???? ?????",["??????","??????"],"%d ?????","%d ????","%d ????",],d:["??? ?? ???","??? ????",["?????","?????"],"%d ????","%d ?????","%d ???",],M:["??? ?? ???","??? ????",["?????","?????"],"%d ????","%d ????","%d ???",],y:["??? ?? ???","??? ????",["?????","?????"],"%d ?????","%d ?????","%d ???",]},t=function(n){return function(t,r){var e=i(t),f=u[n][i(t)];return e===2&&(f=f[r?0:1]),f.replace(/%d/i,t)}},r=["?????","?????","????","?????","???","????","??????","???","??????","??????","??????","??????",];return n.defineLocale("ar-dz",{months:r,monthsShort:r,weekdays:"?????_???????_????????_????????_??????_??????_?????".split("_"),weekdaysShort:"???_?????_??????_??????_????_????_???".split("_"),weekdaysMin:"?_?_?_?_?_?_?".split("_"),weekdaysParseExact:!0,longDateFormat:{LT:"HH:mm",LTS:"HH:mm:ss",L:"D/?M/?YYYY",LL:"D MMMM YYYY",LLL:"D MMMM YYYY HH:mm",LLLL:"dddd D MMMM YYYY HH:mm"},meridiemParse:/?|?/,isPM:function(n){return"?"===n},meridiem:function(n){return n<12?"?":"?"},calendar:{sameDay:"[????? ??? ??????] LT",nextDay:"[???? ??? ??????] LT",nextWeek:"dddd [??? ??????] LT",lastDay:"[??? ??? ??????] LT",lastWeek:"dddd [??? ??????] LT",sameElse:"L"},relativeTime:{future:"??? %s",past:"??? %s",s:t("s"),ss:t("s"),m:t("m"),mm:t("m"),h:t("h"),hh:t("h"),d:t("d"),dd:t("d"),M:t("M"),MM:t("M"),y:t("y"),yy:t("y")},postformat:function(n){return n.replace(/,/g,"?")},week:{dow:0,doy:4}})})},

...and I believe I have narrowed down the issue to be this regular expression:

meridiemParse:/?|?/

...which indeed looks incorrect.

But why does the script then succeed in some cases, in particular, why does IE work fine, when the website is hosted locally?

The invalid regular expression seems to come from the moment.js lib, but maybe it's after some incorrect transformations from babel? Here is my Babel setup:

{
    "plugins": [
        "@babel/syntax-dynamic-import",
        "@babel/plugin-proposal-class-properties",
        ["babel-plugin-root-import",
            {
                "paths": [
                    {
                        "rootPathSuffix": "./scripts",
                        "rootPathPrefix": "~/"
                    }
                ]
            }
        ]
    ],
  "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": "3.7",
                "modules": false
            }
        ]
  ]
}

Any advice, how to troulbeshoot this and make the bundled js work cross-browser?

Solution

  • OK, I have solved the issue now.

    Observation 1: The reason that IE worked, when the website was hosted locally, but did not work when the website was hosted in Azure, was due to the fact, that inside the method GetPathWithCacheBust code was checking whether the website was hosted locally -- and if it was, then the javascript file was loaded directly without any minification.

    Observation 2: As mentioned in the question, I have taken over the code base from someone else. And after deeper inspection I figured out, that custom minification logic was applied in the web.config file using an .ashx file. This custom minification logic seemed to corrupt special characters, thereby causing the javascript error in moment.js.

    I removed the custom minification logic and applied default bundling/minification using the Microsoft.AspNet.Web.Optimization NuGet package.

    At first, this didn't work as expected (got 404 error, because the minified bundle could not be found). But I figured out, that this was due to a conflict with Umbraco, which the website uses. After adding this line to web.config, everything finally worked:

    <add key="umbracoReservedUrls" value="~/bundles/" />

    So in the end, the issue was not related to Babel or Moment.js at all -- but due to an error in some custom minification code.