{"id":20066,"library":"glob-import-loader","title":"glob-import-loader","description":"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.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/soluml/glob-import-loader","tags":["javascript","webpack","loader","glob","es6"],"install":[{"cmd":"npm install glob-import-loader","lang":"bash","label":"npm"},{"cmd":"yarn add glob-import-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add glob-import-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency — loader runs in Webpack's compilation pipeline","package":"webpack","optional":false}],"imports":[{"note":"Not a JavaScript import — configured in webpack.config.js as a loader string.","wrong":"import globImportLoader from 'glob-import-loader';","symbol":"glob-import-loader as webpack loader","correct":"module.exports = { module: { rules: [{ test: /\\.js$/, use: 'glob-import-loader' }] } }"},{"note":"Default import of the expanded array. Named imports are not supported for glob patterns.","wrong":"import * as modules from './foo/**/*.js';","symbol":"import with glob pattern","correct":"import modules from './foo/**/*.js';"},{"note":"Use bare import for side effects — no default variable is returned.","wrong":"import './foo/**/*.scss' as sideEffect;","symbol":"side-effect glob import","correct":"import './foo/**/*.scss';"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        use: 'glob-import-loader'\n      },\n      {\n        test: /\\.scss$/,\n        use: 'glob-import-loader'\n      }\n    ]\n  },\n  resolve: {\n    alias: {\n      '@components': path.resolve(__dirname, 'src/components')\n    }\n  }\n};\n\n// src/index.js\nimport buttons from '@components/buttons/**/*.js';\nimport './styles/**/*.scss';\n\nbuttons.forEach(button => button.default());","lang":"javascript","description":"Demonstrates webpack config using glob-import-loader for JS and SCSS files, with resolve alias and both named and side-effect glob imports."},"warnings":[{"fix":"Avoid using ? + and ! in glob patterns; use * and ** only.","message":"Glob characters ?, +, ! are incompatible with enhanced-resolver and may cause issues.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Do not use configuration syntax in glob-based @use/@forward; configure each module individually.","message":"Sass @use and @forward configuration (with, hide, as prefix) is ignored when used with glob expansion.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to Webpack 5 or use version 1.x for Webpack 4.","message":"Loader only supports Webpack 5 (enhanced-resolver). Webpack 4 usage is untested.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Do not rely on node_modules globbing unless you explicitly include 'node_modules' in the pattern.","message":"When using ignoreNodeModules: true, glob patterns containing 'node_modules' in the path will still match, but other matches under node_modules are ignored.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Access each module's exports via array index or iteration (e.g., modules[0].default).","message":"Default import from a glob pattern returns an array of module objects, not a single module.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure webpack config has a rule with test: /\\.js$/ and use: 'glob-import-loader'.","cause":"Glob pattern not recognized because loader is not applied to the file.","error":"Module not found: Error: Can't resolve './**/*.js'"},{"fix":"Iterate over the default import: modules.forEach(mod => console.log(mod));","cause":"Importing a glob pattern as default but expecting an object instead of array.","error":"Uncaught TypeError: modules is not iterable"},{"fix":"Remove configuration from glob-based @use; configure each module individually.","cause":"@use with configuration syntax (`with`) is ignored by loader, but Sass errors because of ordering.","error":"SassError: @use rules must be written before any other rules."},{"fix":"Upgrade to Webpack 5 and ensure enhanced-resolver is installed.","cause":"Using loader with Webpack <5 or incompatible enhanced-resolver version.","error":"Error: resolve is not a function (in enhanced-resolver)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}