DEV Community

Cover image for 3 ways to import node modules in deno
Siddharth
Siddharth

Posted on

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');
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (9)

Collapse
 
yendenikhil profile image
Nik

Good one.

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

Collapse
 
canrau profile image
Can Rau • Edited

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

Collapse
 
siddharthshyniben profile image
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!

Thread Thread
 
canrau profile image
Can Rau • Edited

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 🤓

Thread Thread
 
siddharthshyniben profile image
Siddharth

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

Collapse
 
siddharthshyniben profile image
Siddharth

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

Collapse
 
michaelcurrin profile image
Michael Currin • Edited

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>
Enter fullscreen mode Exit fullscreen mode

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

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

Collapse
 
michaelcurrin profile image
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.

Collapse
 
michaelcurrin profile image
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...