{"id":20575,"library":"string-replace-loader","title":"string-replace-loader","description":"A Webpack loader that performs string or regex replacements on file contents during the build process. Version 3.3.0 is the latest stable release, with occasional minor/patch updates. It supports plain string replacement, RegExp replacement (via string with flags or RegExp object), multiple replacements in a single rule, callback-based dynamic replacement, and strict mode. Key differentiators: flexible configuration similar to String.prototype.replace, array of replacements, strict mode to ensure replacements occurred. Compared to alternatives like `replace-in-file-webpack-plugin` or `webpack-replace-loader`, this loader integrates directly into the loader chain and works per-file based on test patterns. Requires Webpack 5+ and Node.js 4+.","status":"active","version":"3.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/Va1/string-replace-loader","tags":["javascript","webpack","loader","webpack-loader","replace","string-replace","regex-replace"],"install":[{"cmd":"npm install string-replace-loader","lang":"bash","label":"npm"},{"cmd":"yarn add string-replace-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add string-replace-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; loader is designed for Webpack 5+","package":"webpack","optional":false}],"imports":[{"note":"This is a Webpack loader, not a regular library. It is referenced by the 'loader' field in Webpack config rules. No import statement needed; just configure in webpack.config.js.","wrong":"import stringReplaceLoader from 'string-replace-loader'","symbol":"string-replace-loader","correct":"module.exports = { module: { rules: [ { test: /\\.js$/, loader: 'string-replace-loader', options: { search: 'foo', replace: 'bar' } } ] } }"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        loader: 'string-replace-loader',\n        options: {\n          search: 'jQuery',\n          replace: 'window.$'\n        }\n      }\n    ]\n  }\n};","lang":"javascript","description":"Demonstrates basic replacement of 'jQuery' with 'window.$' in all .js files."},"warnings":[{"fix":"Upgrade to Webpack 5 or use string-replace-loader@2.3.0 for Webpack 4 support.","message":"Version 3.0.0 drops support for Webpack 4 and lower. Using with Webpack 4 will cause errors.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Upgrade Node.js to v4+ or use version 1.3.0.","message":"Version 2.0.0 drops support for Node.js 3 and lower. Older Node versions will fail to load the loader.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Set options.flags = 'g' or provide a RegExp with global flag.","message":"The loader uses String.prototype.replace internally; for global replacements, you must use a regex with the 'g' flag. Missing 'g' flag replaces only first occurrence.","severity":"deprecated","affected_versions":"all"},{"fix":"Either use a RegExp object or escape special characters like '\\\\$' for '$'.","message":"When using options.search as a string and options.flags, special regex characters in the search string must be escaped. If you intend a literal string, use the plain replacement method without flags.","severity":"gotcha","affected_versions":"all"},{"fix":"Order your replacements carefully or use separate rules.","message":"The multiple replacements option processes replacements in parallel? No, they are applied sequentially. This can cause unexpected results if later replacements match strings introduced by earlier ones.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure the loader is applied only to files that should be replaced, using a specific test pattern. Also ensure your rules are not overlapping incorrectly.","cause":"The string-replace-loader is misconfigured or not matching the correct file type, causing Webpack to attempt parsing the output as JavaScript.","error":"Module parse failed: Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type."},{"fix":"Add a 'search' option to your loader configuration: options: { search: 'string', replace: 'newString' }","cause":"When not using 'multiple' replacements, both 'search' and 'replace' are required. This error occurs if 'search' is missing.","error":"Error: The 'search' option is not defined, but 'replace' option is provided."},{"fix":"Disable strict mode or ensure the search pattern exists in the matched files.","cause":"Strict mode is enabled (options.strict: true) but the search pattern was not found in the file content.","error":"Error: Nothing replaced. Enable strict mode to throw on unreplaced content."},{"fix":"Use string-replace-loader@2.3.0 for Webpack 4 or upgrade to Webpack 5.","cause":"Using an incompatible version of Webpack (e.g., Webpack 4 with loader version 3.x).","error":"TypeError: loaderContext.getOptions is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}