Mismatched anonymous define() module because of #57

[Thinkscape]

57 introduced a bug, where there's a race condition between page loading and define() call.

(function(factory) {
    if (typeof define === 'function' && define['amd']) {
        // https://github.com/devote/HTML5-History-API/issues/57#issuecomment-43133600
        define(typeof document !== "object" || document.readyState !== "loading" ? [] : "html5-history-api", factory);
    } else {
        factory();
    }
})

With require.js optimized script it should alway works, however the above relies on document.readyState !== "loading" which means, that depending on how the page is loaded it will often fail with Uncaught Error: Mismatched anonymous define() module

[devote]

Hi, I understand your problem. I will think how to solve it. Thank you!

[devote]

fixed

[vntw]

Hi @devote, sorry if this came up already, but one question - why don´t you use this code to register the module? It´s working for me (and other libraries) without any problems.

(function (factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define([], factory);
  } else {
    // Browser globals
    factory();
  }
}

[devote]

it's working for me too. But there are some people who use the tag script. Despite the fact that they use requirejs. Such an approach would lead to the mentioned error.

for example:

<script src="require.js"></script>
<script src="history.js"></script>

console log:

Uncaught Error: Mismatched anonymous define() module: ...

But if you change the boot priority:

<script src="history.js"></script>
<script src="require.js"></script>

Console is empty. That's ok!

[Thinkscape]

Thx

[Thinkscape]

ps: that's oversimplification of the problem. In my case it surfaced with on-demand loaded stuff.

Basically, I have a modular app (that's built on AMD), a compiled JS payload can be loaded on-demand on given page ... an r.js compiled app starts with requirejs lib (in my case because I want it to be independent), and then is followed by the actual modules in require([...], function(){}) wraps. The module (payload) might be loaded at any given time during the lifetime of the app/page, so it must never rely on document.readyState (which itself is very quirky)

[devote]

so it must never rely on document.readyState (which itself is very quirky)

I have already rejected this solution, the latest version contains another solution

[Thinkscape]

Could you please tag it ?

[devote]

I'm sorry, one moment!

[devote]

https://github.com/devote/HTML5-History-API/tree/v4.2.1

[Thinkscape]

thx