buttons/github-buttons

Error: Mismatched anonymous define() module thrown by RequireJS

MariuszJurowicz opened this issue · 5 comments

MariuszJurowicz commented

When i'm trying to use https://buttons.github.io/buttons.js together with https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.js i'm getting the:

Uncaught Error: Mismatched anonymous define() module: [object Object]
http://requirejs.org/docs/errors.html#mismatch
    at makeError (require.js:168)
    at intakeDefines (require.js:1254)
    at require.js:1452
ntkme commented

Can you provide a reproducible demo for the error? The following code works fine for me:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.js"></script>
</head>
<body>
  <script>
    require(['https://buttons.github.io/buttons.js'], function (GitHubButtons) {
      GitHubButtons.render()
    });
  </script>
</body>
</html>
MariuszJurowicz commented 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.js" crossorigin="anonymous"></script>
    <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
</body>
</html>
ntkme commented

@mjurowicz-xsolve Ok. Now I see what you mean by use buttons.js together with requirejs. If you are using requirejs, please use the code I provided in the previous comment which load buttons.js via requirejs API.

MariuszJurowicz commented

Ok, will use this solution. Maybe it could be added to the README?

ntkme commented

I've updated the README, and following is a more detailed explanation:

The error is caused by loading an anonymous AMD module as a <script>.

Why don't we just make it a named module instead of an anonymous one? Because the same script works as either a vanilla JS or a module, but those two options have different default behavior:

  • When including buttons.js as <script>, it would render all <a class="github-button"> on the page by default.
  • When loading buttons.js as a module, it would do nothing by default.

So, when including buttons.js as a module via <script> tag under require.js, there is a little bit ambiguity going on for which default behavior to take. Making it an anonymous module would force user to explicitly load it as a module via RequireJS API.