Skip to content

Eslint rule 'react/forbid-dom-props' doesn't work well with 'fbt:param' or 'fbt:plural' #2005

Closed
@mrtnzlml

Description

@mrtnzlml

An example error ofter running yarn eslint src/ya-comiste-backoffice/src/pos/ProductsSelected.js which used fbt:param:

yarn run v1.22.10
$ /Users/martinzlamal/Work/adeira/universe/node_modules/.bin/eslint src/ya-comiste-backoffice/src/pos/ProductsSelected.js

Oops! Something went wrong! :(

ESLint: 7.22.0

TypeError: Cannot read property 'toUpperCase' of undefined
Occurred while linting /Users/martinzlamal/Work/adeira/universe/src/ya-comiste-backoffice/src/pos/ProductsSelected.js:50
    at JSXAttribute (/Users/martinzlamal/Work/adeira/universe/node_modules/eslint-plugin-react/lib/rules/forbid-dom-props.js:74:40)
    at /Users/martinzlamal/Work/adeira/universe/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/martinzlamal/Work/adeira/universe/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/Users/martinzlamal/Work/adeira/universe/node_modules/eslint/lib/linter/node-event-generator.js:256:26)
    at NodeEventGenerator.applySelectors (/Users/martinzlamal/Work/adeira/universe/node_modules/eslint/lib/linter/node-event-generator.js:285:22)
    at NodeEventGenerator.enterNode (/Users/martinzlamal/Work/adeira/universe/node_modules/eslint/lib/linter/node-event-generator.js:299:14)
    at CodePathAnalyzer.enterNode (/Users/martinzlamal/Work/adeira/universe/node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:711:23)
    at /Users/martinzlamal/Work/adeira/universe/node_modules/eslint/lib/linter/linter.js:954:32
    at Array.forEach (<anonymous>)
error Command failed with exit code 2.

Example code used in the aforementioned file:

<div className={styles('stats')}>
  <fbt desc="summary of selected items in POS">
    <fbt:param name="totalSelectedItems">{stats.totalSelectedItems}</fbt:param> items for{' '}
    <fbt:param name="totalPrice">
      <Money priceUnitAmount={stats.totalPrice} priceUnitAmountCurrency="MXN" />
    </fbt:param>
  </fbt>
</div>

Eslint rule setup:

'react/forbid-dom-props': [
  ERROR,
  {
    forbid: [
      'class', // https://reactjs.org/docs/dom-elements.html#classname
      'for', // https://reactjs.org/docs/dom-elements.html#htmlfor
    ],
  },
],

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions