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 docs directory
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 primer/react@f5c831d.

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:

gatsby/packages/gatsby/src/utils/webpack-utils.ts

Lines 342 to 349 in bfa7f2d

	const js = ({
	modulesThatUseGatsby = [],
	...options
	}: {
	modulesThatUseGatsby?: Array<IModuleThatUseGatsby>
	} = {}): RuleSetRule => {
	return {
	test: /\.(js|mjs|jsx)$/,

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

gatsby/packages/gatsby/src/utils/webpack-utils.ts

Lines 467 to 470 in bfa7f2d

	rules.eslint = (schema: GraphQLSchema): RuleSetRule => {
	return {
	enforce: `pre`,
	test: /\.jsx?$/,

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: primer/react#939

@vladar is this what you had in mind?