import-glob

1.5.0 verified Sat Apr 25 auth: no javascript maintenance

Webpack preloader that expands glob patterns in ES6 import statements and Sass @import rules. Version 1.5.0 (latest) is stable; no recent updates. Replaces literal imports with individual file imports. Works only as a Webpack loader (preloader or chained). Alternatives include `bulk-require` or `import-meta-glob` for ESM. No TypeScript support. Not compatible with webpack 2+ as a preloader (must use chained loader). Last published in 2015.

Common errors

error Module build failed: Error: 'import-glob' is not compatible with webpack 2+ as a preloader. Please use the loader in the rules section. ↓

cause Webpack 2+ removed preLoaders; import-glob requires preloader behavior.

fix

Move loader configuration from module.preLoaders to module.rules and ensure order if needed.

error SyntaxError: Unexpected token * ↓

cause Glob pattern in import statement is not transpiled without the import-glob loader.

fix

Ensure webpack config has the correct test and loader for files using glob imports.

Warnings

breaking webpack 2+ dropped support for preloaders; import-glob must be configured as a chained loader or normal rule, not in preLoaders. ↓

fix Use module.rules instead of module.preLoaders.

gotcha Glob patterns in import statements are not standard JavaScript; code will not work without the loader. Bypassing the loader causes syntax errors. ↓

fix Always ensure the loader is applied to files containing glob imports.

deprecated Package has not been updated since 2015. Consider using native dynamic imports or import.meta.glob (Vite) for modern projects. ↓

fix Use Vite's import.meta.glob or Webpack 5's magic comments with context modules.

Install

npm install import-glob

yarn add import-glob

pnpm add import-glob

Imports

import-glob

wrong

import importGlob from 'import-glob'; // Not meant to be used as a library import

correct

// As a webpack loader in config: { test: /\.js$/, loader: 'import-glob' }

This is a Webpack loader, not a JavaScript module to import. Use in webpack config only.

Quickstart

Basic webpack config using import-glob as a loader and code that it transforms.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'import-glob'
      },
      {
        test: /\.scss$/,
        use: 'import-glob'
      }
    ]
  }
};

// In your JS code:
import modules from './foo/**/*.js';
// After processing, becomes:
// import * as module0 from './foo/1.js';
// import * as module1 from './foo/bar/2.js';
// import * as module2 from './foo/bar/3.js';
// modules = [module0, module1, module2]

// For side effects:
import './foo/**/*.scss';