debugging build: error due to import/require mix (#8493)

* debugging build: error due to import/require mix

Mention that build may fail with

```
error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

   8 | 	else
   9 | 		root["lib"] = factory(root["@reach/router"], root["core-js/modules/es6.array.sort"], root["fs"], root["lodash"], root["path"], root["react"], root["react-dom/server"], root["react-helmet"]);
> 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE__reach_router__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_sort__, __WEBPACK_EXTERNAL_MODULE_fs__, __WEBPACK_EXTERNAL_MODULE_lodash__, __WEBPACK_EXTERNAL_MODULE_path__, __WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom_server__, __WEBPACK_EXTERNAL_MODULE_react_helmet__) {
     |  ^
  11 | return

  WebpackError: Invariant Violation: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invari  ant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and addi  tional helpful warnings.
```

when we mix `import` and `require` in the same (page) file in Gatsby 2, which has upgraded to Webpack 4, which is stricter about this.

* updated number of reasons to account for any reasons people add in the future :)

docs/docs/debugging-html-builds.md

@@ -2,7 +2,7 @@
 title: Debugging HTML Builds
 ---
 
-Errors while building static HTML files generally happen for two reasons.
+Errors while building static HTML files generally happen for one of the following reasons:
 
 1. Some of your code references "browser globals" like window or document. If
  this is your problem you should see an error above like "window is not
@@ -12,12 +12,17 @@ Errors while building static HTML files generally happen for two reasons.
  of a React.js component, move that code into "componentDidMount" which
  ensures the code doesn't run unless it's in the browser.
 
-2. Check that each of your JS files listed in your `pages` directory (and any
+1. Check that each of your JS files listed in your `pages` directory (and any
  sub-directories) are exporting either a React component or string. Gatsby
  treats any JS file listed under the pages dir as a page component, so it must
  have a default export that's a component or string.
+
+1. You mix up `import` and `require` calls in the same file. This might lead to 
+ "WebpackError: Invariant Violation: Minified React error #130" [since Webpack 4 
+ is stricter than v3](/docs/migrating-from-v1-to-v2/#convert-to-either-pure-commonjs-or-pure-es6). 
+ The solution is to only use `import`.
 
-3. Some other reason :-) #1 is the most common reason building static files
+1. Some other reason :-) #1 is the most common reason building static files
  fail. If it's another reason, you have to be a bit more creative in figuring
  out the problem.