Nodejs Loaders

This package provides a variety of loaders to facilitate quick and easy local development and CI testing.

Warning

These should NOT be used in production; they will likely not do what you need there anyway.

Usage

The following JustWorks¹:

You can register an individual nodejs-loader via --import like:

$ node --import=@nodejs-loaders/tsx ./main.tsx

Or register multiple nodejs-loaders via multiple --imports like:

$ node \
  --import=@nodejs-loaders/tsx \
  --import=@nodejs-loaders/css-module \
  --import=@nodejs-loaders/media \
  ./main.tsx

But that can quickly clutter the CLI. Instead, you may want to create your own register.mts like so:

$ node --import ./register.mts ./main.tsx

import { register } from 'node:module';

register('@nodejs-loaders/tsx', import.meta.url);
register('@nodejs-loaders/css-module', import.meta.url);
register('@nodejs-loaders/media', import.meta.url);

import { ProfileAvatar } from './ProfileAvatar.tsx';
import * as classes from './ProfileAvatar.module.css';
import defaultProfileAvatar from './default.png';

console.log(
  <ProfileAvatar
    className={classes.AdminUser}
    src={defaultProfileAvatar}
  />
);

¹ Prior to node 23.6.0, a flag is needed to support TypeScript in register.mts (otherwise, it can be register.mjs instead).

Usage with module.registerHooks

Some nodejs-loaders are compatible with the sync version of customization hooks. In order to avoid the loader automatically registering itself via the async API (which it does when imported via its main entrypoint), you must import it via the direct path:

import module from 'node:module';

import * as aliasLoader from '@nodejs-loaders/alias/alias.loader.mjs';
 // ⚠️ Do NOT import via `main`, like '@nodejs-loaders/alias'

module.registerHooks(aliasLoader);

Available loaders

• Alias
• CSS Modules
• deno 'npm:' prefix
• JSON5
• JSONC
• JSX / TSX
• Media
• Mismatched format
• SVGX
• Text
• YAML

Some loaders must be registered in a specific sequence:

1. alias
2. tsx
3. svgx
4. mismatched-format

These don't need a specific registration sequence:

• css-module
• deno-npm-prefix
• JSON5
• JSONC
• media
• text
• YAML

Project-official loaders

These loaders are officially maintained by their respective projects and are recommended (they're the most up-to-date and have the best support).

• Aurelia loader
• MDX loader
• SWC register