TypeError: Error while loading rule 'react/jsx-key': ruleCreator is not a function

Question

What does this error mean? And how do I resolve it?:

/home/jmunsch/PycharmProjects/testing/node_modules/gulp-eslint/node_modules/eslint/lib/eslint.js:706
                    throw ex;
                    ^

TypeError: Error while loading rule 'react/jsx-key': ruleCreator is not a function
    at /home/jmunsch/PycharmProjects/testing/node_modules/gulp-eslint/node_modules/eslint/lib/eslint.js:692:28
    at Array.forEach (<anonymous>)
    at EventEmitter.module.exports.api.verify (/home/jmunsch/PycharmProjects/testing/node_modules/gulp-eslint/node_modules/eslint/lib/eslint.js:671:16)
    at processText (/home/jmunsch/PycharmProjects/testing/node_modules/gulp-eslint/node_modules/eslint/lib/cli-engine.js:230:27)
    at CLIEngine.executeOnText (/home/jmunsch/PycharmProjects/testing/node_modules/gulp-eslint/node_modules/eslint/lib/cli-engine.js:686:26)
    at verify (/home/jmunsch/PycharmProjects/testing/node_modules/gulp-eslint/index.js:20:23)
    at Transform._transform (/home/jmunsch/PycharmProjects/testing/node_modules/gulp-eslint/index.js:68:18)
    at Transform._read (_stream_transform.js:186:10)
    at Transform._write (_stream_transform.js:174:12)
    at doWrite (_stream_writable.js:396:12)
    at writeOrBuffer (_stream_writable.js:382:5)
    at Transform.Writable.write (_stream_writable.js:290:11)
    at write (/home/jmunsch/PycharmProjects/testing/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/home/jmunsch/PycharmProjects/testing/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:632:7)
    at DestroyableTransform.pipeOnReadable (/home/jmunsch/PycharmProjects/testing/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:664:5)
    at emitNone (events.js:106:13)
    at DestroyableTransform.emit (events.js:208:7)
    at emitReadable_ (/home/jmunsch/PycharmProjects/testing/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:448:10)
    at emitReadable (/home/jmunsch/PycharmProjects/testing/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:444:5)
    at readableAddChunk (/home/jmunsch/PycharmProjects/testing/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:187:9)
    at DestroyableTransform.Readable.push (/home/jmunsch/PycharmProjects/testing/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:149:10)
    at DestroyableTransform.Transform.push (/home/jmunsch/PycharmProjects/testing/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_transform.js:145:32)

• https://github.com/palantir/tslint-react/issues/101
• https://github.com/Microsoft/vscode-eslint/issues/159

Answer 1

I'm posting a question and answer because there weren't too many places to find information about eslint ruleCreator, and what this particular error meant.

However, see:

• https://eslint.org/docs/developer-guide/working-with-rules
• https://eslint.org/blog/2016/07/eslint-new-rule-format#eslints-new-rule-format

For example looking at the types of rules I had defined, I added a console.log in eslint.js:

[11:50:44] Starting 'lintTest'...
comma-dangle
no-cond-assign
no-console
no-constant-condition
no-control-regex
no-debugger
no-dupe-args
no-dupe-keys
no-duplicate-case
no-empty
no-ex-assign
no-extra-boolean-cast
no-extra-semi
no-func-assign
no-inner-declarations
no-invalid-regexp
no-irregular-whitespace
no-negated-in-lhs
no-obj-calls
no-regex-spaces
no-sparse-arrays
no-unreachable
use-isnan
valid-jsdoc
valid-typeof
consistent-return
curly
default-case
dot-notation
eqeqeq
guard-for-in
no-alert
no-caller
no-div-regex
no-empty-label
no-eq-null
no-eval
no-extend-native
no-extra-bind
no-fallthrough
no-floating-decimal
no-implied-eval
no-iterator
no-labels
no-lone-blocks
no-loop-func
no-multi-spaces
no-multi-str
no-native-reassign
no-new
no-new-func
no-new-wrappers
no-octal
no-octal-escape
no-param-reassign
no-process-env
no-proto
no-redeclare
no-script-url
no-self-compare
no-sequences
no-throw-literal
no-unused-expressions
no-void
no-with
vars-on-top
wrap-iife
no-catch-shadow
no-delete-var
no-label-var
no-shadow
no-shadow-restricted-names
no-undef
no-undef-init
no-undefined
no-unused-vars
no-use-before-define
jsx-quotes
indent
brace-style
comma-spacing
comma-style
consistent-this
eol-last
key-spacing
max-nested-callbacks
new-cap
new-parens
no-array-constructor
no-lonely-if
no-mixed-spaces-and-tabs
no-multiple-empty-lines
no-nested-ternary
no-new-object
no-spaced-func
no-trailing-spaces
one-var
padded-blocks
quote-props
quotes
semi
semi-spacing
space-after-keywords
space-before-blocks
space-before-function-paren
space-in-parens
space-infix-ops
space-unary-ops
no-var
generator-star-spacing
max-depth
max-len
max-params
react/jsx-key
/home/jmunsch/PycharmProjects/testing/node_modules/gulp-eslint/node_modules/eslint/lib/eslint.js:706
                    throw ex;
                    ^

What this suggests is that there is a rule "react/jsx-key" that is defined in the configuration, but eslint doesn't know how to look the rule up.

I came to the realization that I was missing a dependency with the rule definition / schema.

I resolved my issue by:

rm -rf node_modules
npm i
npm i --save-dev eslint-plugin-react

For more details see:

• https://github.com/yannickcr/eslint-plugin-react/blob/7dce90a4f570847b33eaefddb8d9bb7d6eca9dc5/tests/lib/rules/jsx-key.js#L27
• https://github.com/yannickcr/eslint-plugin-react/blob/7dce90a4f570847b33eaefddb8d9bb7d6eca9dc5/docs/rules/jsx-key.md