Skip to main content

Module Resolution

NPM Modules​

Bare Module Imports​

In LiveCodes you can use node-style bare module imports for npm modules like you do in your local development. However, there are no installation or build steps required.

e.g. consider the following code:

import { v4 } from 'uuid';

document.body.innerHTML = v4();

If you run it directly in the browser, you get this error:

Uncaught TypeError: Failed to resolve module specifier "uuid". Relative references must start with either "/", "./", or "../".

However, in LiveCodes, bare module imports are transformed to full URLs that are imported from CDN (by default: jspm.dev) which provides ESM versions of NPM packages.

import { v4 } from 'uuid';
becomes
import { v4 } from 'https://jspm.dev/uuid';

This is made possible by using import maps.

Demo:

 

You can import React like that:

import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

Demo:

It just works without a build step and without you having to worry about. And when you export your project to another service (e.g. CodePen) or as HTML, the full URL imports are used, so your code continues to work.

tip

It is recommended to use this method for dependencies over using external scripts. The dependencies are explicitly stated in the code. And if you move to a local development environment, your bundler will take care of importing them and doing other optimizations like tree-shaking.

CommonJS Modules​

CommonJS module requires are also supported (they are converted to ESM imports).

So this also works (although not recommended - use ESM imports instead):

const { v4 } = require('uuid');

document.body.innerHTML = v4();

Exercise:

Copy the previous code snippet and paste it in the playground below. Check the generated code in the compiled code viewer.

info

Script code that contains import, export or require gets served in a script tag with type="module".

NPM packages can be searched and added as script tags from the External Resources screen.

Deno Modules​

Modules imported from deno.land/x (or any other URL ending in .ts, .jsx or .tsx) are automatically transpiled (ts -> js) and bundled by bundlejs (using esbuild), including their relative imports. The project on LiveCodes that imports these modules does not need to be using TypeScript.

Example:

import { uuid } from 'https://deno.land/x/uuid/mod.ts';

document.body.innerHTML = uuid();

Open in LiveCodes

GitHub/GitLab/Bitbucket​

Modules can also be similarly imported from GitHub, Gitlab or Bitbucket. Also these imports are transpiled and bundled (see Deno Modules).

import { flatten } from 'https://github.com/remeda/remeda/blob/master/src/flatten.ts';

console.log(flatten([[1, 2], [3], [4, 5]])); // -> [1, 2, 3, 4, 5]

Open in LiveCodes

tip

If you do not want the import URL to be bundled (e.g. in Deno or GitHub imports), add #nobundle to the end of URL.

Example:

import { flatten } from 'https://github.com/remeda/remeda/blob/master/src/flatten.ts#nobundle';

If you want to bundle (and transpile) any import URL, prefix it with bundle: (see below).

CDN Providers​

By default, npm modules are imported from jspm.dev. You may choose another provider by using a CDN prefix. These are examples of importing the library uuid:

uuid → https://jspm.dev/uuid (info)

jspm:uuid → https://jspm.dev/uuid (info)

skypack:uuid → https://cdn.skypack.dev/uuid (info)

esm.sh:uuid → https://esm.sh/uuid (info)

jsdelivr:uuid → https://cdn.jsdelivr.net/npm/uuid (info)

esm.run:uuid → https://esm.run/uuid (info)

unpkg:uuid → https://unpkg.com/uuid?module (info)

esbuild:uuid → https://esbuild.vercel.app/uuid (info)

bundlejs:uuid → https://deno.bundlejs.com/?file&q=uuid (info)

bundle:uuid → https://deno.bundlejs.com/?file&q=uuid (info)

deno:uuid → https://deno.bundlejs.com/?file&q=https://deno.land/x/uuid/mod.ts (info)

npm:uuid → https://jspm.dev/uuid (info)

node:uuid → https://jspm.dev/uuid (info)

Example:

import React, { useState } from 'esm.sh:react';
import { createRoot } from 'esm.sh:react-dom/client';
caution

Please note that importing the same module (even for dependencies) from different CDNs may cause conflicts.

Example:

// this will NOT work!
import React, { useState } from 'esm.sh:react'; // React from esm.sh
import { createRoot } from 'react-dom/client'; // React from jspm.dev

Package Version​

Most CDN providers allow specifying package version using the format:
{pkgName}@{version}/{path}.

Example:

import latest from 'lodash';
import v3 from 'lodash@3';

console.log(latest.VERSION); // -> 4.17.21
console.log(v3.VERSION); // -> 3.10.1
Sponsors