Gatsby: [1.0] Add eslint-loader including eslint-plugin-graphql

[KyleAMathews]

Debugging GraphQL is a barrier to many people as most people aren't yet familiar with GraphQL. This would help a lot.

https://github.com/apollographql/eslint-plugin-graphql

For the rest of the eslint config, we should just copy CRA.

[cr101]

graphql-cli was announced today and it would be awesome if GatsbyJS worked with it out of the box

[454de6e]

Is there an example on how to configure eslint-plugin-graphql to make it work with Gatsby GraphQL queries?

[ryami333]

I considered creating gatsby-plugin-eslint, but for some reason you're not allowed to use enforce: "pre" in loader config, which is a bit of a deal breaker.

[jarodtaylor]

I added eslint-loader, by adding it to my gatsby-node.js file:

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === 'develop') {
    config.preLoader('eslint-loader', {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
    });
  }
  return config;
};

It all seems to work fine, but when an eslint error pops up, it kills HMR, so I wanted to add in emitWarning: true to stop it from happening:

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === 'develop') {
    config.preLoader('eslint-loader', {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      options: {
        emitWarning: false,
      },
    });
  }
  return config;
};

Unfortunately, it fails:

There were errors with your webpack config:
[1]
module.preLoaders.0.options
object.allowUnknown , "options" is not allowed


Your Webpack config does not appear to be valid. This could be because of
something you added or a plugin. If you don't recognize the invalid keys listed
above try removing plugins and rebuilding to identify the culprit.
error Command failed with exit code 1.

[pieh]

@jarodtaylor check https://www.npmjs.com/package/webpack-configurator#configloaderkey-config-resolver - specifically "Config as an object with a resolver function.". options was not there in webpack 1 which gatsby currently uses

[jarodtaylor]

Thanks, @pieh. Yeah, I keep getting caught up in the Webpack 1/2/3 incompatibilities.

For anyone that stumbles across this and wants to find the solution. I was able to get it to work using config.merge instead:

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === 'develop') {
    config.preLoader('eslint-loader', {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
    });
    config.merge({
      eslint: {
        emitWarning: true,
      }
    });
  }
  return config;
};

[kkemple]

I'll be taking this on and rolling up all eslint work!

[m-allanson]

Done in #4893, thanks @kkemple! 🎉