Semantic-ui-react: Circular dependencies within components

[jackturnbull]

Bug Report

Using Rollup.js to package my application, I'm getting a number of circular dependency warnings being thrown. It appears to handle these but I believe this may not be ideal.

These are in:

• Label
• Button
• Transition
• Step
• Card
• Item
• Statistic

Steps

My rollup config:

import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import replace from "rollup-plugin-replace";
import babel from "rollup-plugin-babel";

const isProduction = process.env.BUILD === "production";

export default {
  input: ["src/index.jsx"],
  output: {
    dir: "www/dist",
    entryFileNames: "[name].js",
    format: "iife",
  },
  plugins: [
    replace({
      values: {
        "process.env.NODE_ENV": JSON.stringify(isProduction ? "production" : "development")
      }
    }),
    resolve({
      extensions: [".mjs", ".js", ".jsx", ".json", ".node"]
    }),
    commonjs({
      exclude: ["src/apps/web/javascripts/**"],
      namedExports: {
        "node_modules/react/index.js": [
          "Children",
          "Component",
          "Fragment",
          "PureComponent",
          "cloneElement",
          "createElement",
          "createRef",
          "isValidElement"
        ],
        "node_modules/react-dom/index.js": ["render", "createPortal", "findDOMNode"],
        "node_modules/react-is/index.js": ["isForwardRef", "isValidElementType"],
        "node_modules/semantic-ui-react/node_modules/prop-types/index.js": [
          "element",
          "func",
          "object",
          "oneOfType"
        ]
      }
    }),
    babel({
      extensions: [".js", ".jsx"],
      exclude: ["node_modules/**"]
    })
  ],
};

// src/index.jsx
import * as React from "react";
import PropTypes from "prop-types";
import { Input, Menu } from "semantic-ui-react";

export default class NavBar extends React.Component {
  static propTypes = {
  }

  state = {
  }

  render() {
    return (
      <Menu>
        <Menu.Item>
          <Input className='icon' icon='search' placeholder='Search...' />
        </Menu.Item>

        <Menu.Item position='right'>
          <Input action={{ type: 'submit', content: 'Go' }} placeholder='Navigate to...' />
        </Menu.Item>
      </Menu>
    );
  }
}

Expected Result

No warnings

Actual Result

rollup v1.2.1
bundles src/apps/web/javascripts/index.jsx → www/dist...
(!) Circular dependency: node_modules/semantic-ui-react/dist/es/elements/Label/Label.js -> node_modules/semantic-ui-react/dist/es/elements/Image/Image.js -> node_modules/semantic-ui-react/dist/es/elements/Label/Label.js
(!) Circular dependency: node_modules/semantic-ui-react/dist/es/elements/Button/Button.js -> node_modules/semantic-ui-react/dist/es/elements/Button/ButtonGroup.js -> node_modules/semantic-ui-react/dist/es/elements/Button/Button.js
(!) Circular dependency: node_modules/semantic-ui-react/dist/es/modules/Transition/Transition.js -> node_modules/semantic-ui-react/dist/es/modules/Transition/TransitionGroup.js -> node_modules/semantic-ui-react/dist/es/modules/Transition/Transition.js
(!) Circular dependency: node_modules/semantic-ui-react/dist/es/elements/Step/Step.js -> node_modules/semantic-ui-react/dist/es/elements/Step/StepGroup.js -> node_modules/semantic-ui-react/dist/es/elements/Step/Step.js
(!) Circular dependency: node_modules/semantic-ui-react/dist/es/views/Card/Card.js -> node_modules/semantic-ui-react/dist/es/views/Card/CardGroup.js -> node_modules/semantic-ui-react/dist/es/views/Card/Card.js
(!) Circular dependency: node_modules/semantic-ui-react/dist/es/views/Item/Item.js -> node_modules/semantic-ui-react/dist/es/views/Item/ItemGroup.js -> node_modules/semantic-ui-react/dist/es/views/Item/Item.js
(!) Circular dependency: node_modules/semantic-ui-react/dist/es/views/Statistic/Statistic.js -> node_modules/semantic-ui-react/dist/es/views/Statistic/StatisticGroup.js -> node_modules/semantic-ui-react/dist/es/views/Statistic/Statistic.js
created www/dist in 3.4s

Version

0.85.0

Testcase

N/A

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[layershifter]

@jackturnbull thanks for the detailed report 👍

I know about this issue, but I don't see any way how we can solve it. It comes from our design and currently I don't see resolution there. However, Rollup and other bundlers handle circular dependencies, so I don't see this as a critical issue.

Opened for the good ideas in this way 🤔

[jackturnbull]

That's fine, I don't have any suggestions unfortunately. Anyone stubling upon this and wanting to know how to supress this in rollup can use the following:

{
  input: ...,
  output: {
    ...
  },
  onwarn(warning, warn) {
    const { code, importer } = warning;
    if (code === "CIRCULAR_DEPENDENCY" && importer.includes("semantic-ui-react")) return;
    warn(warning);
  },
  ...
}