title: ES6 circular dependency in react project
body: <p>I've just set up a little test project using react native. It's all new to me (including ECMAScript 6). Eslint is telling me something about "circular dependencies" and i don't know how to solve this problem. The code is working nevertheless.</p>
  
  <p>my package.json:</p>
  
  <pre><code>...
  "dependencies": {
      "axios": "^0.19.0",
      "node-sass": "^4.12.0",
      "react": "16.8.3",
      "react-native": "0.59.9",
      "react-navigation": "^3.11.0"
  },
  "devDependencies": {
      "@babel/core": "7.4.5",
      "@babel/runtime": "7.4.5",
      "babel-eslint": "^10.0.1",
      "babel-jest": "24.8.0",
      "babel-plugin-module-resolver": "^3.2.0",
      "eslint": "^5.16.0",
      "eslint-config-airbnb": "^17.1.0",
      "eslint-import-resolver-babel-module": "^5.1.0",
      "eslint-plugin-import": "^2.17.3",
      "eslint-plugin-jsx-a11y": "^6.2.1",
      "eslint-plugin-react": "^7.13.0",
      "jest": "24.8.0",
      "metro-react-native-babel-preset": "0.54.1",
      "react-dom": "^16.8.6",
      "react-test-renderer": "16.8.3"
  },
  ...
  </code></pre>
  
  <hr>
  
  <p><code>src/index.jsx</code> is the main JSX file:</p>
  
  <pre><code>import { Comp1 } from 'components';
  ...
  </code></pre>
  
  <hr>
  
  <p>I created a <code>src/components/index.jsx</code> to enable imports like</p>
  
  <pre><code>import { Comp1, Comp2, Comp3 } from 'components'
  </code></pre>
  
  <p>instead of</p>
  
  <pre><code>import { Comp1 } from 'components/comp1';
  import { Comp2 } from 'components/comp2';
  import { Comp3 } from 'components/comp3';
  </code></pre>
  
  <p>The file <code>src/components/index.jsx</code> looks like:</p>
  
  <pre><code>export * from './button';
  export * from './comp1';
  ...
  </code></pre>
  
  <hr>
  
  <p><code>src/components/button/index.jsx</code>:</p>
  
  <pre><code>import React from 'react';
  import {
    Text,
    TouchableOpacity
  } from 'react-native';
  import style from './style';
  
  const Button = ({ onPress, children }) =&gt; {
    const {
      buttonStyle,
      textStyle
    } = style;
  
    return (
      &lt;TouchableOpacity onPress={onPress} style={buttonStyle}&gt;
        &lt;Text style={textStyle}&gt;
          {children}
        &lt;/Text&gt;
      &lt;/TouchableOpacity&gt;
    );
  };
  
  export default Button;
  export { Button };
  </code></pre>
  
  <hr>
  
  <p><code>src/components/comp1/index.jsx</code>:</p>
  
  <pre><code>import React from 'react';
  import {
    Text,
    View
  } from 'react-native';
  import { Button } from 'components';
  import style from './style';
  
  const Comp1 = (props) =&gt; {
    const {
      textStyle,
      viewStyle
    } = style;
  
    return (
      &lt;View style={viewStyle}&gt;
        &lt;Text style={textStyle}&gt;some text&lt;/Text&gt;
        &lt;Button&gt;Test&lt;/Button&gt;
      &lt;/View&gt;
    );
  };
  
  export default Comp1;
  export { Comp1 };
  
  </code></pre>
  
  <p>Running this setup produces an eslint error <a href="https://github.com/benmosher/eslint-plugin-import/blob/v2.17.3/docs/rules/no-cycle.md" rel="noreferrer">import/no-cycle</a>. The code itself works.</p>
  
  <p>If i change <code>import { Button } from 'components'</code> in <code>src/components/comp1/index.jsx</code> into <code>import { Button } from 'components/button'</code> the no eslint error pops up.</p>
  
  <p>I would like to use this short import syntax like described above without loosing the possibility of using the modules inside of each other. Is there a way?</p>