Flickering compile terminal about svg-to-json-webpack-plugin

[gilesa]

I created this for a project that uses a custom webpack setup, and not create-react-app, so I haven't seen the issue you describe. If I manage to find the time, I'll take a look.

[zslabs]

I think this might have something to do with webpack-dev-server and not so much create-react-app. I'm writing the file to my source directory so I can grab specific icons from it with a tiny icon component I created:

import cx from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';

import Icons from './assets/icons/icons.json';

class Icon extends React.Component {
  getIcon = () => {
    const { icon, className, size, ...opts } = this.props;
    const classes = cx('icon', className, {
      'icon--small': size === 'small',
      'icon--large': size === 'large',
      'icon--xlarge': size === 'xlarge',
    });

    // If we find an icon
    if (Icons[icon]) {
      return (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          strokeLinecap="round"
          strokeLinejoin="round"
          className={classes}
          {...opts}
          dangerouslySetInnerHTML={{ __html: [Icons[icon].content] }} // eslint-disable-line react/no-danger
        />
      );
    }

    console.error('Icon not found'); // eslint-disable-line no-console
    return false;
  }

  render() {
    return this.getIcon();
  }
}

Icon.propTypes = {
  className: PropTypes.string,
  icon: PropTypes.string.isRequired,
  size: PropTypes.oneOf(['small', 'large', 'xlarge']),
};

export default Icon;

but whenever I attempt to call it, the server continues to reload:

[zslabs]

This looks to be an issue with how Webpack handles watching files that are created within a plugin. Using https://github.com/yessky/webpack-mild-compile resolves the issue. It appears that may be something you can add to your plugin if you wanted to work around the issue yourself webpack/watchpack#25 (comment)

[gilesa]

Great, glad you found a solution!