Registry / testing / require-context.macro

require-context.macro

library1.2.2jsnpmunverified

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.

testing devops

npm install require-context.macro

github ↗package ↗

INSTALL

IMPORT

SIG · REQUIRE-CONTEXT.MA

require-context.macro

testingjavascriptv1.2.2

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.

default

✓ import requireContext from 'require-context.macro'

✗ const requireContext = require('require-context.macro')

Default import; CommonJS require() may not work with macro because babel-plugin-macros transforms imports at build time.

requireContext

✓ import requireContext from 'require-context.macro'; const req = requireContext('./dir', true, /\.stories\.js$/)

✗ const req = require.context('./dir', true, /\.stories\.js$/)

Use the macro function exactly like Webpack's require.context, but imported from the macro package.

requireContext (with resolve)

✓ const req = requireContext('./dir', true, /\.stories\.js$/); const key = req.resolve('./file.stories.js')

req.resolve() is supported since v1.2.0, returns the resolved module ID.

Shows how to use require-context.macro to load stories dynamically in Storybook config.

// .storybook/config.js import { configure } from '@storybook/react'; import requireContext from 'require-context.macro'; import '../src/index.css'; const req = requireContext('../src/components', true, /\.stories\.js$/); function loadStories() { req.keys().forEach((filename) => req(filename)); } configure(loadStories, module);

Debug

Known issues

gotchababel-plugin-macros is a peer dependency; missing it will cause macro not to run.

fix

Install babel-plugin-macros: yarn add -D babel-plugin-macros

affects: >=1.0.0

gotchaMust add 'macros' to babel plugins list for the macro to work.

fix

Add 'macros' to plugins array in your babel config (e.g., .babelrc: { "plugins": ["macros"] })

affects: >=1.0.0

breaking'fullKey is not defined' error when using req.resolve().

fix

Upgrade to v1.2.1 or later which fixes this bug.

affects: 1.2.0

deprecatedPackage is mainly for Storybook 3 and 4; Storybook 5+ uses different story loading.

fix

For Storybook 5+, consider using @storybook/addon-storysource or other methods.

affects: >=1.0.0

Errors

Common errors & fixes

fullKey is not defined

Bug in require-context.macro v1.2.0 when calling req.resolve().

fix

Upgrade to v1.2.1 or later: yarn upgrade require-context.macro@1.2.1

require.context is not a function

Using require.context() directly instead of the imported macro function.

fix

Import requireContext from 'require-context.macro' and use that function.

Upgrade

Version history

1.2.2latest on npm

Audit

Dependencies

babel-plugin-macrosrequiredrequired for macros to work; must be configured in babel config

Agent activity

7 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/storybooks/require-context.macro ↗

packagehttps://www.npmjs.com/package/require-context.macro ↗