fix: add info message if gatsby-config.js could have been typo'd (#4017)

* fix: add info message if gatsby-config.js could have been typo'd

* chore: move preferDefault back to where it was

* refactor: tweak error logic a bit

* chore: tweak versions for yarn.lock compat

* refactor: address PR comments

* fix: fail with error

* format

* Fix lint errors

Author: DSchau

packages/gatsby/package.json

@@ -42,6 +42,7 @@
     "express": "^4.14.0",
     "express-graphql": "^0.6.6",
     "extract-text-webpack-plugin": "^1.0.1",
+    "fast-levenshtein": "~2.0.4",
     "file-loader": "^0.9.0",
     "flat": "^2.0.1",
     "friendly-errors-webpack-plugin": "^1.6.1",

packages/gatsby/src/bootstrap/get-config-file.js

@@ -0,0 +1,48 @@
+/* @flow */
+const levenshtein = require(`fast-levenshtein`)
+const fs = require(`fs-extra`)
+const testRequireError = require(`../utils/test-require-error`)
+const report = require(`gatsby-cli/lib/reporter`)
+const chalk = require(`chalk`)
+
+function isNearMatch(
+  fileName: string,
+  configName: string,
+  distance: number
+): boolean {
+  return levenshtein.get(fileName, configName) <= distance
+}
+
+module.exports = async function getConfigFile(
+  rootDir: string,
+  configName: string,
+  distance: number = 3
+) {
+  const configPath = `${rootDir}/${configName}`
+  let configModule
+  try {
+    configModule = require(configPath)
+  } catch (err) {
+    const nearMatch = await fs.readdir(rootDir).then(files =>
+      files.find(file => {
+        const fileName = file.split(rootDir).pop()
+        return isNearMatch(fileName, configName, distance)
+      })
+    )
+    if (!testRequireError(configPath, err)) {
+      report.error(`Could not load ${configName}`, err)
+      process.exit(1)
+    } else if (nearMatch) {
+      console.log(``)
+      report.error(
+        `It looks like you were trying to add the config file? Please rename "${chalk.bold(
+          nearMatch
+        )}" to "${chalk.bold(configName)}"`
+      )
+      console.log(``)
+      process.exit(1)
+    }
+  }
+
+  return configModule
+}

packages/gatsby/src/bootstrap/index.js

@@ -10,12 +10,12 @@ const crypto = require(`crypto`)
 const del = require(`del`)
 
 const apiRunnerNode = require(`../utils/api-runner-node`)
-const testRequireError = require(`../utils/test-require-error`)
 const { graphql } = require(`graphql`)
 const { store, emitter } = require(`../redux`)
 const loadPlugins = require(`./load-plugins`)
 const { initCache } = require(`../utils/cache`)
 const report = require(`gatsby-cli/lib/reporter`)
+const getConfigFile = require(`./get-config-file`)
 
 // Show stack trace on unhandled promises.
 process.on(`unhandledRejection`, (reason, p) => {
@@ -72,16 +72,9 @@ module.exports = async (args: BootstrapArgs) => {
   // Try opening the site's gatsby-config.js file.
   activity = report.activityTimer(`open and validate gatsby-config.js`)
   activity.start()
-  let config
-  try {
-    // $FlowFixMe
-    config = preferDefault(require(`${program.directory}/gatsby-config`))
-  } catch (err) {
-    if (!testRequireError(`${program.directory}/gatsby-config`, err)) {
-      report.error(`Could not load gatsby-config`, err)
-      process.exit(1)
-    }
-  }
+  const config = await preferDefault(
+    getConfigFile(program.directory, `gatsby-config.js`)
+  )
 
   store.dispatch({
     type: `SET_SITE_CONFIG`,

packages/gatsby/src/bootstrap/load-plugins.js

@@ -60,10 +60,7 @@ const getBadExportsMessage = (badExports, exportType, apis) => {
     See https://www.gatsbyjs.org/docs/${exportType}-apis/ for the list of Gatsby ${capitalized} APIs`
 
   badExports.forEach(bady => {
-    const similarities = stringSimiliarity.findBestMatch(
-      bady.exportName,
-      apis
-    )
+    const similarities = stringSimiliarity.findBestMatch(bady.exportName, apis)
     message += `\n — `
     if (bady.pluginName == `default-site-plugin`) {
       message += `Your site's gatsby-${exportType}.js is exporting a variable named "${
@@ -72,9 +69,7 @@ const getBadExportsMessage = (badExports, exportType, apis) => {
     } else {
       message += `The plugin "${bady.pluginName}@${
         bady.pluginVersion
-      }" is exporting a variable named "${
-        bady.exportName
-      }" which isn't an API.`
+      }" is exporting a variable named "${bady.exportName}" which isn't an API.`
     }
     if (similarities.bestMatch.rating > 0.5) {
       message += ` Perhaps you meant to export "${

packages/gatsby/src/utils/webpack.config.js

@@ -290,7 +290,10 @@ module.exports = async (
               ]
               const isFramework = some(
                 vendorModuleList.map(vendor => {
-                  const regex = new RegExp(`[\\\\/]node_modules[\\\\/]${vendor}[\\\\/].*`, `i`)
+                  const regex = new RegExp(
+                    `[\\\\/]node_modules[\\\\/]${vendor}[\\\\/].*`,
+                    `i`
+                  )
                   return regex.test(module.resource)
                 })
               )