Registry / devops / glob-import-loader

glob-import-loader

library2.0.0jsnpmunverified

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.

devops

npm install glob-import-loader

github ↗package ↗

INSTALL

IMPORT

SIG · GLOB-IMPORT-LOADER

glob-import-loader

devopsjavascriptv2.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

glob-import-loader as webpack loader

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

✗ import globImportLoader from 'glob-import-loader';

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

import with glob pattern

✓ import modules from './foo/**/*.js';

✗ import * as modules from './foo/**/*.js';

Default import of the expanded array. Named imports are not supported for glob patterns.

side-effect glob import

✓ import './foo/**/*.scss';

✗ import './foo/**/*.scss' as sideEffect;

Use bare import for side effects — no default variable is returned.

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());

Debug

Known issues

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

fix

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

affects: >=1.0.0

gotchaSass @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.

affects: >=1.0.0

deprecatedLoader only supports Webpack 5 (enhanced-resolver). Webpack 4 usage is untested.

fix

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

affects: >=2.0.0

gotchaWhen 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.

affects: >=1.0.0

gotchaDefault 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).

affects: >=1.0.0

Errors

Common errors & fixes

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

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'.

Uncaught TypeError: modules is not iterable

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));

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

@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: resolve is not a function (in enhanced-resolver)

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

fix

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

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

webpackrequiredPeer dependency — loader runs in Webpack's compilation pipeline

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/soluml/glob-import-loader ↗

packagehttps://www.npmjs.com/package/glob-import-loader ↗