https://github.com/nodejs-loaders/nodejs-loaders
This repo provides a variety of loaders to facilitate quick and easy local development and CI testing.
https://github.com/nodejs-loaders/nodejs-loaders
customisation-hooks loader modules nodejs
Last synced: about 2 months ago
JSON representation
This repo provides a variety of loaders to facilitate quick and easy local development and CI testing.
- Host: GitHub
- URL: https://github.com/nodejs-loaders/nodejs-loaders
- Owner: nodejs-loaders
- License: isc
- Created: 2023-11-14T22:17:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-05-27T10:10:44.000Z (about 2 months ago)
- Last Synced: 2026-05-27T10:14:35.116Z (about 2 months ago)
- Topics: customisation-hooks, loader, modules, nodejs
- Language: JavaScript
- Homepage: https://www.npmjs.com/org/nodejs-loaders
- Size: 603 KB
- Stars: 55
- Watchers: 2
- Forks: 7
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Nodejs Loaders
[](https://scorecard.dev/viewer/?uri=github.com/nodejs-loaders/nodejs-loaders)
[](https://www.bestpractices.dev/projects/10004)
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 via `--import` like:
```console
$ node --import=@nodejs-loaders/tsx ./main.tsx
```
Or register multiple via multiple `--import`s like:
```console
$ 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:
```console
$ node --import ./register.mts ./main.tsx
```
```ts
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);
```
```tsx
import { ProfileAvatar } from './ProfileAvatar.tsx';
import * as classes from './ProfileAvatar.module.css';
import defaultProfileAvatar from './default.png';
console.log(
);
```
¹ 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`
Most @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:
```js
import module from 'node:module';
// ⚠️ Do NOT import via `main`, like '@nodejs-loaders/alias'
import * as aliasLoader from '@nodejs-loaders/alias/alias.loader.mjs';
module.registerHooks(aliasLoader);
```
## Available loaders
* [Alias](./packages/alias/)
* [CSS Modules](./packages/css-module/)
* [deno 'npm:' prefix](./packages/deno-npm-prefix/)
* [JSON5](./packages/json5/)
* [JSONC](./packages/jsonc/)
* [JSX / TSX](./packages/tsx/)
* [Media](./packages/media/)
* [Mismatched format](./packages/mismatched-format/)
* [SVGX](./packages/svgx/)
* [Text](./packages/text/)
* [YAML](./packages/yaml/)
Some loaders must be registered in a specific sequence:
1. alias
1. tsx
1. svgx
1. 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](https://github.com/aurelia/loader-nodejs)
* [MDX loader](https://mdxjs.com/packages/node-loader/)
* [SWC register](https://github.com/swc-project/swc-node/tree/master/packages/register#swc-noderegister)