deno import lodash from deno.land/x

Question

I haven't been able to find the right syntax/URL to import Lodash in a Deno program. I tried this:

import _ from 'https://deno.land/x/[email protected]/lodash.js';

That gives the error "Uncaught SyntaxError: The requested module 'https://deno.land/x/[email protected]/lodash.js' does not provide an export named 'default'".

Then I tried this:

import * as lodash from 'https://deno.land/x/[email protected]/lodash.js';

That seems to give me an empty module object.

I'd like to see an example of accessing any function of Lodash from a Deno program.

Unwilling

medium.com/@tokenchingy/… – Walloon

Really simple solution: github.com/michael-spengler/deno-lodash It does all the boilerplate for you, and adds NO extra code :) Much easier to use with Deno – Oxonian

Answer 1

So after a little experiment, I find two ways to import lodash into deno environment.

1. Treat deno as a plain browser environment

import "https://deno.land/x/[email protected]/dist/lodash.js";

// now `_` is imported in the global variable, which in deno is `self`
const _ = (self as any)._;

console.log(_.chunk([1, 2, 3], 2)); // --> [ [ 1, 2 ], [ 3 ] ]

2. Fake node functionality in deno

In deno std, there is a node module:

This module is meant to have a compatibility layer for the NodeJS standard library.

import { createRequire } from "https://deno.land/[email protected]/node/module.ts";

const require = createRequire(import.meta.url);

// seems require don't known how to import file from web, 
// so you must download it in your local filesystem.
const _ = require("./lodash.js");  

console.log(_.chunk([1, 2, 3], 2)); // --> [ [ 1, 2 ], [ 3 ] ]

Add type info

This is what I found, it is a bit cumbersome.

1. Download types info from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/lodash
2. Edit every import from xxx to xxx.d.ts. For example: in the file common/common.d.ts:

// before
import _ = required("../index");
declare module "../index" {
/* ... */

// after
import _ from "../index.d.ts";
declare module "../index.d.ts" {
/* ... */

3. Now you can import the type info and use it

import type Lodash from "./types/lodash/index.d.ts";

const _: typeof Lodash = (self as any)._;

// now _ is typed

a vscode screenshot to demonstrate type info

---

Here are some snippet in the source file of lodash, which I think related to import.

  // Detect which environment you're currently in:

  /** Detect free variable `global` from Node.js. */
  var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;

  /** Detect free variable `self`. */
  var freeSelf = typeof self == 'object' && self && self.Object === Object && self;

  /** Used as a reference to the global object. */
  var root = freeGlobal || freeSelf || Function('return this')();

  /** Detect free variable `exports`. */
  var freeExports = typeof exports == 'object' && exports && !exports.nodeType && exports;

  /** Detect free variable `module`. */
  var freeModule = freeExports && typeof module == 'object' && module && !module.nodeType && module;

  /** Detect the popular CommonJS extension `module.exports`. */
  var moduleExports = freeModule && freeModule.exports === freeExports;

  /** Detect free variable `process` from Node.js. */
  var freeProcess = moduleExports && freeGlobal.process;

  // ...

  // And how `lodash` exports its functionality:

  // Some AMD build optimizers, like r.js, check for condition patterns like:
  if (typeof define == 'function' && typeof define.amd == 'object' && define.amd) {
    // Expose Lodash on the global object to prevent errors when Lodash is
    // loaded by a script tag in the presence of an AMD loader.
    // See http://requirejs.org/docs/errors.html#mismatch for more details.
    // Use `_.noConflict` to remove Lodash from the global object.
    root._ = _;

    // Define as an anonymous module so, through path mapping, it can be
    // referenced as the "underscore" module.
    define(function() {
      return _;
    });
  }
  // Check for `exports` after `define` in case a build optimizer adds it.
  else if (freeModule) {
    // Export for Node.js.
    (freeModule.exports = _)._ = _;
    // Export for CommonJS support.
    freeExports._ = _;
  }
  else {
    // Export to the global object.
    root._ = _;
  }

  // ...

Carincarina

Answer 2

Use version in es module. More same questions see here. https://mcmap.net/q/77248/-how-to-use-npm-module-in-deno

import _ from 'https://deno.land/x/[email protected]/lodash.js';

console.log(_);

Vickey

With this approach you don't get any types for lodash. Is there a way to add the types from @types/lodash-es? Ideally something simpler than KoalaYT's approach! – Goines

Answer 3

As of Deno 1.28 this is significantly simpler:

// @deno-types="npm:@types/lodash"
import _ from "npm:lodash";

The first line is necessary to pull in the TypeScript types from DefinitelyTyped (@types/lodash). If you omit it, your lodash usage will be unsafe.

You can specify exact versions if you like:

// @deno-types="npm:@types/[email protected]"
import _ from "npm:[email protected]";

Of if you're collecting dependencies in a deps.ts file, something like this will do:

// @deno-types="npm:@types/lodash"
import {default as ld} from "npm:lodash";
export const _ = ld;

Goines