Error on ready - TypeError: element.querySelectorAll is not a function

RESOLVED FIXED

Status

L20n
HTML Bindings
RESOLVED FIXED
2 years ago
2 years ago

People

(Reporter: lorchard, Unassigned)

Tracking

Details

Attachments

(1 attachment)

(Reporter)

Description

2 years ago
In my code, I have this:

    document.l10n.ready.then((result) => {
      console.log('L10N ready', result);
    }).catch((err) => {
      console.log('L10N ERROR!', err);
    });

This results in the following error message:

16:50:34.449 L10N ERROR! TypeError: element.querySelectorAll is not a function
Stack trace:
getTranslatables@http://ideatown.dev:8000/static/app/app.js:23015:28
_translateFragment@http://ideatown.dev:8000/static/app/app.js:23082:36
translateRoots/<@http://ideatown.dev:8000/static/app/app.js:22808:14
translateRoots@http://ideatown.dev:8000/static/app/app.js:22807:24
translateView@http://ideatown.dev:8000/static/app/app.js:23364:88
View/this.ready<@http://ideatown.dev:8000/static/app/app.js:23232:16
1 app.js:355:7

I've been able to track the problem down to here:

    https://github.com/l20n/l20n.js/blob/master/src/bindings/html/observer.js#L23

This bit of code in ES6:

    return Promise.all(
      [...observers.get(view).roots].map(
        root => translateFragment(view, root)));

Is translated by babel like so:

    return Promise.all([].concat(observers.get(view).roots).map(function (root) {
      return _translateFragment(view, root);
    }));

The problem, though, is `roots` is a Set - and this is the result of [].concat() with a Set:

   Array [ Set[1] ]

And so, translateFragment gets Set[<html>] instead of <html> (i.e. an element) - and Set does not have querySelectorAll.
(Reporter)

Comment 1

2 years ago
Created attachment 8708575 [details] [diff] [review]
Switch to Array.from() rather than spread

Not sure if this is the best way to address the issue, but this patch fixed the error for me.
Comment on attachment 8708575 [details] [diff] [review]
Switch to Array.from() rather than spread

Thanks, Les.  This is due to our use of Babel's loose mode which assumes that the iterable used with the spread operator is always an array.  I remember this also gave us some headache when used with NodeLists (for which we already use Array.from); I must have missed this Set here.
Attachment #8708575 - Flags: review+
I landed your patch in https://github.com/l20n/l20n.js/commit/2afdfebce90565ffd19288560342d074733e255b.

I'll publish a new version of L20n next week.
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
Duplicate of this bug: 1243725
(In reply to Staś Małolepszy :stas from comment #3)

> I'll publish a new version of L20n next week.

Version 3.5.1 is now live.  Thanks for the patience.
You need to log in before you can comment on or make changes to this bug.