source-map-loader

5.0.0 verified Sat Apr 25 auth: no javascript

Webpack loader that extracts inline and linked source maps from JavaScript files, including from node_modules, so webpack can process them for the generated bundle. Current stable version is 5.0.0 (2024-01-15), with major releases roughly yearly. Key differentiator: it ensures source map continuity across third-party libraries, preventing misinterpretation by browsers. Requires webpack 5+ and Node.js 18.12+ as of v5. Supports a filterSourceMappingUrl option to control per-file behavior.

Common errors

error Failed to parse source map from '...' Error: ENOENT: no such file or directory, open '...' ↓

cause Linked source map URL points to a file that does not exist

fix

Ensure the source map file exists or use filterSourceMappingUrl to skip/remove the URL

error WARNING in ./node_modules/... Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from '...' Error: data:... ↓

cause Inline source map is malformed or uses unsupported encoding

fix

Update the library providing the source map or ignore warnings via ignoreWarnings config

error Error: Cannot find module 'source-map-js' ↓

cause Missing internal dependency (should be included but might be missing if manually installed incorrectly)

fix

Reinstall source-map-loader: npm install source-map-loader --save-dev

Warnings

breaking Minimum Node.js version bumped to 18.12.0 in v5.0.0 ↓

fix Upgrade Node.js to >=18.12.0

breaking Minimum Node.js version bumped to 14.15.0 in v4.0.0 ↓

fix Upgrade Node.js to >=14.15.0

breaking Minimum webpack version bumped to 5 in v2.0.0 ↓

fix Upgrade webpack to >=5

gotcha Source maps from node_modules are processed by default; can slow builds ↓

fix Use exclude: /node_modules/ in rule to avoid processing third-party maps if not needed

deprecated The `source-map-js` package replaced `source-map` in v2.0.1 for performance ↓

fix No action needed; it's internal

Install

npm install source-map-loader

yarn add source-map-loader

pnpm add source-map-loader

Imports

source-map-loader (default)

module.exports = { module: { rules: [{ test: /\.js$/, enforce: 'pre', use: ['source-map-loader'] }] } }

Used as a webpack loader in config, not imported in application code.

require('source-map-loader')

wrong

import sourceMapLoader from 'source-map-loader'; // used in config, not runtime

correct

const sourceMapLoader = require('source-map-loader'); // not typical

Loader is referenced by name string in webpack config, not imported directly.

filterSourceMappingUrl option
```
options: { filterSourceMappingUrl: (url, resourcePath) => { ... } }
```
Function option for per-file source map URL handling.

Quickstart

Configures source-map-loader to process all JavaScript files before other loaders, extracting source maps. Includes ignoring parse warnings typical for third-party libraries.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: 'pre',
        use: ['source-map-loader'],
      },
    ],
  },
  ignoreWarnings: [/Failed to parse source map/],
};

// Then run webpack
> npx webpack --mode development