How to use pipe from lodash/fp in HTML?

December 13, 2021

I downloaded lodash.js from lodash official documentation but _.pipe() is throwing an error in my console.How to resolve this issue

let input = "    JavaScript     ";

const trim = (str) => str.trim();
const toLowerCase = (str) => str.toLowerCase();
const wrapInDiv = (str) => `<div>${str}</div>`;

const transform = _.pipe(trim, toLowerCase, wrapInDiv);

console.log(transform(input));

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

>Solution :

Use the CDN

I can’t see /fp directory when I included lodash.js in HTML.

But adding CDN solved the issue.

You have two options to do this.

1.Follow the official documentation in which you need to select the functions that you need (in this case pipe) and lodash.min.js and add this script tag above the existing script tag.

<script src="https://cdn.jsdelivr.net/combine/npm/lodash@4/fp/pipe.min.js,npm/lodash@4"></script>

2.Else Add the complete lodash/fp module and lodash

<script     
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
      integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"></script>
 <script
      src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.fp.min.js"
      integrity="sha512-PQPary7Ah0W8wFgizjGNg0jWpVUKLAxUCvdTNS4lpQFUtoeg5cmSaI8cJK3zh5TDgHDMMHo3tG3ZcLideDlRuQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

Lodash CDN Reference