Error: Mismatched anonymous define() module thrown by RequireJS #31

MariuszJurowicz · 2017-10-24T08:26:06Z

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

The text was updated successfully, but these errors were encountered:

ntkme · 2017-10-25T06:19:37Z

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 · 2017-10-25T06:31:01Z

<!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 · 2017-10-25T06:31:29Z

@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 · 2017-10-25T06:34:58Z

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

ntkme · 2017-10-25T08:22:30Z

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.

MariuszJurowicz changed the title ~~Error: Mismatched anonymous define() module when used with RequireJS~~ Error: Mismatched anonymous define() module thrown by RequireJS Oct 24, 2017

MariuszJurowicz mentioned this issue Oct 24, 2017

add BeakerX tables to widget demos jupyter/jupyter.github.io#239

Merged

ntkme closed this as completed Oct 25, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error: Mismatched anonymous define() module thrown by RequireJS #31

Error: Mismatched anonymous define() module thrown by RequireJS #31

MariuszJurowicz commented Oct 24, 2017

ntkme commented Oct 25, 2017 •

edited

Loading

MariuszJurowicz commented Oct 25, 2017 •

edited

Loading

ntkme commented Oct 25, 2017

MariuszJurowicz commented Oct 25, 2017

ntkme commented Oct 25, 2017 •

edited

Loading

Error: Mismatched anonymous define() module thrown by RequireJS #31

Error: Mismatched anonymous define() module thrown by RequireJS #31

Comments

MariuszJurowicz commented Oct 24, 2017

ntkme commented Oct 25, 2017 • edited Loading

MariuszJurowicz commented Oct 25, 2017 • edited Loading

ntkme commented Oct 25, 2017

MariuszJurowicz commented Oct 25, 2017

ntkme commented Oct 25, 2017 • edited Loading

ntkme commented Oct 25, 2017 •

edited

Loading

MariuszJurowicz commented Oct 25, 2017 •

edited

Loading

ntkme commented Oct 25, 2017 •

edited

Loading