debugging builds: error due to require/import 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 gatsbyjs#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.

docs/docs/debugging-html-builds.md

@@ -16,8 +16,10 @@ Errors while building static HTML files generally happen for two reasons.
  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.
+
+3. 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. The solution is to only use `import`.
 
-3. Some other reason :-) #1 is the most common reason building static files
+4. 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.