Conflict with requirejs about js-sha256 HOT 11 CLOSED

Hello @irwansetiawan,

If you click the first link in the error message you will see the reasons as to why the error may occur.

Let's first take a look at the very first sentence in the RequireJS documentation for this error:

If you manually code a script tag in HTML to load a script with an anonymous define() call, this error can occur.

This means that if you include a <script src="..."></script> tag in your code that loads a Javascript file with a call to define() that is providing a name for the module, a common thing to do in RequireJS projects, then this error may be thrown.

js-sha256 does have a call to define an anonymous module, but if we take a look at the suggestions in the documentation on how to avoid this error:

Be sure to load all scripts that call define() via the RequireJS API. Do not manually code script tags in HTML to load scripts that have define() calls in them.

You will then understand that it is not really a fault in js-sha256. I would suggest that you take a look at exactly how you load the file, and see if you can load it using the RequireJS API, rather than using a script tag.

For more information on using the RequireJS API for loading files in the browser, take a look here: http://requirejs.org/docs/api.html#jsfiles

from js-sha256.

thanks for @hakash 's explain. The correct way to use RequireJS should look like this:

require(['path/to/sha256.js'], function (sha256) {
  sha256('...');
});

from js-sha256.

Hi @hakash and @emn178, thanks for your explanations, pretty clear to me, and it makes sense. The above fixes it: https://irwansetiawan.github.io/gs_plus/sha256_requirejs_conflict_resolved.html

However, I think I am not giving the right example. Apologies.

In my scenario, I do not want (and I can't have) sha256 loaded using requirejs.

1. I have a Chrome plugin that needs to add sha256 library from the Content Script context (of the Chrome plugin) into the DOM context. The only way to add it is to create script tag.

function addScript(relative_url) {
	var s = document.createElement('script');
	s.src = chrome.extension.getURL(relative_url);
	(document.head || document.documentElement).appendChild(s);
	s.onload = function() { this.remove(); };
}
addScript('sha256.min.js');

2. On the DOM context (a site that I do not control), there is requirejs loaded. In this context I will need to execute some script that depends on sha256 library.

In short, I am adding sha256 from a Chrome plugin, into any site (that could contain requirejs).

A couple of thoughts:

• Does the define used in sha256 refers to the requirejs's define? If not, can we rename it?
• Can both sha256 and requirejs co-exists without creating dependencies?

from js-sha256.

@irwansetiawan @emn178 Well, I'm not familiar enough with the source code to be sure it won't have any side effects, but giving the anonymously defined module an ID should resolve the issue, right?

from js-sha256.

Try to detect if RequireJS exists

function addScript(relative_url) {
  if (typeof define === 'function' && define.amd) {
    require([chrome.extension.getURL(relative_url)]);
  } else {
    var s = document.createElement('script');
    s.src = chrome.extension.getURL(relative_url);
    (document.head || document.documentElement).appendChild(s);
    s.onload = function() { this.remove(); };
  }
}

from js-sha256.

@emn178 unfortunately by detecting if RequireJS exists and use require() would not add the library into the DOM context.
@hakash you're a legend, yes adding module name should fix the compatibility issue, and I tested it here: https://irwansetiawan.github.io/gs_plus/sha256_requirejs_modulename.html

Thank you @emn178 and @hakash!!

from js-sha256.

from js-sha256.

Yes, I have tried with the unmerged file on my previous example, and it works:
https://irwansetiawan.github.io/gs_plus/sha256_requirejs_modulename.html

Thanks @hakash !

from js-sha256.

@irwansetiawan You are most welcome! I'm just glad I could help.

from js-sha256.

The difference between defined and undefined module ID:

defined
you have to add script tag first and then require(moduleID), eg.

<script src="path/sha256.js"></script>

require(['sha256'], function (sha256) {
  // ...
});

undefined
you can require(path), eg.

require(['path/sha256.js'], function (sha256) {
  // ...
});

or

configure RequireJS and require by your config, eg.

```JavaScript
requirejs.config({
  paths: {
    sha256: 'path/sha256'
  }
});
require(['sha256'], function (sha256) {
  // ...
});

To prevent naming conflict and flexible, it usual not to define a module ID, so I can't merge this PR.

from js-sha256.

@emn178 Cool! Thanks for the explanation, I do see your dilemma if its behaviour changes that much.

from js-sha256.