Add import/no-anonymous-default-export lint rule (#8926)

packages/eslint-config-react-app/index.js

@@ -253,6 +253,7 @@ module.exports = {
     // https://github.com/benmosher/eslint-plugin-import/tree/master/docs/rules
     'import/first': 'error',
     'import/no-amd': 'error',
+    'import/no-anonymous-default-export': 'warn',
     'import/no-webpack-loader-syntax': 'error',
 
     // https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules

packages/react-scripts/fixtures/kitchensink/template/src/absoluteLoad.js

@@ -5,9 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export default () => [
+const absoluteLoad = () => [
   { id: 1, name: '1' },
   { id: 2, name: '2' },
   { id: 3, name: '3' },
   { id: 4, name: '4' },
 ];
+
+export default absoluteLoad;

packages/react-scripts/fixtures/kitchensink/template/src/features/config/BaseUrl.js

@@ -9,7 +9,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import load from 'absoluteLoad';
 
-export default class extends Component {
+export default class BaseUrl extends Component {
   static propTypes = {
     onReady: PropTypes.func.isRequired,
   };

packages/react-scripts/fixtures/kitchensink/template/src/features/env/ExpandEnvVariables.js

@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-export default () => (
+const ExpandEnvVariables = () => (
   <span>
     <span id="feature-expand-env-1">{process.env.REACT_APP_BASIC}</span>
     <span id="feature-expand-env-2">{process.env.REACT_APP_BASIC_EXPAND}</span>
@@ -19,3 +19,5 @@ export default () => (
     </span>
   </span>
 );
+
+export default ExpandEnvVariables;

packages/react-scripts/fixtures/kitchensink/template/src/features/env/FileEnvVariables.js

@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-export default () => (
+const FileEnvVariables = () => (
   <span>
     <span id="feature-file-env-original-1">
       {process.env.REACT_APP_ORIGINAL_1}
@@ -22,3 +22,5 @@ export default () => (
     <span id="feature-file-env-x">{process.env.REACT_APP_X}</span>
   </span>
 );
+
+export default FileEnvVariables;

packages/react-scripts/fixtures/kitchensink/template/src/features/env/PublicUrl.js

@@ -7,6 +7,8 @@
 
 import React from 'react';
 
-export default () => (
+const PublicUrl = () => (
   <span id="feature-public-url">{process.env.PUBLIC_URL}.</span>
 );
+
+export default PublicUrl;

packages/react-scripts/fixtures/kitchensink/template/src/features/env/ShellEnvVariables.js

@@ -7,8 +7,10 @@
 
 import React from 'react';
 
-export default () => (
+const ShellEnvVariables = () => (
   <span id="feature-shell-env-variables">
     {process.env.REACT_APP_SHELL_ENV_MESSAGE}.
   </span>
 );
+
+export default ShellEnvVariables;

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/ArrayDestructuring.js

@@ -17,7 +17,7 @@ function load() {
   ];
 }
 
-export default class extends Component {
+export default class ArrayDestructuring extends Component {
   static propTypes = {
     onReady: PropTypes.func.isRequired,
   };

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/ArraySpread.js

@@ -17,7 +17,7 @@ function load(users) {
   ];
 }
 
-export default class extends Component {
+export default class ArraySpread extends Component {
   static propTypes = {
     onReady: PropTypes.func.isRequired,
   };

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/AsyncAwait.js

@@ -27,7 +27,7 @@ const x = async (
 };
 /* eslint-enable */
 
-export default class extends Component {
+export default class AsyncAwait extends Component {
   static propTypes = {
     onReady: PropTypes.func.isRequired,
   };

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/ClassProperties.js

@@ -8,7 +8,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-export default class extends Component {
+export default class ClassProperties extends Component {
   static propTypes = {
     onReady: PropTypes.func.isRequired,
   };

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/ComputedProperties.js

@@ -17,7 +17,7 @@ function load(prefix) {
   ];
 }
 
-export default class extends Component {
+export default class ComputedProperties extends Component {
   static propTypes = {
     onReady: PropTypes.func.isRequired,
   };

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/CustomInterpolation.js

@@ -24,7 +24,7 @@ function load() {
   ];
 }
 
-export default class extends Component {
+export default class CustomInterpolation extends Component {
   static propTypes = {
     onReady: PropTypes.func.isRequired,
   };

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/DefaultParameters.js

@@ -17,7 +17,7 @@ function load(id = 0) {
   ];
 }
 
-export default class extends Component {
+export default class DefaultParameters extends Component {
   static propTypes = {
     onReady: PropTypes.func.isRequired,
   };

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/DestructuringAndAwait.js

@@ -19,7 +19,7 @@ async function load() {
   };
 }
 
-export default class extends Component {
+export default class DestructuringAndAwait extends Component {
   static propTypes = {
     onReady: PropTypes.func.isRequired,
   };

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/Generators.js

@@ -16,7 +16,7 @@ function* load(limit) {
   }
 }
 
-export default class extends Component {
+export default class Generators extends Component {
   static propTypes = {
     onReady: PropTypes.func.isRequired,
   };

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/NullishCoalescing.js

@@ -17,7 +17,7 @@ function load() {
   ];
 }
 
-export default class extends Component {
+export default class NullishCoalescing extends Component {
   static propTypes = {
     onReady: PropTypes.func.isRequired,
   };

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/ObjectDestructuring.js

@@ -17,7 +17,7 @@ function load() {
   ];
 }
 
-export default class extends Component {
+export default class ObjectDestructuring extends Component {
   static propTypes = {
     onReady: PropTypes.func.isRequired,
   };

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/ObjectSpread.js

@@ -17,7 +17,7 @@ function load(baseUser) {
   ];
 }
 
-export default class extends Component {
+export default class ObjectSpread extends Component {
   static propTypes = {
     onReady: PropTypes.func.isRequired,
   };

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/OptionalChaining.js

@@ -17,7 +17,7 @@ function load() {
   ];
 }
 
-export default class extends Component {
+export default class OptionalChaining extends Component {
   static propTypes = {
     onReady: PropTypes.func.isRequired,
   };

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/Promises.js

@@ -17,7 +17,7 @@ function load() {
   ]);
 }
 
-export default class extends Component {
+export default class Promises extends Component {
   static propTypes = {
     onReady: PropTypes.func.isRequired,
   };

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/RestAndDefault.js

@@ -17,7 +17,7 @@ function load({ id, ...rest } = { id: 0, user: { id: 42, name: '42' } }) {
   ];
 }
 
-export default class extends Component {
+export default class RestAndDefault extends Component {
   static propTypes = {
     onReady: PropTypes.func.isRequired,
   };

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/RestParameters.js

@@ -17,7 +17,7 @@ function load({ id = 0, ...rest }) {
   ];
 }
 
-export default class extends Component {
+export default class RestParameters extends Component {
   static propTypes = {
     onReady: PropTypes.func.isRequired,
   };

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/TemplateInterpolation.js

@@ -17,7 +17,7 @@ function load(name) {
   ];
 }
 
-export default class extends Component {
+export default class TemplateInterpolation extends Component {
   static propTypes = {
     onReady: PropTypes.func.isRequired,
   };

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/CssInclusion.js

@@ -8,4 +8,8 @@
 import React from 'react';
 import './assets/style.css';
 
-export default () => <p id="feature-css-inclusion">We love useless text.</p>;
+const CssInclusion = () => (
+  <p id="feature-css-inclusion">We love useless text.</p>
+);
+
+export default CssInclusion;

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/CssModulesInclusion.js

@@ -9,11 +9,13 @@ import React from 'react';
 import styles from './assets/style.module.css';
 import indexStyles from './assets/index.module.css';
 
-export default () => (
+const CssModulesInclusion = () => (
   <div>
     <p className={styles.cssModulesInclusion}>CSS Modules are working!</p>
     <p className={indexStyles.cssModulesInclusion}>
       CSS Modules with index are working!
     </p>
   </div>
 );
+
+export default CssModulesInclusion;

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/DynamicImport.js

@@ -7,6 +7,8 @@
 
 import React from 'react';
 
-export default () => {
+const DynamicImport = () => {
   return <>Hello World!</>;
 };
+
+export default DynamicImport;

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/ImageInclusion.js

@@ -8,6 +8,8 @@
 import React from 'react';
 import tiniestCat from './assets/tiniest-cat.jpg';
 
-export default () => (
+const ImageInclusion = () => (
   <img id="feature-image-inclusion" src={tiniestCat} alt="tiniest cat" />
 );
+
+export default ImageInclusion;

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/JsonInclusion.js

@@ -8,4 +8,8 @@
 import React from 'react';
 import { abstract } from './assets/abstract.json';
 
-export default () => <summary id="feature-json-inclusion">{abstract}</summary>;
+const JsonInclusion = () => (
+  <summary id="feature-json-inclusion">{abstract}</summary>
+);
+
+export default JsonInclusion;

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/LinkedModules.js

@@ -9,10 +9,12 @@ import React from 'react';
 import './assets/style.css';
 import { test, version } from 'test-integrity';
 
-export default () => {
+const LinkedModules = () => {
   const v = version();
   if (!test() || v !== '2.0.0') {
     throw new Error('Functionality test did not pass.');
   }
   return <p id="feature-linked-modules">{v}</p>;
 };
+
+export default LinkedModules;

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/NoExtInclusion.js

@@ -12,8 +12,10 @@ const text = aFileWithoutExt.includes('base64')
   ? atob(aFileWithoutExt.split('base64,')[1]).trim()
   : aFileWithoutExt;
 
-export default () => (
+const NoExtInclusion = () => (
   <a id="feature-no-ext-inclusion" href={text}>
     aFileWithoutExt
   </a>
 );
+
+export default NoExtInclusion;

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/SassInclusion.js

@@ -8,4 +8,8 @@
 import React from 'react';
 import './assets/sass-styles.sass';
 
-export default () => <p id="feature-sass-inclusion">We love useless text.</p>;
+const SassInclusion = () => (
+  <p id="feature-sass-inclusion">We love useless text.</p>
+);
+
+export default SassInclusion;

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/SassModulesInclusion.js

@@ -9,11 +9,13 @@ import React from 'react';
 import styles from './assets/sass-styles.module.sass';
 import indexStyles from './assets/index.module.sass';
 
-export default () => (
+const SassModulesInclusion = () => (
   <div>
     <p className={styles.sassModulesInclusion}>SASS Modules are working!</p>
     <p className={indexStyles.sassModulesIndexInclusion}>
       SASS Modules with index are working!
     </p>
   </div>
 );
+
+export default SassModulesInclusion;

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/ScssInclusion.js

@@ -8,4 +8,8 @@
 import React from 'react';
 import './assets/scss-styles.scss';
 
-export default () => <p id="feature-scss-inclusion">We love useless text.</p>;
+const ScssInclusion = () => (
+  <p id="feature-scss-inclusion">We love useless text.</p>
+);
+
+export default ScssInclusion;

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/ScssModulesInclusion.js

@@ -9,11 +9,13 @@ import React from 'react';
 import styles from './assets/scss-styles.module.scss';
 import indexStyles from './assets/index.module.scss';
 
-export default () => (
+const ScssModulesInclusion = () => (
   <div>
     <p className={styles.scssModulesInclusion}>SCSS Modules are working!</p>
     <p className={indexStyles.scssModulesIndexInclusion}>
       SCSS Modules with index are working!
     </p>
   </div>
 );
+
+export default ScssModulesInclusion;

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/SvgComponent.js

@@ -8,10 +8,12 @@
 import React from 'react';
 import { ReactComponent as Logo } from './assets/logo.svg';
 
-export default () => {
+const SvgComponent = () => {
   return <Logo id="feature-svg-component" />;
 };
 
 export const SvgComponentWithRef = React.forwardRef((props, ref) => (
   <Logo id="feature-svg-component-with-ref" ref={ref} />
 ));
+
+export default SvgComponent;

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/SvgInCss.js

@@ -1,4 +1,6 @@
 import React from 'react';
 import './assets/svg.css';
 
-export default () => <div id="feature-svg-in-css" />;
+const SvgInCss = () => <div id="feature-svg-in-css" />;
+
+export default SvgInCss;

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/SvgInclusion.js

@@ -8,4 +8,8 @@
 import React from 'react';
 import logo from './assets/logo.svg';
 
-export default () => <img id="feature-svg-inclusion" src={logo} alt="logo" />;
+const SvgInclusion = () => (
+  <img id="feature-svg-inclusion" src={logo} alt="logo" />
+);
+
+export default SvgInclusion;