profile
viewpoint

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, [icon.default.id]: icon.default.id });
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', ...rest
}) => (
  <svg {...rest} className={className} width={width} fill={fill} height={height}>
    <use xlinkHref={`#${type} ${glyph}`} />
  </svg>
);

Icon.propTypes = {
  ...DefaultProps,
  /** 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 {
  icons,
};

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)

http://prntscr.com/hnhw8u

// 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 */ });
storybookjs/storybook

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

BEFORE

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

AFTER

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

const req = global.__requireContext(__dirname, '../src/components', true, /.stories.tsx$/)
useful!
source:https://uonfu.com/
answerer
Pieter Venter cyrus-za Ventus Cape Town https://pieter.venter.pro "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