expose-loader

5.0.1 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Module not found: Error: Can't resolve 'expose-loader' ↓

cause expose-loader not installed as devDependency.

fix

Run npm install --save-dev expose-loader.

error You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. ↓

cause Webpack rule for expose-loader is not matching the import or the loader config is missing.

fix

Ensure webpack config has a rule with test: require.resolve('your-module') and loader: 'expose-loader'.

error Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. ↓

cause Options passed to expose-loader have an invalid structure, e.g., wrong type for `exposes`.

fix

Check the exposes option: it should be a string, object, or array of those, not a number or boolean.

Warnings

breaking Inline syntax changed in v2.0.0: `[]` is no longer supported, use `,` comma separator (e.g., `?exposes=$,jQuery` instead of `?exposes[]=$&exposes[]=jQuery`). ↓

fix Update inline query to use comma-separated values: `exposes=$,jQuery`

breaking Minimum supported Node.js version is 18.12.0 as of v5.0.0. ↓

fix Upgrade Node.js to >=18.12.0 or pin expose-loader to v4.x.

breaking Minimum supported webpack version is 5 as of v2.0.0. ↓

fix Use webpack 5 or later; if on webpack 4, use expose-loader@1.

gotcha Spaces in inline syntax must be encoded as %20, not actual spaces. ↓

fix Use %20 for spaces in URLs: e.g., `exposes=_.map|map` (no spaces) vs `exposes=_.reduce|reduce` (no spaces).

gotcha The loader must be used with require.resolve in webpack config to target the exact module; otherwise, it may expose the wrong module. ↓

fix Use `test: require.resolve('module-name')` to precisely match the module path.

Install

npm install expose-loader

yarn add expose-loader

pnpm add expose-loader

Imports

expose-loader
wrong
```
require("expose-loader?exposes=$,jQuery!jquery")
```
correct
```
import $ from "expose-loader?exposes=$,jQuery!jquery"
```
Inline syntax is ESM-import based; CommonJS require may not work as expected because the loader returns the exposed module.

Loader usage in webpack config

wrong

Using 'expose-loader' without require.resolve or with incorrect test pattern

correct

module.exports = { module: { rules: [ { test: require.resolve('jquery'), loader: 'expose-loader', options: { exposes: ['$', 'jQuery'] } } ] } }

Use require.resolve to target a specific module path; avoid generic regex tests like /node_modules/.

exposes option with moduleLocalName

wrong

import * as underscore from "expose-loader?exposes=_.map!underscore"

correct

import { map } from "expose-loader?exposes=_.map|map!underscore"

The | syntax separates globalName and moduleLocalName. Use named import for specific exports.

Quickstart

Configure expose-loader in webpack config to expose jQuery as $ and jQuery globally, then import jquery in entry point.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: require.resolve('jquery'),
        loader: 'expose-loader',
        options: {
          exposes: ['$', 'jQuery'],
        },
      },
    ],
  },
};

// src/index.js
import $ from 'jquery';
// Now $ and jQuery are globally available
console.log(window.$); // jQuery function