{"id":20019,"library":"expose-loader","title":"expose-loader","description":"A webpack loader that exposes a module (in whole or in part) to the global object (window/global/self). Current stable version is 5.0.1, with regular maintenance releases. It is part of the webpack-contrib org and the recommended shimming solution for exposing third-party libraries to global scope. Key differentiators: supports granular exposure of specific exports, multiple global names, and override control. Alternative approaches like ProvidePlugin only add variables to modules, while this loader actually attaches to the global object for browser compatibility.","status":"active","version":"5.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/webpack-contrib/expose-loader","tags":["javascript","webpack"],"install":[{"cmd":"npm install expose-loader","lang":"bash","label":"npm"},{"cmd":"yarn add expose-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add expose-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: webpack ^5.0.0 required for loader usage","package":"webpack","optional":false}],"imports":[{"note":"Inline syntax is ESM-import based; CommonJS require may not work as expected because the loader returns the exposed module.","wrong":"require(\"expose-loader?exposes=$,jQuery!jquery\")","symbol":"expose-loader","correct":"import $ from \"expose-loader?exposes=$,jQuery!jquery\""},{"note":"Use require.resolve to target a specific module path; avoid generic regex tests like /node_modules/.","wrong":"Using 'expose-loader' without require.resolve or with incorrect test pattern","symbol":"Loader usage in webpack config","correct":"module.exports = { module: { rules: [ { test: require.resolve('jquery'), loader: 'expose-loader', options: { exposes: ['$', 'jQuery'] } } ] } }"},{"note":"The | syntax separates globalName and moduleLocalName. Use named import for specific exports.","wrong":"import * as underscore from \"expose-loader?exposes=_.map!underscore\"","symbol":"exposes option with moduleLocalName","correct":"import { map } from \"expose-loader?exposes=_.map|map!underscore\""}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  module: {\n    rules: [\n      {\n        test: require.resolve('jquery'),\n        loader: 'expose-loader',\n        options: {\n          exposes: ['$', 'jQuery'],\n        },\n      },\n    ],\n  },\n};\n\n// src/index.js\nimport $ from 'jquery';\n// Now $ and jQuery are globally available\nconsole.log(window.$); // jQuery function","lang":"javascript","description":"Configure expose-loader in webpack config to expose jQuery as $ and jQuery globally, then import jquery in entry point."},"warnings":[{"fix":"Update inline query to use comma-separated values: `exposes=$,jQuery`","message":"Inline syntax changed in v2.0.0: `[]` is no longer supported, use `,` comma separator (e.g., `?exposes=$,jQuery` instead of `?exposes[]=$&exposes[]=jQuery`).","severity":"breaking","affected_versions":"^2.0.0"},{"fix":"Upgrade Node.js to >=18.12.0 or pin expose-loader to v4.x.","message":"Minimum supported Node.js version is 18.12.0 as of v5.0.0.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Use webpack 5 or later; if on webpack 4, use expose-loader@1.","message":"Minimum supported webpack version is 5 as of v2.0.0.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Use %20 for spaces in URLs: e.g., `exposes=_.map|map` (no spaces) vs `exposes=_.reduce|reduce` (no spaces).","message":"Spaces in inline syntax must be encoded as %20, not actual spaces.","severity":"gotcha","affected_versions":"*"},{"fix":"Use `test: require.resolve('module-name')` to precisely match the module path.","message":"The loader must be used with require.resolve in webpack config to target the exact module; otherwise, it may expose the wrong module.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install --save-dev expose-loader`.","cause":"expose-loader not installed as devDependency.","error":"Module not found: Error: Can't resolve 'expose-loader'"},{"fix":"Ensure webpack config has a rule with `test: require.resolve('your-module')` and `loader: 'expose-loader'`.","cause":"Webpack rule for expose-loader is not matching the import or the loader config is missing.","error":"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."},{"fix":"Check the `exposes` option: it should be a string, object, or array of those, not a number or boolean.","cause":"Options passed to expose-loader have an invalid structure, e.g., wrong type for `exposes`.","error":"Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}