{"id":20514,"library":"require-context.macro","title":"require-context.macro","description":"A Babel Macro that replicates Webpack's require.context() for use in Storybook and other non-Webpack environments. Current stable version is 1.2.2. The package is maintained by the Storybook team and depends on babel-plugin-macros. Key differentiator: it allows using require.context() syntax in Storybook config files without Webpack, enabling automatic file importing for stories. The macro follows symlinks and supports req.resolve(key). Ships TypeScript definitions. Compatible with Storybook 3 and 4.","status":"active","version":"1.2.2","language":"javascript","source_language":"en","source_url":"https://github.com/storybooks/require-context.macro","tags":["javascript","babel","macros","storybook","typescript"],"install":[{"cmd":"npm install require-context.macro","lang":"bash","label":"npm"},{"cmd":"yarn add require-context.macro","lang":"bash","label":"yarn"},{"cmd":"pnpm add require-context.macro","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"required for macros to work; must be configured in babel config","package":"babel-plugin-macros","optional":false}],"imports":[{"note":"Default import; CommonJS require() may not work with macro because babel-plugin-macros transforms imports at build time.","wrong":"const requireContext = require('require-context.macro')","symbol":"default","correct":"import requireContext from 'require-context.macro'"},{"note":"Use the macro function exactly like Webpack's require.context, but imported from the macro package.","wrong":"const req = require.context('./dir', true, /\\.stories\\.js$/)","symbol":"requireContext","correct":"import requireContext from 'require-context.macro'; const req = requireContext('./dir', true, /\\.stories\\.js$/)"},{"note":"req.resolve() is supported since v1.2.0, returns the resolved module ID.","wrong":"","symbol":"requireContext (with resolve)","correct":"const req = requireContext('./dir', true, /\\.stories\\.js$/); const key = req.resolve('./file.stories.js')"}],"quickstart":{"code":"// .storybook/config.js\nimport { configure } from '@storybook/react';\nimport requireContext from 'require-context.macro';\nimport '../src/index.css';\nconst req = requireContext('../src/components', true, /\\.stories\\.js$/);\nfunction loadStories() {\n  req.keys().forEach((filename) => req(filename));\n}\nconfigure(loadStories, module);","lang":"javascript","description":"Shows how to use require-context.macro to load stories dynamically in Storybook config."},"warnings":[{"fix":"Install babel-plugin-macros: yarn add -D babel-plugin-macros","message":"babel-plugin-macros is a peer dependency; missing it will cause macro not to run.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add 'macros' to plugins array in your babel config (e.g., .babelrc: { \"plugins\": [\"macros\"] })","message":"Must add 'macros' to babel plugins list for the macro to work.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to v1.2.1 or later which fixes this bug.","message":"'fullKey is not defined' error when using req.resolve().","severity":"breaking","affected_versions":"1.2.0"},{"fix":"For Storybook 5+, consider using @storybook/addon-storysource or other methods.","message":"Package is mainly for Storybook 3 and 4; Storybook 5+ uses different story loading.","severity":"deprecated","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":"Upgrade to v1.2.1 or later: yarn upgrade require-context.macro@1.2.1","cause":"Bug in require-context.macro v1.2.0 when calling req.resolve().","error":"fullKey is not defined"},{"fix":"Import requireContext from 'require-context.macro' and use that function.","cause":"Using require.context() directly instead of the imported macro function.","error":"require.context is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}