new-url-loader

0.1.1 verified Sat Apr 25 auth: no javascript

A tiny alternative to url-loader and file-loader for webpack 5, replacing deprecated loaders with asset modules. Current stable version is 0.1.1. The package is actively maintained with a simple API that delegates to webpack 5's built-in asset modules, providing backward compatibility for setups that still require a loader pipeline (e.g., @svgr/webpack). Unlike url-loader/file-loader, it uses webpack 5's native asset handling and has zero runtime dependencies beyond webpack 5 itself. Supports data URI inlining and separate file emission via asset type configuration.

Common errors

error Module not found: Error: Can't resolve 'new-url-loader' ↓

cause The loader package is not installed or is not in node_modules.

fix

Run npm install new-url-loader --save-dev

error TypeError: The 'compilation' argument must be an instance of Compilation ↓

cause Using loader with webpack version < 5.

fix

Upgrade to webpack 5 or use url-loader/file-loader instead.

Warnings

gotcha The loader must be used with webpack 5 asset modules; it does not work with webpack 4. ↓

fix Upgrade to webpack 5 and configure asset modules.

gotcha When using with @svgr/webpack, you must exclude URL dependencies to avoid double-processing. ↓

fix Add `dependency: { not: ['url'] }` to the loader rule as shown in the documentation.

breaking Version 0.1.1 changed export to use toString() for string output instead of URL object. If you relied on the URL object type, this will break. ↓

fix Update to 0.1.1 and expect string values instead of URL objects.

Install

npm install new-url-loader

yarn add new-url-loader

pnpm add new-url-loader

Imports

new-url-loader
wrong
```
const NewUrlLoader = require('new-url-loader')
```
correct
```
import NewUrlLoader from 'new-url-loader'
```
The loader is used in webpack config, not directly imported in application code. However, if using ESM in webpack config, use import; CommonJS require also works.

Quickstart

Shows how to replace url-loader with new-url-loader for SVG files processed by @svgr/webpack, using webpack 5 asset modules.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        oneOf: [
          {
            dependency: { not: ['url'] },
            use: ['@svgr/webpack', 'new-url-loader'],
          },
          {
            type: 'asset',
          },
        ],
      },
    ],
  },
};