Access imported module in top level scope of file with 'circular' dependency?

Question

I have the following modules structure:

/components
├── Button.js
├── Checkbox.js
├── index.js
├── DateSelect
    ├── DateSelect.js
    └── index.js

With /components/DateSelect/index.js:

import DateSelect from './DateSelect';

export default DateSelect;

/components/index.js:

import DateSelect from './DateSelect';
import Button from './Button';
import Checkbox from './Checkbox';

export {
  DateSelect,
  Button,
  Checkbox,
};

And /components/DateSelect/DateSelect.js:

import { Checkbox } from '../';
// ...code

// I want to do this!
const MyCustomCheckbox = props => <Checkbox style={someStyle} />;

// ...code
class DateSelect extends React.Component {
  // code
}
export default DateSelect;

Now, I want to access Checkbox as in the code above, in the top level scope of the file, but I get undefined. If I access this variable, however, in the render method of DateSelect, it works as expected.

I'm not completely sure on why this is the case, or how I can fix this (I can do import Checkbox from '../Checkbox', but I don't want to change the pattern of using the index.js file of the directory), and I also want to understand exactly what's going on. Any ideas?

Answer 1

Your problem is that you have a circular dependency on the export in /components/index.js.

When your build tool first builds your application, it does the following...

• starts at, say, app.js, which imports DateSelect from components/index.js

• goes to components/index.js which declares its export

  // SPOILER: This guy is your problem. We'll call him the douche.
  export {
    DateSelect,
    Button,
    Checkbox,
  };
  

• for the douche to be declared, it needs to import stuff from components/DateSelect.js, components/Button.js and components/Checkbox.js

• goes to these files and starts building what is in them
• as soon as it goes to build DateSelect, it is told to import CheckBox from components/index.js
• it already knows about the douche in components/index.js, so it goes looking for CheckBox on the douche (it 'circles' back to it), but CheckBox has not been declared in components/CheckBox.js yet, so it returns undefined

This is a matter of timing. CheckBox will be defined on the douche a few clicks after we try to import it, but that's a few clicks too late for your build.

You can show this by logging CheckBox immediately and a few milliseconds after the import statement...

// /components/DateSelect/DateSelect.js:

import { Checkbox } from '../';
console.log(CheckBox); // undefined
setTimeout(() => console.log(CheckBox), 4) // function CheckBox(_ref) { ...

So, when you try to declare MyCustomCheckbox, CheckBox is undefined.

By the time DateSelect's render method has been called, CheckBox has been declared. This is, relatively, waaay later than the build process.

There is no 100% safe solution to this kind of problem as it depends on your application structure as a whole. It is usually best to avoid circling back to the same module

Avoid the douche

You can avoid circling back to the douche by importing directly from components/CheckBox.js or take the indexed module approach one level deeper and create a little CheckBox module...

/components
  /CheckBox
    CheckBox.js
    index.js

...then import {CheckBox} from '/components/Checkbox'