Ask questionsTypeError: require.context is not a function

Hi guys,

Issue details

If you use require.context within a React component the storyshots will fail with TypeError: require.context is not a function.

Steps to reproduce

Just write require.context() in any of the component.

This is mine:

import React from 'react';
import PropTypes from 'prop-types';
import DefaultProps from '../../helpers/default-props';

const lineIcons = require.context('../../assets/icons/Line', true, /.+\.svg$/);
const solidIcons = require.context('../../assets/icons/Solid', true, /.+\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext);
const toObjectNames = (state, icon) => ({ ...state, []: });
const icons = {
  Line: requireAll(lineIcons).reduce(toObjectNames, {}),
  Solid: requireAll(solidIcons).reduce(toObjectNames, {}),

const Icon = ({
  glyph, type = 'Line', width = 14, height = 14, className = 'icon', fill = 'currentColor',
}) => (
  <svg {} className={className} width={width} fill={fill} height={height}>
    <use xlinkHref={`#${type} ${glyph}`} />

Icon.propTypes = {
  /** icon name, just exactly how the file is named */
  glyph: PropTypes.string.isRequired,
  /** main folder where lays this file, could be `Line | Solid` */
  type: PropTypes.oneOf(['Line', 'Solid']),
  /** width, which is set to <svg> */
  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /** height, which is set to <svg> */
  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /** fill (color), which is set to <svg> */
  fill: PropTypes.string,

export default Icon;

export {

Please specify which version of Storybook and optionally any affected addons that you're running

  • storybook/react ^3.2.16 (my is 3.2.16)
  • storybook/addon-storyshots ^3.2.16 (my is 3.2.16)

Affected platforms

Any OS any build.

Screenshots / Screencast / Code Snippets (Optional)

// content of storyshots.test.js

import initStoryshots from '@storybook/addon-storyshots';

global.window = global;
window.addEventListener = () => {};
window.requestAnimationFrame = () => {
  throw new Error('requestAnimationFrame is not supported in Node');

initStoryshots({ /* configuration options */ });

Answer questions cyrus-za

I had the same issue. Using CRA v3 (not ejected) with ts and I could not figure a way out to get it to work with the babel plugin or anything. Followed various solutions on different git issues but nothing worked for me, so I hacked it with these 3 lines.

This seems to solve it. No .babelrc or jest.config or setupTest.js or anything. I just add the above to replace the original line in .storybook/config.js


// .storybook.config.js
const req = require.context('../src/components', true, /.stories.tsx$/)


// .storybook.config.js
import registerRequireContextHook from 'babel-plugin-require-context-hook/register';

const req = global.__requireContext(__dirname, '../src/components', true, /.stories.tsx$/)
Pieter Venter cyrus-za Ventus Cape Town "I owe my success to having listened respectfully to the very best advice, and then going away and doing the exact opposite." — G. K. Chesterton
Github User Rank List