eslint crash on fresh typescript template with tiny changes to source code

[dbeckwith]

Describe the bug

Using the typescript template, eslint seems to be crashing on small changes to the source code.

Reproduction:

1. npx create-react-app --template typescript
2. edit src/App.tsx, change L18 to target={3}
3. run npm start
4. eslint crashes

terminal output:

Starting the development server...

$PROJECT/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

TypeError: attr.value.expression.value.toLowerCase is not a function
Occurred while linting $PROJECT/src/App.tsx:18
    at isTargetBlank ($PROJECT/node_modules/eslint-plugin-react/lib/rules/jsx-no-target-blank.js:26:38)
    at JSXAttribute ($PROJECT/node_modules/eslint-plugin-react/lib/rules/jsx-no-target-blank.js:94:15)
    at $PROJECT/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit ($PROJECT/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector ($PROJECT/node_modules/eslint/lib/linter/node-event-generator.js:254:26)
    at NodeEventGenerator.applySelectors ($PROJECT/node_modules/eslint/lib/linter/node-event-generator.js:283:22)
    at NodeEventGenerator.enterNode ($PROJECT/node_modules/eslint/lib/linter/node-event-generator.js:297:14)
    at CodePathAnalyzer.enterNode ($PROJECT/node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:711:23)
    at $PROJECT/node_modules/eslint/lib/linter/linter.js:952:32 {
  currentNode: <ref *1> {
    type: 'JSXAttribute',
    name: {
      type: 'JSXIdentifier',
      name: 'target',
      range: [ 406, 412 ],
      loc: {
        start: { line: 18, column: 10 },
        end: { line: 18, column: 16 }
      },
      parent: [Circular *1]
    },
    value: <ref *2> {
      type: 'JSXExpressionContainer',
      expression: {
        type: 'Literal',
        value: 3,
        raw: '3',
        range: [ 414, 415 ],
        loc: {
          start: { line: 18, column: 18 },
          end: { line: 18, column: 19 }
        },
        parent: [Circular *2]
      },
      range: [ 413, 416 ],
      loc: {
        start: { line: 18, column: 17 },
        end: { line: 18, column: 20 }
      },
      parent: [Circular *1]
    },
    range: [ 406, 416 ],
    loc: { start: { line: 18, column: 10 }, end: { line: 18, column: 20 } },
    parent: <ref *3> {
      type: 'JSXOpeningElement',
      typeParameters: undefined,
      selfClosing: false,
      name: {
        type: 'JSXIdentifier',
        name: 'a',
        range: [ 326, 327 ],
        loc: {
          start: { line: 15, column: 9 },
          end: { line: 15, column: 10 }
        },
        parent: [Circular *3]
      },
      attributes: [
        <ref *4> {
          type: 'JSXAttribute',
          name: {
            type: 'JSXIdentifier',
            name: 'className',
            range: [Array],
            loc: [Object],
            parent: [Circular *4]
          },
          value: {
            type: 'Literal',
            raw: '"App-link"',
            value: 'App-link',
            range: [Array],
            loc: [Object],
            parent: [Circular *4]
          },
          range: [ 338, 358 ],
          loc: { start: [Object], end: [Object] },
          parent: [Circular *3]
        },
        <ref *5> {
          type: 'JSXAttribute',
          name: {
            type: 'JSXIdentifier',
            name: 'href',
            range: [Array],
            loc: [Object],
            parent: [Circular *5]
          },
          value: {
            type: 'Literal',
            raw: '"https://reactjs.org"',
            value: 'https://reactjs.org',
            range: [Array],
            loc: [Object],
            parent: [Circular *5]
          },
          range: [ 369, 395 ],
          loc: { start: [Object], end: [Object] },
          parent: [Circular *3]
        },
        [Circular *1],
        <ref *6> {
          type: 'JSXAttribute',
          name: {
            type: 'JSXIdentifier',
            name: 'rel',
            range: [Array],
            loc: [Object],
            parent: [Circular *6]
          },
          value: {
            type: 'Literal',
            raw: '"noopener noreferrer"',
            value: 'noopener noreferrer',
            range: [Array],
            loc: [Object],
            parent: [Circular *6]
          },
          range: [ 427, 452 ],
          loc: { start: [Object], end: [Object] },
          parent: [Circular *3]
        }
      ],
      range: [ 325, 462 ],
      loc: { start: { line: 15, column: 8 }, end: { line: 20, column: 9 } },
      parent: <ref *8> {
        type: 'JSXElement',
        openingElement: [Circular *3],
        closingElement: <ref *7> {
          type: 'JSXClosingElement',
          name: {
            type: 'JSXIdentifier',
            name: 'a',
            range: [Array],
            loc: [Object],
            parent: [Circular *7]
          },
          range: [ 493, 497 ],
          loc: { start: [Object], end: [Object] },
          parent: [Circular *8]
        },
        children: [
          {
            type: 'JSXText',
            value: '\n          Learn React\n        ',
            raw: '\n          Learn React\n        ',
            range: [Array],
            loc: [Object],
            parent: [Circular *8]
          }
        ],
        range: [ 325, 497 ],
        loc: {
          start: { line: 15, column: 8 },
          end: { line: 22, column: 12 }
        },
        parent: <ref *9> {
          type: 'JSXElement',
          openingElement: {
            type: 'JSXOpeningElement',
            typeParameters: undefined,
            selfClosing: false,
            name: [Object],
            attributes: [Array],
            range: [Array],
            loc: [Object],
            parent: [Circular *9]
          },
          closingElement: {
            type: 'JSXClosingElement',
            name: [Object],
            range: [Array],
            loc: [Object],
            parent: [Circular *9]
          },
          children: [
            [Object],
            [Object],
            [Object],
            [Object],
            [Object],
            [Circular *8],
            [Object]
          ],
          range: [ 141, 513 ],
          loc: { start: [Object], end: [Object] },
          parent: {
            type: 'JSXElement',
            openingElement: [Object],
            closingElement: [Object],
            children: [Array],
            range: [Array],
            loc: [Object],
            parent: [Object]
          }
        }
      }
    }
  }
}
npm ERR! code 1
npm ERR! path $PROJECT
npm ERR! command failed
npm ERR! command sh -c react-scripts start

npm ERR! A complete log of this run can be found in:
npm ERR!     $HOME/.npm/_logs/2020-11-06T15_11_47_294Z-debug.log

Did you try recovering your dependencies?

I started with a fresh install of the typescript template. After deleting node_modules and package-lock.json and running npm install, I get an error resolving dependencies:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: typescript@4.0.5
npm ERR! node_modules/typescript
npm ERR!   typescript@"^4.0.5" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1" from react-scripts@4.0.0
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"4.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See $HOME/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     $HOME/.npm/_logs/2020-11-06T15_22_26_359Z-debug.log

Seems like this is covered by #9995, not sure if it's related to the main issue though.

Environment

Environment Info:

  current version of create-react-app: 4.0.0
  running from $HOME/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: Linux 4.15 Ubuntu 18.04.5 LTS (Bionic Beaver)
    CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
  Binaries:
    Node: 15.1.0 - ~/.config/nvm/15.1.0/bin/node
    Yarn: Not Found
    npm: 7.0.8 - ~/.config/nvm/15.1.0/bin/npm
  Browsers:
    Chrome: 86.0.4240.183
    Firefox: 82.0.2
  npmPackages:
    react: ^17.0.1 => 17.0.1 
    react-dom: ^17.0.1 => 17.0.1 
    react-scripts: 4.0.0 => 4.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

[dbeckwith]

After inspecting the error more, this looks like a problem with a specific eslint rule. Closing in favor of jsx-eslint/eslint-plugin-react#2851