Tasks App is blank in Chrome Beta 77

[mcocolla]

Steps to reproduce

1. Install Google Chrome Beta 77
2. Open Tasks
3. No tasks show

Expected behaviour

Tasks lists and tasks from those lists should show on the screen.

Actual behaviour

JavaScript throws 3 errors from tasks.js and the screen is blank. Add list does not work either. Errors are listed below in the Browser log section.

Stable versions of Chrome, Firefox, IE11, and Edge currently work as expected. Not sure if it is a bug in Chrome Beta or if it is a change to the JavaScript engine that is permanent.

Client configuration

Browser: Chrome Beta 77.0.3865.42

Operating system: Windows 10 1903

Browser log

Insert your browser log here, this could for example include:

tasks.js?v=5d618559-11:7 TypeError: t(...).replace is not a function
    at a.deleteMessage (tasks.js?v=5d618559-11:845)
    at tasks.js?v=5d618559-11:845
    at a.ge [as _l] (tasks.js?v=5d618559-11:7)
    at a.<anonymous> (tasks.js?v=5d618559-11:845)
    at a.t._render (tasks.js?v=5d618559-11:7)
    at a.r (tasks.js?v=5d618559-11:7)
    at hn.get (tasks.js?v=5d618559-11:7)
    at hn.run (tasks.js?v=5d618559-11:7)
    at dn (tasks.js?v=5d618559-11:7)
    at Array.<anonymous> (tasks.js?v=5d618559-11:7)
tasks.js?v=5d618559-11:7 TypeError: t(...).replace is not a function
    at a.inputString (tasks.js?v=5d618559-11:845)
    at hn.get (tasks.js?v=5d618559-11:7)
    at hn.evaluate (tasks.js?v=5d618559-11:7)
    at a.inputString (tasks.js?v=5d618559-11:7)
    at a.<anonymous> (tasks.js?v=5d618559-11:845)
    at a.t._render (tasks.js?v=5d618559-11:7)
    at a.r (tasks.js?v=5d618559-11:7)
    at hn.get (tasks.js?v=5d618559-11:7)
    at hn.run (tasks.js?v=5d618559-11:7)
    at dn (tasks.js?v=5d618559-11:7)
tasks.js?v=5d618559-11:7 TypeError: t(...).replace is not a function
    at a.deleteMessage (tasks.js?v=5d618559-11:845)
    at tasks.js?v=5d618559-11:845
    at a.ge [as _l] (tasks.js?v=5d618559-11:7)
    at a.<anonymous> (tasks.js?v=5d618559-11:845)
    at a.t._render (tasks.js?v=5d618559-11:7)
    at a.r (tasks.js?v=5d618559-11:7)
    at hn.get (tasks.js?v=5d618559-11:7)
    at hn.run (tasks.js?v=5d618559-11:7)
    at dn (tasks.js?v=5d618559-11:7)
    at Array.<anonymous> (tasks.js?v=5d618559-11:7)

[szaimen]

The contacts app also does appear to load not correctly as well. @mcocolla can you try that out with your setup?

[raimund-schluessler]

Well, if the Tasks app does not work in a Beta release of Chrome, but does work in the stable releases, I would consider this a bug in Chrome, not in the app. The replace function is a standard javascript function for strings and should work without problems.

[robbieh]

It is blank also in Firefox 68.0.2.

The JS error here appears to be: TypeError: "t.displayName is undefined"

[raimund-schluessler]

It is blank also in Firefox 68.0.2.

The JS error here appears to be: TypeError: "t.displayName is undefined"

I cannot confirm this, the app works fine on this Firefox version:

Please provide the whole broswerlog and best fill the issue template https://github.com/nextcloud/tasks/blob/master/issue_template.md

[mcocolla]

The contacts app also does appear to load not correctly as well. @mcocolla can you try that out with your setup?

I installed the Contacts app, and initially could not even create a contact but once I was able to add a contact it would not display the contact when I loaded the main navigation link fresh. I could navigate the contact's direct link but not from the main interface at "apps/contacts/All%20contacts"

When it loads "apps/contacts/All%20contacts", it is also throwing errors in the browser's console:

contacts.js?v=1ee059fb-11:1014 Error during the check: missing FN t {jCal: Array(3), addressbook: {…}, vCard: t, conflict: false, dav: e} TypeError: t(...).toLowerCase is not a function at Object.run (contacts.js?v=1ee059fb-11:1014) at contacts.js?v=1ee059fb-11:1014 at Array.forEach () at qe (contacts.js?v=1ee059fb-11:1014) at a.updateLocalContact (contacts.js?v=1ee059fb-11:1035) at a. (contacts.js?v=1ee059fb-11:1035) at w (main.js?v=1ee059fb-11:235) at Generator._invoke (main.js?v=1ee059fb-11:235) at Generator.e. [as next] (main.js?v=1ee059fb-11:235) at un (contacts.js?v=1ee059fb-11:1035)

contacts.js?v=1ee059fb-11:7 TypeError: t.name.localeCompare is not a function at contacts.js?v=1ee059fb-11:1014 at Array.sort () at availableProperties (contacts.js?v=1ee059fb-11:1014) at hn.get (contacts.js?v=1ee059fb-11:7) at hn.evaluate (contacts.js?v=1ee059fb-11:7) at a.availableProperties (contacts.js?v=1ee059fb-11:7) at a. (contacts.js?v=1ee059fb-11:1014) at a.t._render (contacts.js?v=1ee059fb-11:7) at a.r (contacts.js?v=1ee059fb-11:7) at hn.get (contacts.js?v=1ee059fb-11:7)

[raimund-schluessler]

Somehow the behaviour of Chrome changed with Chrome 77 Beta. t(...) now yields a TrustedHTML object instead of a string. This object does not have .replace function obviously. I can provide a fix for this, but I wonder whether this will change for the stable release of Chrome. Especially since this will most likely affect all of Nextcloud (as you see on the Contacts app already).

[szaimen]

hm...

[raimund-schluessler]

https://github.com/nextcloud/tasks/pull/591 will partially solve the issue. The app is usable again but we still get a lot of warnings because the property type check failed for some vue components, e.g.:

[Vue warn]: Invalid prop: type check failed for prop "message". Expected String with value "This will delete the calendar "Calendar with really very long name" and all corresponding events and tasks.", got TrustedHTML 

found in

---> <PopoverMenu> at src/components/Confirmation.vue
       <PopoverMenu> at src/components/PopoverMenu.vue
         <RouterLink>
           <Draggable>
             <TheList> at src/components/TheList.vue
               <App> at src/app.vue
                 <Root>

While #591 is a general improvement, fixing the error above might need some workaround just for Chrome (Beta). We could do a .toString() on the TrustedHTML object in order to get a string. While this would be superfluous for the other browsers it would at least not lead to a warning or error there.

[raimund-schluessler]

I just saw that opening the details view still fails. We would really need to adjust the t(..) function for the translation here. Summoning @nextcloud/javascript now 😉 .

Adding something like

Vue.prototype.$t = function() {
    return t.apply(null, arguments).toString()
}

would probably help, but this should be ideally done on server I think.

[raimund-schluessler]

PR is in #593 but please see https://github.com/nextcloud/tasks/pull/593#issue-315078456.

[raimund-schluessler]

Fixed with #593, although this probably needs a fix in server as well. Will report it there when I find the time.