exports-loader

5.0.0 verified Sat Apr 25 auth: no javascript

Webpack loader that adds export statements to source files that lack them. Current stable version is 5.0.0 (Jan 2024), requiring Node.js >=18.12.0 and webpack^5.0.0. Commonly used for shimming legacy scripts, vendor files, or modules that do not expose exports. Supports inline query configuration and webpack rule options to generate named or default ES module exports (default) or CommonJS module.exports. Key differentiator: declarative, composable with other loaders; simpler than writing wrapper modules. No security incidents reported.

Common errors

error Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. ↓

cause The source file is not a JavaScript module or exports-loader cannot add exports because file is malformed.

fix

Ensure the file is valid JavaScript. If using inline syntax, check query string syntax. Try adding additional loaders (e.g., babel-loader) before exports-loader.

error Error: exports is not defined ↓

cause Using CommonJS require() without type=commonjs; generated ES export causes ReferenceError in Node.js CommonJS context.

fix

Add ?type=commonjs to inline query or set type: 'commonjs' in webpack config options.

error Cannot find module 'exports-loader' ↓

cause exports-loader not installed or not in node_modules.

fix

Run npm install exports-loader --save-dev or yarn add -D exports-loader.

error Error: 'exports' value is not a string or string[] ↓

cause Options.exports is not defined correctly (e.g., using array in v2+ when only string expected).

fix

In v2+, options.exports should be a string or array of strings. For inline syntax, use query parameter 'exports=...'. Check documentation.

Warnings

breaking Minimum Node.js version changed to 18.12.0 (v5.0.0) and 14.15.0 (v4.0.0). ↓

fix Update to Node.js >=18.12.0 or use v4.0.0 if locked to Node 14/16.

breaking Minimum webpack version changed to 5 (v2.0.0). Inline syntax changed: '[]' no longer supported, use '|' or '%20'. ↓

fix Upgrade webpack to v5 or stick to v1.x if on webpack 4. For inline syntax, replace [] with | (e.g., exports[]=myFunc -> exports=named|myFunc).

deprecated The 'exports' option string syntax using brackets (e.g., 'exports[]=myFunc') is removed in v2.0.0. ↓

fix Use pipe-separated syntax: 'exports=myFunc' for named (shorthand) or 'exports=named|myFunc'.

gotcha Loader generates ES module named exports by default (export { ... }). If consuming with CommonJS require(), you must set ?type=commonjs or the exports will be incorrect. ↓

fix Add ?type=commonjs to inline query or set options.type: 'commonjs' in webpack config rule.

gotcha Existing exports in the original file can conflict with injected exports, causing build errors. ↓

fix Ensure source file has no exports or use exports-loader only on files that truly lack exports. Alternatively, use a shim or wrapper module.

gotcha Using test regex (e.g., /vendor\.js$/) instead of require.resolve() may accidentally match multiple files and apply exports-loader unexpectedly. ↓

fix Use require.resolve() in test to match exact file path, or use a more specific regex (e.g., include file path anchor).

Install

npm install exports-loader

yarn add exports-loader

pnpm add exports-loader

Imports

inline import syntax
wrong
```
import foo from 'exports-loader?exports=named|foo!./file.js'
```
correct
```
import { foo } from 'exports-loader?exports=foo!./file.js'
```
inline loader syntax with query string: 'exports=foo' is shorthand for 'named|foo'. Use '|' or '%20' as separator.
require() syntax
wrong
```
const { foo } = require('exports-loader?exports=foo!./file.js')
```
correct
```
const { foo } = require('exports-loader?type=commonjs&exports=foo!./file.js')
```
When using CommonJS require(), you must set ?type=commonjs to generate module.exports. Omitting creates ES exports and might break CJS code.

webpack config rule

wrong

module: { rules: [ { test: /vendor\.js$/, loader: 'exports-loader?exports=myFunc' } ] }

correct

module: { rules: [ { test: require.resolve('./vendor.js'), loader: 'exports-loader', options: { exports: 'myFunc' } } ] }

Use test with require.resolve() to match specific file path, not regex to avoid applying to multiple modules.

Quickstart

Shows webpack config rule using exports-loader to add a default export to a legacy script, then importing it in modern code.

// webpack.config.js
module.exports = {
  module: {
    rules: [{
      // match a specific file that lacks exports
      test: require.resolve('./path/to/legacy.js'),
      loader: 'exports-loader',
      options: {
        // export a function named 'myFunc' as default
        exports: 'default myFunc',
      },
    }],
  },
};

// then in your code
import myFunc from './path/to/legacy.js';
myFunc();