Gatsby: Gatsby config validation should suggest related keys

Created on 4 Mar 2019  ·  21Comments  ·  Source: gatsbyjs/gatsby

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.

good first issue
Source
picture ChristopherBiscardi

All 21 comments

@ChristopherBiscardi @DSchau I can take a whack at this one, if that's cool with you gents.

ryancharris picture ryancharris on 5 Mar 2019
❤1

@ryancharris of course! Let us know if @gatsbyjs/core can help out further!

DSchau picture DSchau on 5 Mar 2019

@DSchau Sweet! I'm sure I'll have some questions as I get more familiar with the codebase 👍

ryancharris picture ryancharris on 5 Mar 2019

Related to this issue, plugins added in gatsby-config will silently fail if there are typos in the plugin options. Simply misspelling 'options' in any plugin won't show any errors, but the plugin will not load. This can be a headache for anybody to debug (not just Gatsby newcomers)

Quick twitter convo with @DSchau @jlengstorf regarding this https://twitter.com/jonlowforever/status/1102820897398767617

jonlow picture jonlow on 6 Mar 2019

@ChristopherBiscardi To clarify, do you not want to see the stack trace in the logs? I was doing some testing last night and only saw a single stack trace, not duplicates like you have above.

Or were you referring to these as duplicates?

⠁ The site's gatsby-config.js failed validation
ValidationError: "plugin" is not allowed
error The site's gatsby-config.js failed validation

However, in the ValidationError I was seeing duplicate errors re: keys that aren't allowed. Do we want to list all of them at once or just show the first invalid key, so the user knows which to fix?

ryancharris picture ryancharris on 6 Mar 2019

@ryancharris I'd be happy with listing all invalid top-level keys so that people don't have to re-run the process to find each spelling issue if they have multiple to fix. Really any suggestions is better than today's behavior (no suggestions) though.

If you're not seeing duplicates then don't worry about the stack trace stuff

ChristopherBiscardi picture ChristopherBiscardi on 6 Mar 2019
👍1

@ChristopherBiscardi Sounds good to me. I have the top level keys stuff pretty much working. Just gotta take care of the suggestions.

ryancharris picture ryancharris on 15 Mar 2019

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

gatsbot[bot] picture gatsbot[bot] on 5 Apr 2019

Hey, @ryancharris! How's it going with this feature? Anything we can do to help?

jlengstorf picture jlengstorf on 15 Apr 2019

Hi,
Found this issue while going through good first issues. Have done some preliminary research on how this was implemented in other CLIs. Wordpress CLI has this feature. The discussion is on the following two threads:
https://github.com/wp-cli/wp-cli/issues/3861
https://github.com/wp-cli/wp-cli/issues/4379

They basically have a two pronged approach to solving this problem:

  1. They find out the distance between the user entered key and allowed keys and suggest based on that
  2. They have a prebuilt dictionary of suggestions.

The first approach is taken from git which also does this when you type "git stati" it suggests "git status". The git implementation of the same can be found in https://github.com/git/git/blob/e0aaa1b6532cfce93d87af9bc813fb2e7a7ce9d7/help.c#L302

I can start working on this, if nobody else is.

sharat9211 picture sharat9211 on 28 May 2019

@sharat9211 we'd love to have your help! Thanks so much for digging into prior art!

jlengstorf picture jlengstorf on 28 May 2019

@jlengstorf Cool will start working on it. Where should I start looking at in the codebase?

sharat9211 picture sharat9211 on 29 May 2019

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!

jlengstorf picture jlengstorf on 29 May 2019
👍1

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

github-actions[bot] picture github-actions[bot] on 2 Dec 2019

Hey! 👋Is there any way I could help?

jeremyscatigna picture jeremyscatigna on 11 Dec 2019

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

github-actions[bot] picture github-actions[bot] on 1 Jan 2020

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

github-actions[bot] picture github-actions[bot] on 11 Jan 2020

How is everything going on this? I know @ryancharris was working on this, so I wanted to see if he's still around with some of the validation code that he was working on.

To help, I came up with a list of all of the errors I could produce when it comes to misconfiguring the gatsby-config.js file. You can check them all out via this gist.

I wanted to create this list of errors because I receive different errors than Ryan originally posted about. I do not receive any output whatsoever that Gatsby even attempted to validate the config file. I did not include an example repo, as this can easily be reproduced by creating a new gatsby project and using the examples provided in the gist.

If we don't hear back from Ryan, I'd be glad to start working on this. I will definitely need some help.

DZuz14 picture DZuz14 on 19 Jan 2020

You should prob just go ahead and work on it and submit something. No one is responding clearly lol.

DZuz14 picture DZuz14 on 27 Mar 2020

@DZuz14 we're listening and seeing :) How can we help?

If @ryancharris is no longer working on this -- would be a great opportunity to take some prior work/art and continue with the work!

DSchau picture DSchau on 30 Mar 2020

@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?

DZuz14 picture DZuz14 on 31 Mar 2020
👀1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

andykais picture andykais  ·  3Comments
rossPatton picture rossPatton  ·  3Comments
brandonmp picture brandonmp  ·  3Comments
ferMartz picture ferMartz  ·  3Comments
totsteps picture totsteps  ·  3Comments