glob-import-loader

2.0.0 verified Sat Apr 25 auth: no javascript

Webpack loader enabling glob patterns in ES6 import statements and Sass @import/@use/@forward directives. Version 2.0.0 supports Webpack 5 and enhanced-resolver for alias resolution. Expands globs like `import modules from './foo/**/*.js'` into multiple named imports. Unlike alternatives, it works seamlessly with Sass (scss/sass) files and allows configuration of resolve aliases, banner function for HMR, and node_modules filtering. Requires Node >=15 and Webpack 5.

Common errors

error Module not found: Error: Can't resolve './**/*.js' ↓

cause Glob pattern not recognized because loader is not applied to the file.

fix

Ensure webpack config has a rule with test: /\.js$/ and use: 'glob-import-loader'.

error Uncaught TypeError: modules is not iterable ↓

cause Importing a glob pattern as default but expecting an object instead of array.

fix

Iterate over the default import: modules.forEach(mod => console.log(mod));

error SassError: @use rules must be written before any other rules. ↓

cause @use with configuration syntax (`with`) is ignored by loader, but Sass errors because of ordering.

fix

Remove configuration from glob-based @use; configure each module individually.

error Error: resolve is not a function (in enhanced-resolver) ↓

cause Using loader with Webpack <5 or incompatible enhanced-resolver version.

fix

Upgrade to Webpack 5 and ensure enhanced-resolver is installed.

Warnings

gotcha Glob characters ?, +, ! are incompatible with enhanced-resolver and may cause issues. ↓

fix Avoid using ? + and ! in glob patterns; use * and ** only.

gotcha Sass @use and @forward configuration (with, hide, as prefix) is ignored when used with glob expansion. ↓

fix Do not use configuration syntax in glob-based @use/@forward; configure each module individually.

deprecated Loader only supports Webpack 5 (enhanced-resolver). Webpack 4 usage is untested. ↓

fix Upgrade to Webpack 5 or use version 1.x for Webpack 4.

gotcha When using ignoreNodeModules: true, glob patterns containing 'node_modules' in the path will still match, but other matches under node_modules are ignored. ↓

fix Do not rely on node_modules globbing unless you explicitly include 'node_modules' in the pattern.

gotcha Default import from a glob pattern returns an array of module objects, not a single module. ↓

fix Access each module's exports via array index or iteration (e.g., modules[0].default).

Install

npm install glob-import-loader

yarn add glob-import-loader

pnpm add glob-import-loader

Imports

glob-import-loader as webpack loader

wrong

import globImportLoader from 'glob-import-loader';

correct

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

Not a JavaScript import — configured in webpack.config.js as a loader string.

import with glob pattern
wrong
```
import * as modules from './foo/**/*.js';
```
correct
```
import modules from './foo/**/*.js';
```
Default import of the expanded array. Named imports are not supported for glob patterns.
side-effect glob import
wrong
```
import './foo/**/*.scss' as sideEffect;
```
correct
```
import './foo/**/*.scss';
```
Use bare import for side effects — no default variable is returned.

Quickstart

Demonstrates webpack config using glob-import-loader for JS and SCSS files, with resolve alias and both named and side-effect glob imports.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'glob-import-loader'
      },
      {
        test: /\.scss$/,
        use: 'glob-import-loader'
      }
    ]
  },
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components')
    }
  }
};

// src/index.js
import buttons from '@components/buttons/**/*.js';
import './styles/**/*.scss';

buttons.forEach(button => button.default());