ESlint CLI returns a malformed JSON output when importing Gatsby custom ESlint rules.

[llemaitre19]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• [X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

The ESlint CLI with --format json and --rulesdir node_modules/gatsby/dist/utils/eslint-rules flags on a Gatsby project returns a malformed JSON (extra new lines) that my code editor (Emacs) can't parse.

Please read the issue opened on the ESlint side for more details : https://github.com/eslint/eslint/issues/17563 .

Reproduction Link

https://github.com/llemaitre19/gatsby-eslint-json-issue-demo

Steps to Reproduce

Run ./node_modules/eslint/bin/eslint.js --format json --rulesdir node_modules/gatsby/dist/utils/eslint-rules ./src/pages/index.js at the root of the Gatsby project.

Expected Result

[{"filePath":"/home/loic/Travail/Temp/gatsby-eslint-json-issue-demo/src/pages/index.js","messages":[{"ruleId":"prettier/prettier","severity":2,"message":"Insert `;`","line":1,"column":31,"nodeType":null,"messageId":"insert","endLine":1,"endColumn":31,"fix":{"range":[30,30],"text":";"}}],"errorCount":1,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":1,"fixableWarningCount":0,"source":"import * as React from 'react'\nimport Seo from '../components/Seo';\nimport Layout from '../components/Layout';\n\n// styles\nconst headingStyles = {\n  marginTop: 0,\n  marginBottom: 64,\n  maxWidth: 320,\n};\nconst headingAccentStyles = {\n  color: '#663399',\n};\nconst paragraphStyles = {\n  marginBottom: 48,\n};\nconst codeStyles = {\n  color: '#8A6534',\n  padding: 4,\n  backgroundColor: '#FFF4DB',\n  fontSize: '1.25rem',\n  borderRadius: 4,\n};\nconst listStyles = {\n  marginBottom: 96,\n  paddingLeft: 0,\n};\nconst listItemStyles = {\n  fontWeight: 300,\n  fontSize: 24,\n  maxWidth: 560,\n  marginBottom: 30,\n};\n\nconst linkStyle = {\n  color: '#8954A8',\n  fontWeight: 'bold',\n  fontSize: 16,\n  verticalAlign: '5%',\n};\n\nconst docLinkStyle = {\n  ...linkStyle,\n  listStyleType: 'none',\n  marginBottom: 24,\n};\n\nconst descriptionStyle = {\n  color: '#232129',\n  fontSize: 14,\n  marginTop: 10,\n  marginBottom: 0,\n  lineHeight: 1.25,\n};\n\nconst docLink = {\n  text: 'Documentation',\n  url: 'https://www.gatsbyjs.com/docs/',\n  color: '#8954A8',\n};\n\nconst badgeStyle = {\n  color: '#fff',\n  backgroundColor: '#088413',\n  border: '1px solid #088413',\n  fontSize: 11,\n  fontWeight: 'bold',\n  letterSpacing: 1,\n  borderRadius: 4,\n  padding: '4px 6px',\n  display: 'inline-block',\n  position: 'relative',\n  top: -2,\n  marginLeft: 10,\n  lineHeight: 1,\n};\n\n// data\nconst links = [\n  {\n    text: 'Tutorial',\n    url: 'https://www.gatsbyjs.com/docs/tutorial/',\n    description:\n      \"A great place to get started if you're new to web development. Designed to guide you through setting up your first Gatsby site.\",\n    color: '#E95800',\n  },\n  {\n    text: 'How to Guides',\n    url: 'https://www.gatsbyjs.com/docs/how-to/',\n    description:\n      \"Practical step-by-step guides to help you achieve a specific goal. Most useful when you're trying to get something done.\",\n    color: '#1099A8',\n  },\n  {\n    text: 'Reference Guides',\n    url: 'https://www.gatsbyjs.com/docs/reference/',\n    description:\n      \"Nitty-gritty technical descriptions of how Gatsby works. Most useful when you need detailed information about Gatsby's APIs.\",\n    color: '#BC027F',\n  },\n  {\n    text: 'Conceptual Guides',\n    url: 'https://www.gatsbyjs.com/docs/conceptual/',\n    description:\n      'Big-picture explanations of higher-level Gatsby concepts. Most useful for building understanding of a particular topic.',\n    color: '#0D96F2',\n  },\n  {\n    text: 'Plugin Library',\n    url: 'https://www.gatsbyjs.com/plugins',\n    description:\n      'Add functionality and customize your Gatsby site or app with thousands of plugins built by our amazing developer community.',\n    color: '#8EB814',\n  },\n  {\n    text: 'Build and Host',\n    url: 'https://www.gatsbyjs.com/cloud',\n    badge: true,\n    description:\n      'Now you’re ready to show the world! Give your Gatsby site superpowers: Build and host on Gatsby Cloud. Get started for free!',\n    color: '#663399',\n  },\n];\n\n// markup\nfunction IndexPage() {\n  return (\n    <Layout>\n      <Seo />\n      <title>Home Page</title>\n      <h1 style={headingStyles}>\n        Congratulations\n        <br />\n        <span style={headingAccentStyles}>— you just made a Gatsby site! </span>\n        <span role=\"img\" aria-label=\"Party popper emojis\">\n          🎉🎉🎉\n        </span>\n      </h1>\n      <p style={paragraphStyles}>\n        Edit <code style={codeStyles}>src/pages/index.js</code> to see this page update in\n        real-time.{' '}\n        <span role=\"img\" aria-label=\"Sunglasses smiley emoji\">\n          😎\n        </span>\n      </p>\n      <ul style={listStyles}>\n        <li style={docLinkStyle}>\n          <a\n            style={linkStyle}\n            href={`${docLink.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}\n          >\n            {docLink.text}\n          </a>\n        </li>\n        {links.map(link => (\n          <li key={link.url} style={{...listItemStyles, color: link.color}}>\n            <span>\n              <a\n                style={linkStyle}\n                href={`${link.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}\n              >\n                {link.text}\n              </a>\n              {link.badge && (\n                <span style={badgeStyle} aria-label=\"New Badge\">\n                  NEW!\n                </span>\n              )}\n              <p style={descriptionStyle}>{link.description}</p>\n            </span>\n          </li>\n        ))}\n      </ul>\n      <img\n        alt=\"Gatsby G Logo\"\n        src=\"data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 110 20 10 10 0 010-20zm0 2c-3.73 0-6.86 2.55-7.75 6L14 19.75c3.45-.89 6-4.02 6-7.75h-5.25v1.5h3.45a6.37 6.37 0 01-3.89 4.44L6.06 9.69C7 7.31 9.3 5.63 12 5.63c2.13 0 4 1.04 5.18 2.65l1.23-1.06A7.959 7.959 0 0012 4zm-8 8a8 8 0 008 8c.04 0 .09 0-8-8z' fill='%23639'/%3E%3C/svg%3E\"\n      />\n    </Layout>\n  );\n}\n\nexport default IndexPage;\n","usedDeprecatedRules":[{"ruleId":"lines-around-directive","replacedBy":["padding-line-between-statements"]},{"ruleId":"global-require","replacedBy":[]},{"ruleId":"no-buffer-constructor","replacedBy":[]},{"ruleId":"no-new-require","replacedBy":[]},{"ruleId":"no-path-concat","replacedBy":[]}]}]

Actual Result

[{"filePath":"/home/loic/Travail/Temp/gatsby-eslint-json-issue-demo/src/pages/index.js","messages":[{"ruleId":"prettier/prettier","severity":2,"message":"Insert `;`","line":1,"column":31,"nodeType":null,"messa
geId":"insert","endLine":1,"endColumn":31,"fix":{"range":[30,30],"text":";"}}],"errorCount":1,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":1,"fixableWarningCount":0,"source":"import * as React from
 'react'\nimport Seo from '../components/Seo';\nimport Layout from '../components/Layout';\n\n// styles\nconst headingStyles = {\n  marginTop: 0,\n  marginBottom: 64,\n  maxWidth: 320,\n};\nconst
headingAccentStyles = {\n  color: '#663399',\n};\nconst paragraphStyles = {\n  marginBottom: 48,\n};\nconst codeStyles = {\n  color: '#8A6534',\n  padding: 4,\n  backgroundColor: '#FFF4DB',\n  fontSize:
'1.25rem',\n  borderRadius: 4,\n};\nconst listStyles = {\n  marginBottom: 96,\n  paddingLeft: 0,\n};\nconst listItemStyles = {\n  fontWeight: 300,\n  fontSize: 24,\n  maxWidth: 560,\n  marginBottom:
30,\n};\n\nconst linkStyle = {\n  color: '#8954A8',\n  fontWeight: 'bold',\n  fontSize: 16,\n  verticalAlign: '5%',\n};\n\nconst docLinkStyle = {\n  ...linkStyle,\n  listStyleType: 'none',\n  marginBottom:
24,\n};\n\nconst descriptionStyle = {\n  color: '#232129',\n  fontSize: 14,\n  marginTop: 10,\n  marginBottom: 0,\n  lineHeight: 1.25,\n};\n\nconst docLink = {\n  text: 'Documentation',\n  url:
'https://www.gatsbyjs.com/docs/',\n  color: '#8954A8',\n};\n\nconst badgeStyle = {\n  color: '#fff',\n  backgroundColor: '#088413',\n  border: '1px solid #088413',\n  fontSize: 11,\n  fontWeight: 'bold',\n
letterSpacing: 1,\n  borderRadius: 4,\n  padding: '4px 6px',\n  display: 'inline-block',\n  position: 'relative',\n  top: -2,\n  marginLeft: 10,\n  lineHeight: 1,\n};\n\n// data\nconst links = [\n  {\n
text: 'Tutorial',\n    url: 'https://www.gatsbyjs.com/docs/tutorial/',\n    description:\n      \"A great place to get started if you're new to web development. Designed to guide you through setting up your
first Gatsby site.\",\n    color: '#E95800',\n  },\n  {\n    text: 'How to Guides',\n    url: 'https://www.gatsbyjs.com/docs/how-to/',\n    description:\n      \"Practical step-by-step guides to help you
achieve a specific goal. Most useful when you're trying to get something done.\",\n    color: '#1099A8',\n  },\n  {\n    text: 'Reference Guides',\n    url: 'https://www.gatsbyjs.com/docs/reference/',\n
description:\n      \"Nitty-gritty technical descriptions of how Gatsby works. Most useful when you need detailed information about Gatsby's APIs.\",\n    color: '#BC027F',\n  },\n  {\n    text: 'Conceptual
Guides',\n    url: 'https://www.gatsbyjs.com/docs/conceptual/',\n    description:\n      'Big-picture explanations of higher-level Gatsby concepts. Most useful for building understanding of a particular
topic.',\n    color: '#0D96F2',\n  },\n  {\n    text: 'Plugin Library',\n    url: 'https://www.gatsbyjs.com/plugins',\n    description:\n      'Add functionality and customize your Gatsby site or app with
thousands of plugins built by our amazing developer community.',\n    color: '#8EB814',\n  },\n  {\n    text: 'Build and Host',\n    url: 'https://www.gatsbyjs.com/cloud',\n    badge: true,\n    description:\n
      'Now you’re ready to show the world! Give your Gatsby site superpowers: Build and host on Gatsby Cloud. Get started for free!',\n    color: '#663399',\n  },\n];\n\n// markup\nfunction IndexPage() {\n
return (\n    <Layout>\n      <Seo />\n      <title>Home Page</title>\n      <h1 style={headingStyles}>\n        Congratulations\n        <br />\n        <span style={headingAccentStyles}>— you just made a
Gatsby site! </span>\n        <span role=\"img\" aria-label=\"Party popper emojis\">\n          🎉🎉🎉\n        </span>\n      </h1>\n      <p style={paragraphStyles}>\n        Edit <code
style={codeStyles}>src/pages/index.js</code> to see this page update in\n        real-time.{' '}\n        <span role=\"img\" aria-label=\"Sunglasses smiley emoji\">\n          😎\n        </span>\n      </p>\n
      <ul style={listStyles}>\n        <li style={docLinkStyle}>\n          <a\n            style={linkStyle}\n
href={`${docLink.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}\n          >\n            {docLink.text}\n          </a>\n        </li>\n        {links.map(link => (\n
<li key={link.url} style={{...listItemStyles, color: link.color}}>\n            <span>\n              <a\n                style={linkStyle}\n
href={`${link.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}\n              >\n                {link.text}\n              </a>\n              {link.badge && (\n
<span style={badgeStyle} aria-label=\"New Badge\">\n                  NEW!\n                </span>\n              )}\n              <p style={descriptionStyle}>{link.description}</p>\n            </span>\n
       </li>\n        ))}\n      </ul>\n      <img\n        alt=\"Gatsby G Logo\"\n        src=\"data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12
 2a10 10 0 110 20 10 10 0 010-20zm0 2c-3.73 0-6.86 2.55-7.75 6L14 19.75c3.45-.89 6-4.02 6-7.75h-5.25v1.5h3.45a6.37 6.37 0 01-3.89 4.44L6.06 9.69C7 7.31 9.3 5.63 12 5.63c2.13 0 4 1.04 5.18 2.65l1.23-1.06A7.959
7.959 0 0012 4zm-8 8a8 8 0 008 8c.04 0 .09 0-8-8z' fill='%23639'/%3E%3C/svg%3E\"\n      />\n    </Layout>\n  );\n}\n\nexport default
IndexPage;\n","usedDeprecatedRules":[{"ruleId":"lines-around-directive","replacedBy":["padding-line-between-statements"]},{"ruleId":"global-require","replacedBy":[]},{"ruleId":"no-buffer-constructor","replaced
By":[]},{"ruleId":"no-new-require","replacedBy":[]},{"ruleId":"no-path-concat","replacedBy":[]}]}]

Environment

System:
    OS: Linux 6.2 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.17.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.7 - /usr/local/bin/npm
  npmPackages:
    gatsby: ^4.4.0 => 4.4.0
    gatsby-plugin-image: ^2.4.0 => 2.4.0
    gatsby-plugin-manifest: ^4.4.0 => 4.4.0
    gatsby-plugin-postcss: ^5.4.0 => 5.4.0
    gatsby-plugin-react-helmet: ^5.4.0 => 5.4.0
    gatsby-plugin-react-svg: ^3.1.0 => 3.1.0
    gatsby-plugin-sharp: ^4.4.0 => 4.4.0
    gatsby-plugin-sitemap: ^5.4.0 => 5.4.0
    gatsby-source-filesystem: ^4.4.0 => 4.4.0
    gatsby-transformer-sharp: ^4.4.0 => 4.4.0
  npmGlobalPackages:
    gatsby-cli: 5.12.1

Config Flags

No response

[llemaitre19]

Some investigation done by ESlint team points out that the problem comes from the Gatsby patched version of console.log, which some of the logic would be here : https://github.com/gatsbyjs/gatsby/blob/3e9279563f76cef4e6a25ccb52aef85b5f6c2b6d/packages/gatsby-cli/src/reporter/patch-console.ts#L9-L12