frontend crash when visiting /templates/

[qaisjp]

Steps to reproduce:

1. Visit "Templates" language
2. Upload button doesn't work
3. Error in console

Results (Expected/Actual):

Expect upload button to work.

Environment (i.e. 'pootle --version', DB, OS, Browser):

Pootle 2.9.0rc1 (Django 1.10.8, Translate Toolkit 2.2.5) DB: 10.1.38-MariaDB-0+deb9u1 MacOS / Chrome

Error

Uncaught Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
    at r (vendor.min.7c1c1895.js:1)
    at Object._registerComponent (vendor.min.7c1c1895.js:26)
    at Object._renderNewRootComponent (vendor.min.7c1c1895.js:26)
    at Object._renderSubtreeIntoContainer (vendor.min.7c1c1895.js:26)
    at Object.render (vendor.min.7c1c1895.js:26)
    at Object.init (app.min.b8388ea5.js:42)
    at HTMLDocument.<anonymous> ((index):666)
    at p (vendor.min.7c1c1895.js:24)
    at Object.fireWith [as resolveWith] (vendor.min.7c1c1895.js:24)
    at Function.ready (vendor.min.7c1c1895.js:14)
r @ vendor.min.7c1c1895.js:1
_registerComponent @ vendor.min.7c1c1895.js:26
_renderNewRootComponent @ vendor.min.7c1c1895.js:26
_renderSubtreeIntoContainer @ vendor.min.7c1c1895.js:26
render @ vendor.min.7c1c1895.js:26
init @ app.min.b8388ea5.js:42
(anonymous) @ (index):666
p @ vendor.min.7c1c1895.js:24
fireWith @ vendor.min.7c1c1895.js:24
ready @ vendor.min.7c1c1895.js:14
me @ vendor.min.7c1c1895.js:14

And if I run it in dev

Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.
    at invariant (https://translate.mtasa.com/assets/js/vendor.min.49f2075a.js:12904:16)
    at Object._registerComponent (https://translate.mtasa.com/assets/js/vendor.min.49f2075a.js:14636:169)
    at Object._renderNewRootComponent (https://translate.mtasa.com/assets/js/vendor.min.49f2075a.js:14659:35)
    at Object.wrapper [as _renderNewRootComponent] (https://translate.mtasa.com/assets/js/vendor.min.49f2075a.js:13234:22)
    at Object._renderSubtreeIntoContainer (https://translate.mtasa.com/assets/js/vendor.min.49f2075a.js:14739:33)
    at Object.render (https://translate.mtasa.com/assets/js/vendor.min.49f2075a.js:14759:24)
    at Object.wrapper [as render] (https://translate.mtasa.com/assets/js/vendor.min.49f2075a.js:13234:22)
    at Object.init (https://translate.mtasa.com/assets/js/common/app.min.fade5a36.js:23555:25)
    at HTMLDocument.<anonymous> (https://translate.mtasa.com/templates/installer/:666:15)
    at fire (https://translate.mtasa.com/assets/js/vendor.min.49f2075a.js:6003:31)
invariant @ invariant.js:39
_registerComponent @ ReactMount.js:447
_renderNewRootComponent @ ReactMount.js:470
ReactMount__renderNewRootComponent @ ReactPerf.js:66
_renderSubtreeIntoContainer @ ReactMount.js:550
render @ ReactMount.js:570
ReactMount__renderNewRootComponent @ ReactPerf.js:66
init @ stats.js:80
(anonymous) @ (index):666
fire @ jquery.js:2913
fireWith @ jquery.js:3025
ready @ jquery.js:398
completed @ jquery.js:93

Quick fix

If you comment out these lines, the error goes away:

https://github.com/translate/pootle/blob/72a076de3f2e7931cf0a0794a4771f11b77eef4d/pootle/static/js/stats.js#L78-L85

Commenting out those lines has the side effect of breaking the fancy user stats.

A better fix is ensuring this code runs on any page except the templates page. You can do this by wrapping those lines with this if statement: if (!(new URL(window.location)).pathname.startsWith("/templates"))

To hackily apply this patch in production:

• have nodejs/npm installed
• cd env/lib/python2.7/site-packages/pootle
• mv assets assets_old
• mkdir assets
• cd static/js
• npm install
• modify stats.js
• pootle webpack --dev and ctrl-c after it has compiled
• mv node_modules/ ../.. (necessary, otherwise collectstatic will copy this gigantic folder)
• cd ../../
• pootle collectstatic && pootle assets build and type yes
• pootle runserver

And it should work