916780 - Uncaught ReferenceError: Localized is not defined

Status: RESOLVED FIXED

(Webmaker Graveyard :: X-Ray Goggles, defect)

Description

[Ali Al Dallal [:alicoding]]

Some of the site prevent the script to load and the console error is: Uncaught ReferenceError: Localized is not defined 

I believe that the site prevent the script to be attached globally and that makes our script not working properly.

Comment 1

[Ali Al Dallal [:alicoding]]

The site that I tried and it doesn't work.

http://www.theguardian.com/uk
http://www.bbc.co.uk/news/

Comment 2

[David Humphrey (:humph)]

The problem here is that these sites use requirejs, and so this section of our Localized.js does the wrong thing:

 if (typeof define === 'function' && define.amd) {
    define(factory);
  }
  // Expose a global instead
  else {
    global.Localized = factory();
  }

In most cases (no requirejs on the page), we'll attach to the global window object.  However, if requirejs is there, we'll define a module, which will get lost when the rest of the webxray code goes looking for it on window.

Somehow we have to force putting this on the global all the time in the webxray case.

Comment 3

[David Humphrey (:humph)]

I can see various hacky ways to solve this, and I'm not sure which way we want to go.

Essentially, we need a trick to force Localized to get added to window in certain cases, and we need to do it without giving localized.js special knowledge of Goggles as such.

Here's one suggestion:

1) Given https://github.com/mozilla/node-webmaker-i18n/blob/master/localized.js#L1-L10, modify it so it looks for some sort of global flag indicating it should force things on the global, for example:

// Global var defined somewhere outside localized.js
var __FORCE_LOCALIZED_ON_GLOBAL = true;
...

// localized.js modified to look for this global
(function(global, factory) {
  // AMD. Register as an anonymous module. Also deal with the case
  // that we've been told to force localized on the global (e.g.,
  // in cases where require.js might exist in a page and we want to
  // ignore it and use the global instead).
  if (typeof define === 'function'    &&
      define.amd                      &&
      !__FORCE_LOCALIZED_ON_GLOBAL) {
    define(factory);
  }
  // Expose a global instead
  else {
    global.Localized = factory();
  }
}(this, function() {

2) Create a new file in Goggles that gets added above https://github.com/mozilla/goggles.webmaker.org/blob/master/webxray/config.json#L6, and looks like this:

(function(global) {
  // Configure localized.js to put Localized on the global and
  // ignore the presence of require.js in pages it gets loaded into.
  this.__FORCE_LOCALIZED_ON_GLOBAL = true;
}(this));

3) Put that new file into the build system (config.js) above localized.js

Pomax, can you see any other way to do this?

Comment 4

[Pomax]

Could we put a property on the factory function itself? Something that allows use to call factory.asGlobal(), which ensures that even if it is require.js loaded, it then also tacks itself onto the global context if it's not already there, returning itself as function apoint. This would allow us to call it as "require("localise")" for most cases, but would allow us to use "require("localise").asGlobal()" in things like webxray.js

Comment 5

[Pomax]

I have no idea how "output" became "apoint", but s/apoint/output/ ...

Comment 6

[Ali Al Dallal [:alicoding]]

Fixed from this bug: https://github.com/mozilla/node-webmaker-i18n/commit/2cdad02df442fbbaf93c4a23e443f513cd30b1e2

Comment 7

[David Humphrey (:humph)]

This won't fix it yet.  We have to chagne Goggles to force `window.__LOCALIZED_IGNORE_REQUIREJS = true;`

Comment 9

[Ali Al Dallal [:alicoding]]

Attachment: https://github.com/mozilla/goggles.webmaker.org/pull/29

Comment 11

[Pomax]

Comment on attachment 809226 [details] [review]
https://github.com/mozilla/goggles.webmaker.org/pull/29

r+

Comment 12

[Ali Al Dallal [:alicoding]]

Landed and fixed.