Gatsby config validation should suggest related keys

Summary

When running a gatsby site the gatsby-config is validated. The error message is quite long due to multiple instances of the failed validation error that appear after the initial ValidationError. The error also doesn’t suggest any possible mis-spellings, so a user new to Gatsby can become frustrated fairly easily, not knowing that plugin should be plugins.

full error log

➜ yarn workspace scotchy-site develop
yarn workspace v1.13.0
yarn run v1.13.0
$ gatsby develop
⠁ The site's gatsby-config.js failed validation
ValidationError: "plugin" is not allowed
error The site's gatsby-config.js failed validation


  Error: The site's gatsby-config.js failed validation

  - config.js:29 module.exports
    [Scotch-gastby-theme-demo]/[gatsby]/dist/redux/reducers/config.js:29:17

  - redux.js:451 combination
    [Scotch-gastby-theme-demo]/[redux]/lib/redux.js:451:29

  - redux.js:211 dispatch
    [Scotch-gastby-theme-demo]/[redux]/lib/redux.js:211:22

  - index.js:89 Object.action [as dispatch]
    [Scotch-gastby-theme-demo]/[gatsby]/dist/redux/index.js:89:91

  - index.js:117
    [Scotch-gastby-theme-demo]/[gatsby]/dist/bootstrap/index.js:117:11

  - Generator.next

  - util.js:16 tryCatcher
    [Scotch-gastby-theme-demo]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [Scotch-gastby-theme-demo]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [Scotch-gastby-theme-demo]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [Scotch-gastby-theme-demo]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [Scotch-gastby-theme-demo]/[bluebird]/js/release/promise.js:694:18

  - promise.js:638 Promise._fulfill
    [Scotch-gastby-theme-demo]/[bluebird]/js/release/promise.js:638:18

  - promise.js:432 Promise._resolveCallback
    [Scotch-gastby-theme-demo]/[bluebird]/js/release/promise.js:432:57

  - promise.js:524 Promise._settlePromiseFromHandler
    [Scotch-gastby-theme-demo]/[bluebird]/js/release/promise.js:524:17


error UNHANDLED REJECTION


  Error: The site's gatsby-config.js failed validation

  - config.js:29 module.exports
    [Scotch-gastby-theme-demo]/[gatsby]/dist/redux/reducers/config.js:29:17

  - redux.js:451 combination
    [Scotch-gastby-theme-demo]/[redux]/lib/redux.js:451:29

  - redux.js:211 dispatch
    [Scotch-gastby-theme-demo]/[redux]/lib/redux.js:211:22

  - index.js:89 Object.action [as dispatch]
    [Scotch-gastby-theme-demo]/[gatsby]/dist/redux/index.js:89:91

  - index.js:117
    [Scotch-gastby-theme-demo]/[gatsby]/dist/bootstrap/index.js:117:11

  - Generator.next

  - util.js:16 tryCatcher
    [Scotch-gastby-theme-demo]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [Scotch-gastby-theme-demo]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [Scotch-gastby-theme-demo]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [Scotch-gastby-theme-demo]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [Scotch-gastby-theme-demo]/[bluebird]/js/release/promise.js:694:18

  - promise.js:638 Promise._fulfill
    [Scotch-gastby-theme-demo]/[bluebird]/js/release/promise.js:638:18

  - promise.js:432 Promise._resolveCallback
    [Scotch-gastby-theme-demo]/[bluebird]/js/release/promise.js:432:57

  - promise.js:524 Promise._settlePromiseFromHandler
    [Scotch-gastby-theme-demo]/[bluebird]/js/release/promise.js:524:17


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1
Command: /Users/chris/.nvm/versions/node/v10.6.0/bin/node
Arguments: /usr/local/Cellar/yarn/1.13.0/libexec/lib/cli.js develop
Directory: /Users/chris/tmp/Scotch-gastby-theme-demo/site
Output:

Basic example

I’d like to see the output truncated to exclude the duplicate errors and also add a suggested option based on Levenshtein distance to possible valid keys.

➜ yarn workspace scotchy-site develop
yarn workspace v1.13.0
yarn run v1.13.0
$ gatsby develop
⠁ The site's gatsby-config.js failed validation
ValidationError: the key "plugin" is not allowed, did you mean "plugins"?

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1
Command: /Users/chris/.nvm/versions/node/v10.6.0/bin/node
Arguments: /usr/local/Cellar/yarn/1.13.0/libexec/lib/cli.js develop
Directory: /Users/chris/tmp/Scotch-gastby-theme-demo/site
Output:

Motivation

Why are we doing this? What use cases does it support? What is the expected outcome?

This change supports people new to Gatsby and new to reading error messages in general by showing less “noise” and providing helpful suggestions, making Gatsby an even friendlier tool for newcomers.

[DZuz14]

@DSchau Im going to work on this. I’ve been doing some snooping around and is this where we should be doing the check?

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/bootstrap/load-plugins/index.js

Perhaps test the flattened array for the typos before it goes any further and tries to load any of the plugins via the load.js file?

[jlengstorf]

It looks like we’ve started some of this work here: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-cli/src/did-you-mean.js

So that’s probably the best place to start. Thanks!