CODEWITHSUNDEEP
javascriptunderscore.jslodash
Floriane
Floriane

Reputation: 315

Conflict libraries lodash.js and underscore.js

My project uses the lodash.js library. Off I need to add my project to another project that uses the underscore.js library. This puts me in conflict errors between these two libraries.

I tried writing this, but it does not change anything:

<script src="/web/externals/underscore/underscore.js"></script>
<script src="/web/externals/lodash/lodash.js"></script>

<script>
    window.lodash = _.noConflict();
    window.underscore = _.noConflict();
</script>

<app-root></app-root>
<script type="text/javascript" src="/etc/inline.bundle.js"></script>
<script type="text/javascript" src="/etc/polyfills.bundle.js"></script>

//////////EDIT////////

<script src="/web/externals/underscore/underscore.js"></script>
<script src="/web/externals/lodash/lodash.js"></script>

<script>
    var lodash = _.noConflict()
</script>

<app-root></app-root>
<script type="text/javascript" src="/etc/chat/inline.bundle.js"></script>
<script type="text/javascript" src="/etc/chat/polyfills.bundle.js"></script>

Upvotes: 2

Views: 2582

Answers (2)

Retsam
Retsam

Reputation: 33399

To use noConflicts in this case, you need to import one library, use _.noConflicts, then import the other. For example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<script>
    window.lodash = _.noConflict();
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script>
    window.underscore = _.noConflict()
</script>
  

<script>
    console.log("Lodash version is " + lodash.VERSION)
    console.log("Underscore version is " + underscore.VERSION) 
</script>

FWIW, though, it might be worth looking into bundling your apps with something like webpack. That would allow each to have its own version of dependencies, without needing to fight over the global scope.

Upvotes: 1

Robbie Milejczak
Robbie Milejczak

Reputation: 5770

You only need to call noConflict once, and you don't need to alter the window object either (though you can it is completely unnecessary). Copy the below code, put it in an HTML file, load it in your favorite browser and check the console. You will see it works without any conflicts

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script>
    var __ = _.noConflict();
</script>

<script src="http://underscorejs.org/underscore-min.js"></script>
<script>
  var string = 'test';
  var array = ['1', '2', '3'];

  //starts with is a lodash function
  console.log(__.startsWith(string, 't'));

  //shuffle is an underscore function
  console.log(_.shuffle(array));
</script>

You can name the lodash variable whatever you want, and keep underscore as _

If you'd rather keep lodash as _ and rename underscore just swap the load order of the 2 scripts

 <script src="http://underscorejs.org/underscore-min.js"></script>
<script>
    var __ = _.noConflict();
</script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script>
  var string = 'test';
  var array = ['1', '2', '3'];

  console.log(_.startsWith(string, 't'));
  console.log(__.shuffle(array));
</script>

If this doesn't work for you then there is something else wrong and you need to post more code.

Upvotes: 0

Related Questions