Async ForEach Causing Import Issues in src/components/index.js

[Swivelgames]

Hey guys,

We've been implementing ARC, utilizing Storybook, and several other utilities. We're running into a problem at the moment, though. The issue comes when the .forEach statement inside of src/components/index.js. When attempting to load the example site or the storybooks dashboard we're getting an error:

Cannot read property 'displayName' of undefined
TypeError: Cannot read property 'displayName' of undefined
    at createStyledComponent (webpack:///./~/styled-components/lib/models/StyledComponent.js?:166:106)
    at eval (webpack:///./~/styled-components/lib/constructors/styled.js?:28:14)
    at eval (webpack:///./src/components/sections/Header/index.js?:40:75)
    at Object.<anonymous> (http://localhost:9001/static/preview.bundle.js:4046:2)
    at __webpack_require__ (http://localhost:9001/static/preview.bundle.js:556:30)
    at fn (http://localhost:9001/static/preview.bundle.js:87:20)
    at webpackContext (webpack:///./src/components_\.\/%5B^\/%5D+\/%5B^\/%5D+\/index\.js$?:42:9)
    at eval (webpack:///./src/components/index.js?:7:35)
    at Array.forEach (native)
    at eval (webpack:///./src/components/index.js?:5:12)

Further investigation yielded that SOME of the keys are being populated, but not all. And, unfortunately because of this, by the time the import statement attempts to resolve, the modules are not yet resolved so we only get a partial object containing a limited number of the components.

Current Implementation

src/components/index.js

const req = require.context('.', true, /\.\/[^/]+\/[^/]+\/index\.js$/)

req.keys().forEach((key) => {
  const componentName = key.replace(/^.+\/([^/]+)\/index\.js/, '$1')
  module.exports[componentName] = req(key).default
});

src/components/*/*/index.js

import { IconLink, PrimaryNavigation, Block } from 'components';

Our hacky solution

Our interim solution was very hacky and much less than ideal.

src/components/index.js

const Components = {};

const req = require.context('.', true, /\.\/[^/]+\/[^/]+\/index\.js$/);

const keys = req.keys();

for(let key of keys) {
  const componentName = key.replace(/^.+\/([^/]+)\/index\.js/, '$1');
  Components[componentName] = req(key).default;
};

export default Components;

src/components/*/*/index.js

import Components from "components";

const { IconLink, PrimaryNavigation, Block } = Components;

[diegohaz]

Hey, @Swivelgames

Is this somehow related to #131 (comment)?

[Swivelgames]

@diegohaz Yes! That's it. My apologies. I didn't see those others.

[diegohaz]

No worries. We need to write better docs for that. (help is welcome on the new Wiki: https://github.com/diegohaz/arc/wiki).