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!
Top comments (9)
Good one.
Don’t forget esm.sh (an esm shiv)
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 TwitterYes, 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!
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 🤓
Ah, that's cool! I should check that out.
Ah I didn't know about that. Thanks for mentioning!
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
That is demonstrated here in my React app that uses no Deno or Node. Just a frontend
github.com/MichaelCurrin/react-fro...
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
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...