Page MenuHomePhabricator

Debug parameter causes crashes
Closed, ResolvedPublicBUG REPORT

Description

Steps to Reproduce:

I open the test article with enabled debug flag ( https://de.wikipedia.beta.wmflabs.org/wiki/Data-Bridge?debug=true)
I wait until the page is completely loaded
I open the page inspector

Actual Results:
I see a massive amount of errors

Expected Results:
No errors are shown

Event Timeline

Results of my investigation so far:

These errors are triggered by line https://github.com/wikimedia/mediawiki-extensions-Wikibase/blob/c8fbefa4fd9ce869ffd228ac1fe236c54fdb78bf/client/data-bridge/src/mediawiki/init.ts#L24:

const require = await mwWindow.mw.loader.using( [ APP_MODULE, WBREPO_MODULE ] ),

More specifically: calling ResourceLoader::using() with APP_MODULE, i.e. wikibase.client.data-bridge.app.

Debug mode causes the modules to be loaded into the global scope, instead of a closure, as the documentation of the debug mode explains:

[...] Transformations such as closure don't apply, so scripts may execute in the global scope.

However, it is not clear why this should make a difference as our code is not supposed to modify $, even when called in the global scope.

On the other hand, the quoted sentence from the documentation hints that there might be other transformations that are not executed. Not sure if that is a promising lead to investigate.

Michael moved this task from Doing to To do on the Wikidata-Bridge-Sprint-3 board.
Michael subscribed.

However, it is not clear why this should make a difference as our code is not supposed to modify $, even when called in the global scope.

Well, our own code doesn’t modify it, but vue2.common.prod.js does.

vue2.common.prod.js (unminified by Firefox DevTools)
// ...
var _ = /-(\w)/g,
b = g(function (e) {
  return e.replace(_, function (e, t) {
    return t ? t.toUpperCase()  : ''
  })
}),
$ = g(function (e) {
  return e.charAt(0).toUpperCase() + e.slice(1)
}),
w = /\B([A-Z])/g,
C = g(function (e) {
  return e.replace(w, '-$1').toLowerCase()
});
// ...

If the file isn’t transformed into a closure, the assignment in the middle overwrites the jQuery $ global. This would be less of a problem if other scripts used the usual closure pattern –

( function ( mw, $ ) {
  // this $ is always window.jQuery
} )( mediaWiki, jQuery );

– but apparently not all of them do.

Change 527072 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@master] Wrap Vue2 JS file in IIFE

https://gerrit.wikimedia.org/r/527072

Change 527072 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Wrap Vue2 JS file in IIFE

https://gerrit.wikimedia.org/r/527072