{"id":20132,"library":"imports-loader","title":"imports-loader","description":"A webpack loader that automatically injects import/require statements for global variables into modules, enabling third-party code that depends on globals like $ or this to work with webpack's module system. Current stable version is 5.0.0 (January 2024), released under the webpack-contrib organization. It supports inline query syntax and webpack config rules, offering fine-grained control over import type (ESM, CommonJS), variable names, and module aliases. Key differentiators: explicit control over shimming via loader query parameters, support for named and default imports, and ability to wrap code in an IIFE with custom arguments. Requires webpack 5 and Node 18.12+. Releases follow semver with major bumps for Node and webpack version requirements.","status":"active","version":"5.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/webpack-contrib/imports-loader","tags":["javascript","webpack"],"install":[{"cmd":"npm install imports-loader","lang":"bash","label":"npm"},{"cmd":"yarn add imports-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add imports-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for loading modules in webpack bundling process","package":"webpack","optional":false}],"imports":[{"note":"Loader is used in webpack configuration or inline import syntax, not imported directly in application code.","wrong":"Using require('imports-loader') directly in code instead of webpack config","symbol":"default (loader in webpack config or inline)","correct":"module.exports = { module: { rules: [ { test: /example\\.js$/, use: [{ loader: 'imports-loader', options: { imports: ['default jquery $'] } }] } ] } }"},{"note":"Inline syntax changed in v2.0.0: use comma separation instead of multiple [] parameters. The `|` delimiter is used between syntax, moduleName, name, and alias.","wrong":"Using older inline syntax with [] brackets (e.g., imports[]=default|jquery|$&imports[]=angular)","symbol":"imports-loader with type commonjs and wrapper","correct":"const myLib = require(`imports-loader?type=commonjs&imports=single|jquery|$&wrapper=window!./example.js`);"},{"note":"Use 'named' syntax for named exports from a module, 'default' for default exports, 'single' for entire module as a variable.","wrong":"Using default import syntax for named exports (e.g., imports=default|library|myMethod) would try to import default instead of named export.","symbol":"named import via loader","correct":"import myLib from 'imports-loader?imports=named|library|myMethod,angular!./example.js';"},{"note":"Spaces must be encoded as %20 in inline syntax. Alternatively, use webpack config options object for readability.","wrong":"Using newline characters or unescaped spaces in inline query string","symbol":"additionalCode option","correct":"import myLib from 'imports-loader?additionalCode=var%20myVariable%20=%20false;!./example.js';"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: require.resolve('example.js'),\n        use: [\n          {\n            loader: 'imports-loader',\n            options: {\n              imports: [\n                'default jquery $',\n                'default angular angular',\n                'named lodash map'\n              ],\n              type: 'module' // default is ESM\n            }\n          }\n        ]\n      }\n    ]\n  }\n};\n// example.js\n// Original code using global $:\n$('button').click(function() { console.log('clicked'); });\n// After loader processes, the file effectively starts with:\n// import $ from 'jquery';\n// import angular from 'angular';\n// import { map } from 'lodash';","lang":"javascript","description":"Shows webpack config using imports-loader to inject jquery, angular, and lodash/map into a module, demonstrating default and named imports."},"warnings":[{"fix":"Upgrade Node.js to 18.12.0 or higher.","message":"Minimum supported Node.js version is 18.12.0","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Use webpack 5. If using webpack 4, use imports-loader v1.","message":"Minimum supported webpack version is 5","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Replace `imports[]=default|jquery|$&imports[]=angular` with `imports=default|jquery|$,angular`.","message":"Inline syntax changed: [] is no longer supported for multiple imports; use comma separator","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure injected imports do not duplicate existing imports. Consider using 'additionalCode' or 'wrapper' to handle conflicts.","message":"Existing import/require statements in the original code may conflict with injected imports","severity":"gotcha","affected_versions":"all"},{"fix":"Use `type: 'commonjs'` in options if your target module uses CommonJS require.","message":"By default, loader generates ES module named syntax (import). For CommonJS, set type: 'commonjs'","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Set options.type to 'commonjs' in loader config, or ensure webpack is configured for ES modules.","cause":"Loader generates ESM imports but webpack configuration expects CommonJS or target doesn't support ES modules.","error":"Module parse failed: The keyword 'import' is reserved"},{"fix":"Ensure inline syntax follows pattern: `imports-loader?imports=syntax|module|name,nextSyntax|module|name!./file.js`","cause":"Using pipe character '|' incorrectly in Inline loader query string, or forgetting to escape spaces.","error":"SyntaxError: Unexpected token '|'"},{"fix":"Run `npm install imports-loader --save-dev`","cause":"imports-loader not installed or missing in devDependencies.","error":"Error: Cannot find module 'imports-loader'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}