{"id":20228,"library":"new-url-loader","title":"new-url-loader","description":"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.","status":"active","version":"0.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/marella/new-url-loader","tags":["javascript","webpack","webpack-loader","url-loader","file-loader"],"install":[{"cmd":"npm install new-url-loader","lang":"bash","label":"npm"},{"cmd":"yarn add new-url-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add new-url-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for loader functionality","package":"webpack","optional":false}],"imports":[{"note":"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.","wrong":"const NewUrlLoader = require('new-url-loader')","symbol":"new-url-loader","correct":"import NewUrlLoader from 'new-url-loader'"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.svg$/,\n        oneOf: [\n          {\n            dependency: { not: ['url'] },\n            use: ['@svgr/webpack', 'new-url-loader'],\n          },\n          {\n            type: 'asset',\n          },\n        ],\n      },\n    ],\n  },\n};","lang":"javascript","description":"Shows how to replace url-loader with new-url-loader for SVG files processed by @svgr/webpack, using webpack 5 asset modules."},"warnings":[{"fix":"Upgrade to webpack 5 and configure asset modules.","message":"The loader must be used with webpack 5 asset modules; it does not work with webpack 4.","severity":"gotcha","affected_versions":"0.0.0 - 0.1.1"},{"fix":"Add `dependency: { not: ['url'] }` to the loader rule as shown in the documentation.","message":"When using with @svgr/webpack, you must exclude URL dependencies to avoid double-processing.","severity":"gotcha","affected_versions":"0.0.0 - 0.1.1"},{"fix":"Update to 0.1.1 and expect string values instead of URL objects.","message":"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.","severity":"breaking","affected_versions":">=0.1.0 <0.1.1"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install new-url-loader --save-dev`","cause":"The loader package is not installed or is not in node_modules.","error":"Module not found: Error: Can't resolve 'new-url-loader'"},{"fix":"Upgrade to webpack 5 or use url-loader/file-loader instead.","cause":"Using loader with webpack version < 5.","error":"TypeError: The 'compilation' argument must be an instance of Compilation"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}