Gatsby: TypeError on live reload

[colebemis]

Description

Here's a video demo of this issue: https://www.loom.com/share/64492f6a228446d695ae75c0ed8f92d3?sharedAppSource=personal_library

Live reload is broken when running the docs site locally. Making changes to any markdown file results in this error message in the terminal:

error (intermediate value)(intermediate value)(intermediate value) is not iterable


  TypeError: (intermediate value)(intermediate value)(intermediate value) is not iterable

  - gatsby-webpack-eslint-graphql-schema-reload-plugin.ts:28 GatsbyWebpackEslintGraphqlSchemaReload.findEslintOptions
    [docs]/[gatsby]/src/utils/gatsby-webpack-eslint-graphql-schema-reload-plugin.ts:28:11

  - gatsby-webpack-eslint-graphql-schema-reload-plugin.ts:49 
    [docs]/[gatsby]/src/utils/gatsby-webpack-eslint-graphql-schema-reload-plugin.ts:49:28


  - Compiler.js:665 
    [docs]/[webpack]/lib/Compiler.js:665:23


  - Compiler.js:662 Compiler.compile
    [docs]/[webpack]/lib/Compiler.js:662:28

  - Watching.js:77 done
    [docs]/[webpack]/lib/Watching.js:77:18


  - start-webpack-server.ts:71 
    [docs]/[gatsby]/src/services/start-webpack-server.ts:71:5



  - index.js:173 watchRunHook
    [docs]/[webpack-virtual-modules]/index.js:173:5


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [docs]/[tapable]/lib/Hook.js:154:20

  - Watching.js:41 Watching._go
    [docs]/[webpack]/lib/Watching.js:41:32

  - Watching.js:169 Watching._invalidate
    [docs]/[webpack]/lib/Watching.js:169:9

Steps to reproduce

1. Checkout the fix-reload-error branch of https://github.com/primer/components
2. Run yarn in the root and docs directories
3. Run yarn develop in the docsdirectory
4. Save a change to any markdown file in the docs/content directory
5. Notice that the page doesn't reload and there is an error in the terminal

Expected result

Making a change to a markdown file should trigger a quick reload of localhost:8000 with the changes reflected on the page.

Actual result

The page doesn't reload and there is an error in the terminal

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

System:
OS: macOS 10.15.7
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.4 - ~/.nvm/versions/node/v12.18.4/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.6 - ~/.nvm/versions/node/v12.18.4/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 86.0.4240.198
Firefox: 81.0.2
Safari: 14.0.1
npmPackages:
gatsby: 2.27.5 => 2.27.5
gatsby-plugin-alias-imports: ^1.0.5 => 1.0.5

Additional context

I ran git bisect and it appears the commit that introduced this error was https://github.com/primer/components/commit/f5c831d39c10e32aa4dd96ee7168d9435ecd8bad.

My guess is that the relevant change is the Gatsby upgrade in the yarn.lock file:

[vladar]

Hey @colebemis !

Thanks for opening this! It is pretty funny actually. You remove gatsby's eslint loader in your gatsby-node here:

  config.module.rules = [
    // Remove the original rule that compiles `.js`. and `.jsx` files...
    ...config.module.rules.filter(rule => String(rule.test) !== String(/\.jsx?$/)),
    // ...and replace it with a custom configuration.
    {

I assume when you've added this code it was actually removing the js loader. But we've changed the pattern in #14111. Now we use this for js loader:

https://github.com/gatsbyjs/gatsby/blob/bfa7f2d76beb98c9c77c756287c4a84a2c4074f8/packages/gatsby/src/utils/webpack-utils.ts#L342-L349

But we also use the /\.jsx?$/ pattern for eslint loader!

https://github.com/gatsbyjs/gatsby/blob/bfa7f2d76beb98c9c77c756287c4a84a2c4074f8/packages/gatsby/src/utils/webpack-utils.ts#L467-L470

And some code in gatsby expects eslint loader to be there. When it's not there - it fails hard :)

Gatsby shouldn't fail in this case, so I've opened a PR that makes it more robust - #28494

But you can also fix it in your code by not removing the eslint loader 😉

[colebemis]

@vladar Thank you ❤️ That would have taken me forever to figure out myself!

[colebemis]

I'll try out your solution and close this issue if it works 😄

[colebemis]

Here's a PR with a fix in our repo: https://github.com/primer/components/pull/939

@vladar is this what you had in mind?