Further refined error message

Author: Brian Vaughn

packages/react-dom/src/__tests__/ReactDOMComponent-test.js

@@ -449,7 +449,10 @@ describe('ReactDOMComponent', () => {
       it('should not add an empty src attribute', () => {
         const container = document.createElement('div');
         expect(() => ReactDOM.render(<img src="" />, container)).toErrorDev(
-          'An empty string ("") was passed to the src attribute.',
+          'An empty string ("") was passed to the src attribute. ' +
+            'This may cause the browser to download the whole page again over the network. ' +
+            'To fix this, either do not render the element at all ' +
+            'or pass null to src instead of an empty string.',
         );
         const node = container.firstChild;
         expect(node.hasAttribute('src')).toBe(false);
@@ -458,15 +461,20 @@ describe('ReactDOMComponent', () => {
         expect(node.hasAttribute('src')).toBe(true);
 
         expect(() => ReactDOM.render(<img src="" />, container)).toErrorDev(
-          'An empty string ("") was passed to the src attribute.',
+          'An empty string ("") was passed to the src attribute. ' +
+            'This may cause the browser to download the whole page again over the network. ' +
+            'To fix this, either do not render the element at all ' +
+            'or pass null to src instead of an empty string.',
         );
         expect(node.hasAttribute('src')).toBe(false);
       });
 
       it('should not add an empty href attribute', () => {
         const container = document.createElement('div');
         expect(() => ReactDOM.render(<link href="" />, container)).toErrorDev(
-          'An empty string ("") was passed to the href attribute.',
+          'An empty string ("") was passed to the href attribute. ' +
+            'To fix this, either do not render the element at all ' +
+            'or pass null to href instead of an empty string.',
         );
         const node = container.firstChild;
         expect(node.hasAttribute('href')).toBe(false);
@@ -475,15 +483,19 @@ describe('ReactDOMComponent', () => {
         expect(node.hasAttribute('href')).toBe(true);
 
         expect(() => ReactDOM.render(<link href="" />, container)).toErrorDev(
-          'An empty string ("") was passed to the href attribute.',
+          'An empty string ("") was passed to the href attribute. ' +
+            'To fix this, either do not render the element at all ' +
+            'or pass null to href instead of an empty string.',
         );
         expect(node.hasAttribute('href')).toBe(false);
       });
 
       it('should not add an empty action attribute', () => {
         const container = document.createElement('div');
         expect(() => ReactDOM.render(<form action="" />, container)).toErrorDev(
-          'An empty string ("") was passed to the action attribute.',
+          'An empty string ("") was passed to the action attribute. ' +
+            'To fix this, either do not render the element at all ' +
+            'or pass null to action instead of an empty string.',
         );
         const node = container.firstChild;
         expect(node.hasAttribute('action')).toBe(false);
@@ -492,7 +504,9 @@ describe('ReactDOMComponent', () => {
         expect(node.hasAttribute('action')).toBe(true);
 
         expect(() => ReactDOM.render(<form action="" />, container)).toErrorDev(
-          'An empty string ("") was passed to the action attribute.',
+          'An empty string ("") was passed to the action attribute. ' +
+            'To fix this, either do not render the element at all ' +
+            'or pass null to action instead of an empty string.',
         );
         expect(node.hasAttribute('action')).toBe(false);
       });
@@ -502,7 +516,9 @@ describe('ReactDOMComponent', () => {
         expect(() =>
           ReactDOM.render(<button formAction="" />, container),
         ).toErrorDev(
-          'An empty string ("") was passed to the formAction attribute.',
+          'An empty string ("") was passed to the formAction attribute. ' +
+            'To fix this, either do not render the element at all ' +
+            'or pass null to formAction instead of an empty string.',
         );
         const node = container.firstChild;
         expect(node.hasAttribute('formAction')).toBe(false);
@@ -513,7 +529,9 @@ describe('ReactDOMComponent', () => {
         expect(() =>
           ReactDOM.render(<button formAction="" />, container),
         ).toErrorDev(
-          'An empty string ("") was passed to the formAction attribute.',
+          'An empty string ("") was passed to the formAction attribute. ' +
+            'To fix this, either do not render the element at all ' +
+            'or pass null to formAction instead of an empty string.',
         );
         expect(node.hasAttribute('formAction')).toBe(false);
       });

packages/react-dom/src/shared/DOMProperty.js

@@ -170,13 +170,24 @@ export function shouldRemoveAttribute(
     if (enableFilterEmptyStringAttributesDOM) {
       if (propertyInfo.removeEmptyString && value === '') {
         if (__DEV__) {
-          console.error(
-            'An empty string ("") was passed to the %s attribute. ' +
-              'To fix this, either do not render the element at all ' +
-              'or pass null to %s instead of an empty string.',
-            name,
-            name,
-          );
+          if (name === 'src') {
+            console.error(
+              'An empty string ("") was passed to the %s attribute. ' +
+                'This may cause the browser to download the whole page again over the network. ' +
+                'To fix this, either do not render the element at all ' +
+                'or pass null to %s instead of an empty string.',
+              name,
+              name,
+            );
+          } else {
+            console.error(
+              'An empty string ("") was passed to the %s attribute. ' +
+                'To fix this, either do not render the element at all ' +
+                'or pass null to %s instead of an empty string.',
+              name,
+              name,
+            );
+          }
         }
         return true;
       }