3 ways to import node modules in deno

Migrating to Deno can be hard when you depend on Node modules. Until those Node modules get ported to Deno, you can use these three methods to import Node modules in Deno.

Method 1: Using the compatibility layer

There is a Node compatibility layer in Deno standard library, which allows you to require() anything which is in node_modules.

import { createRequire } from 'https://deno.land/std/node/module.ts';

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

const path = require('path');
const cjsModule = require('./my_mod');
const leftPad = require('left-pad');

It was buggy for me as I wasn't able to import every module, and the need to have node_modules is also a downside, which brings me to...

Method 2: Import the source code

If you are lucky, the authors of the library may have the source code using ES6 imports (and doesn't import any node builtins) and you can import the source code directly from the URL (remember, you can import any URLs!)

For example, you could import lodash like so:

import cloneDeep from 'https://raw.githubusercontent.com/lodash/lodash/master/cloneDeep.js';

I got that URL by going to the file on GitHub and then clicking the raw button.

But sometimes, you also need to support all those node builtins. That brings me to...

Method 3: jspm.io

JSPM is a module CDN which allows you to import any node module in the browser, and by extension that means that you can use it to import to deno too!

JSPM is the most reliable method so far, it is used in my Web Framework Sleek too!

So if you want to import the wonderful recast library, you can do this:

import recast from 'https://jspm.dev/recast';

And that's it, you can now use recast!

---

If you found this post helpful, spread the word! or follow me on twitter or over here to stay updated on my blog posts!

Comments

[Nik]

Good one.

Don’t forget esm.sh (an esm shiv)

[Can Rau]

Yes, this 👌 and skypack.dev some modules only work on one not the other for me so if one fails it's worth trying the other one 🤓

Also there's "denoify" and the new --compat flag as mentioned on Twitter

[Siddharth]

Yes, I came over the --compat flag but that's for running apps which are written in Common JS, not for importing modules.

And skypack didn't work for most modules for me, so I didn't include it.

Never heard of denoify though, I have to check it out!

[Can Rau]

Interesting, I mainly switch between esm.sh and skypack.dev usually one of them works.
Never tried jspm so far 👀

Also esm.sh and skypack.dev support Typescript headers for Deno 🤓

[Siddharth]

Ah, that's cool! I should check that out.

[Siddharth]

Ah I didn't know about that. Thanks for mentioning!

[Michael Currin]

I didn't know about the first two approaches.

Yeah third is definitely the best

I use that approach to run a Deno React project using dev.jspm.io for the packages

github.com/MichaelCurrin/react-den...

And that includes a pinned URL for safety.

Additionally, the importing by URL is built into browsers if you do script tag

<script type="module">
  import ReactDOM from "https://dev.jspm.io/react-dom@17.0";
  import React from "https://dev.jspm.io/react@17.0";

  React.useEffect()
</script>

That is demonstrated here in my React app that uses no Deno or Node. Just a frontend

github.com/MichaelCurrin/react-fro...

[Michael Currin]

I learnt now that these are both valid but have different content and purpose.

dev.jspm.io/recast - production

jspm.dev/recast - development and prototyping

The docs explain the difference

jspm.dev provides a modules CDN that does not require import maps, useful for quick prototyping in development, as any module can be loaded directly from the console or in a module script without any other steps being necessary.

[Michael Currin]

I did research on a bunch of CDNs and how to use the esmodule approach for each, so they'll work in Deno

michaelcurrin.github.io/dev-resour...