Comments (36)
Getting TypeError: context.getScope is not a function
here
from eslint-plugin-react.
Eslint officially released v9.0.0 today. Hope this plugin will support it soon!
from eslint-plugin-react.
Nobody’s forcing you to upgrade to eslint 9 right away ¯\_(ツ)_/¯ new eslint majors always take months before everything supports them, and this one will take longer because it’s changing the default config format.
from eslint-plugin-react.
I'm not a maintainer here, but listing the details of what's failing is not going to help this move forward. The list will be obvious to anyone running the tests with v9. They effectively amount to "me too" comments that are only really serving to spam everyone with email.
If you look around, you'll see there is ongoing work towards v9 by contributors - #3743 and #3727. Be patient or help out. Adding extra comments here isn't going to help.
from eslint-plugin-react.
That expectation is flawed; the point of it being in beta is for plugins to begin to address the changes - announcements are irrelevant. Thanks for the report.
A fix for this will also need to add eslint 9 into the test matrix.
from eslint-plugin-react.
I found the ESLint Compatibility Utilities worked for me. CodeSandbox example:
https://codesandbox.io/p/devbox/billowing-tree-wp33ds
npm install --save-dev @eslint/compat
eslint.config.mjs
:
import { fixupConfigRules } from "@eslint/compat";
import reactRecommended from "eslint-plugin-react/configs/recommended.js";
import globals from "globals";
export default [
...fixupConfigRules(reactRecommended),
{
languageOptions: {
globals: {
...globals.browser,
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
},
rules: {
"react/react-in-jsx-scope": "off",
},
settings: {
react: {
version: "detect",
},
},
},
];
package.json
:
{
"scripts": {
"lint": "eslint"
},
"dependencies": {
"globals": "^15.2.0",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@eslint/compat": "^1.0.1",
"eslint": "^9.2.0",
"eslint-plugin-react": "^7.34.1"
}
}
from eslint-plugin-react.
Thanks for your work on this plugin, @ljharb! Seems totally reasonable to take some time to support ESLint 9, and anyone who reeeeeeally needs to be on the latest and greatest should consider hiring you (if you're available for such work) or volunteering their time to make it happen. Since I'm not able to do that myself at the moment, I'm happy to wait to upgrade ESLint.
from eslint-plugin-react.
@MirKml it'll likely be 6 months minimum before eslint 9 is made fully useful by the majority of the ecosystem supporting it; it normally takes 2-3 months for any eslint major, but eslint 9 is a much more disruptive change, so it'll probably take longer.
from eslint-plugin-react.
Also getting the error for these rules:
'react/no-direct-mutation-state': 0,
'react/require-render-return': 0,
'react/no-string-refs': 0,
'react/jsx-uses-react': 0,
'react/react-in-jsx-scope': 0,
'react/no-danger-with-children': 0,
'react/jsx-no-undef': 0,
'react/jsx-uses-vars': 0,
from eslint-plugin-react.
The same problem occurs with eslint-plugin-solid. fyi.
TypeError: context.getScope is not a function Occurred while linting /data/data/com.termux/files/home/LearnSolidJS/FirstApp/src/FibCounter.tsx:15 Rule: "solid/reactivity" at checkForReactiveAssignment (/data/data/com.termux/files/home/LearnSolidJS/node_modules/eslint-plugin-solid/dist/rules/reactivity.js:445:69) at VariableDeclarator (/data/data/com.termux/files/home/LearnSolidJS/node_modules/eslint-plugin-solid/dist/rules/reactivity.js:768:11) at ruleErrorHandler (/data/data/com.termux/files/usr/lib/node_modules/eslint/lib/linter/linter.js:1115:48) at /data/data/com.termux/files/usr/lib/node_modules/eslint/lib/linter/safe-emitter.js:45:58 at Array.forEach () at Object.emit (/data/data/com.termux/files/usr/lib/node_modules/eslint/lib/linter/safe-emitter.js:45:38) at NodeEventGenerator.applySelector (/data/data/com.termux/files/usr/lib/node_modules/eslint/lib/linter/node-event-generator.js:297:26) at NodeEventGenerator.applySelectors (/data/data/com.termux/files/usr/lib/node_modules/eslint/lib/linter/node-event-generator.js:326:22) at NodeEventGenerator.enterNode (/data/data/com.termux/files/usr/lib/node_modules/eslint/lib/linter/node-event-generator.js:340:14) at runRules (/data/data/com.termux/files/usr/lib/node_modules/eslint/lib/linter/linter.js:1154:40)
from eslint-plugin-react.
Hi,
I'm listing all the problematic rules that I faced when migrated to eslint 9 with the eslint-plugin-react:
react/no-string-refs
react/display-name
react/no-direct-mutation-state
react/require-render-return
react/jsx-no-undef
react/jsx-uses-vars
react/no-typos
react/no-array-index-key
react/prefer-stateless-function
react/no-access-state-in-setstate
react/jsx-fragments
react/jsx-max-depth
react/jsx-no-constructed-context-values
react/no-unstable-nested-components
react/function-component-definition
react/destructuring-assignment
react/no-unused-prop-types
from eslint-plugin-react.
Awesome, thanks for the pointers.
That will help get us unblocked for eslint 9, but we'll still have a lot of work to support eslint 10.
from eslint-plugin-react.
I'd like to continue using this plugin, but this bug is unfortunately stopping me.
I hope we get to see a fix soon!
from eslint-plugin-react.
Indeed, you simply can't upgrade to eslint 9 until all of your eslint plugins/configs have explicit peer dep support for it. (this is true for every eslint major)
from eslint-plugin-react.
Thanks for all your hard work on this, maintainers.
Until support for eslint v9 is ready, you can create a fresh v8 config with:
npm install -D eslint@8
npm init @eslint/config@0
from eslint-plugin-react.
@adamspotlite here's what I did, works without issues so far (aside from npm crying about peer deps).
devDeps:
"devDependencies": {
"@eslint/compat": "^1.0.0",
"@eslint/js": "^9.2.0",
"@types/eslint__js": "^8.42.3",
"@types/node": "^20.7.0",
"@types/react": "^18.3.0",
"@types/react-dom": "^18.3.0",
"eslint": "^9.3.0",
"eslint-plugin-react": "^7.34.0",
"eslint-plugin-react-hooks": "rc",
"globals": "^15.1.0",
"typescript": "next",
"typescript-eslint": "rc-v8"
}
npm update --force
eslint.config.js:
import eslint from '@eslint/js';
import { fixupPluginRules } from '@eslint/compat';
import globals from 'globals';
import reactPlugin from 'eslint-plugin-react';
import reactHooksPlugin from 'eslint-plugin-react-hooks';
import tseslint from 'typescript-eslint';
export default tseslint.config(
// extends ...
eslint.configs.recommended,
...tseslint.configs.strictTypeChecked,
...tseslint.configs.stylisticTypeChecked,
{
files: ['**/*.ts', '**/*.tsx'],
languageOptions: {
globals: globals.node,
parserOptions: {
project: true,
tsconfigRootDir: import.meta.dirname,
},
parser: tseslint.parser,
},
plugins: {
['react']: fixupPluginRules(reactPlugin),
['react-hooks']: reactHooksPlugin,
['@typescript-eslint']: tseslint.plugin,
},
rules: {
...reactPlugin.configs['jsx-runtime'].rules,
'react-hooks/exhaustive-deps': 'warn', // Add the rule for enforcing useEffect dependencies
'@typescript-eslint/explicit-module-boundary-types': 'warn', // Add the rule for enforcing explicit return types on functions
},
},
{
extends: [tseslint.configs.disableTypeChecked],
files: ['**/*.js'],
},
);
fixupConfigRules did not work for me however, but afaik all it does is add one setting to language options (below) and loads the rules (which we are doing anyway). Not really sure how necessary this language option is, but you can add it yourself if you find yourself troubleshooting:
languageOptions: Object.assign({}, all.languageOptions, {
parserOptions: Object.assign({}, all.languageOptions.parserOptions, {
jsxPragma: null, // for @typescript/eslint-parser
}),
}),
If anyone's wondering, I only included my other eslint dependencies for completeness. I don't think any of them would be necessary (except typescript-eslint if you're using typescript, and this should be on rc-v8).
from eslint-plugin-react.
ESLint 9 makes the flat config the default. It renames the ESLintRC style classes to be LegacyESLint
and the Linter requires an option of {configType: "eslintrc"}
, and in ESLint 10, they plan on dropping the legacy config altogether.
There's a migration guide that might be a good place to start in terms of compiling a list of required tasks for this
from eslint-plugin-react.
and this one will take longer because it’s changing the default config format.
Having worked on a couple of other plugins, I want to elaborate that I think there's two parts to this upgrade.
The real breaking change for v9 is the fact that v9 has removed APIs - it looks like this is being covered in #3727.
The second change is flat config compatibility. Consumers can use the plugin as-is (as long as the API issues are resolved). It is slightly more work, but it is possible. Of course, supporting the flat config natively makes it easier, and ESLint has a good migration guide should anyone wanting to upgrade to v9 feel like contributing a patch (I might eventually, but I have several other plugins that I'm focussing on).
from eslint-plugin-react.
Scott, that's a perfect answer :)
Thanks all!
from eslint-plugin-react.
Hey, the reason for error (and backward's compatible implementation) can be found here: https://eslint.org/blog/2023/09/preparing-custom-rules-eslint-v9/#context.getscope()
As for sourceCode.getFirstTokens()
it's here: https://eslint.org/blog/2023/09/preparing-custom-rules-eslint-v9/#from-context-to-sourcecode
from eslint-plugin-react.
Little notice, as I know, VS Code support for flat config isn't still stable. So even when all plugins will be upgraded, without stable IDE support eslint 9 isn't very usefull (for my colleagues 🙂)
from eslint-plugin-react.
how to test on eslint 9 since we need to simultaneously test on eslintrc in a bunch of older versions (unfortunately since RuleTester doesn’t obey the eslintrc env var, this work can’t be delayed until after shipping v9 support)
I'll submit a PR for rule tests, per #3743 (comment).
from eslint-plugin-react.
I put up a branch running tests on eslint 9; https://github.com/ljharb/eslint-plugin-react/actions/runs/8147742013/job/22269131527#step:5:21 is failing because the jsx-no-undef
and jsx-uses-react
and jsx-uses-vars
tests call linter.defineRule
. @bmish, any thoughts on an approach here?
from eslint-plugin-react.
Additionally, when I comment out those 3 lines, i get 22166 failures because Error: ESLint configuration in rule-tester is invalid: Key "parserOptions": This appears to be in eslintrc format rather than flat config format.
. Does this mean eslint 9 drops support for eslintrc, or it's just no longer the default?
If the former, how can we run the same tests with both normal eslintrc stuff on eslint 8, and also with flat config on eslint 9?
from eslint-plugin-react.
Is there any update on this yet? Or is this still quite far off? The first release candidate for v9 released last week
from eslint-plugin-react.
@james-yeoman it is almost never the case that all the plugins in the eslint ecosystem support a new major until awhile after the final release is out. It'd be great to beat that, but if there'd been any update, it'd be in this issue :-)
from eslint-plugin-react.
That expectation is flawed; the point of it being in beta is for plugins to begin to address the changes - announcements are irrelevant. Thanks for the report.
A fix for this will also need to add eslint 9 into the test matrix.
@ljharb Does this mean that eslint 9 is still raw for full use?
from eslint-plugin-react.
it means you can’t use eslint 9 with this plugin yet. It often takes many months when a new eslint major comes out before enough of the ecosystem supports it - you shouldn’t expect to upgrade right away.
from eslint-plugin-react.
The same problem occurs with eslint-plugin-solid. fyi.
TypeError: context.getScope is not a function Occurred while linting /data/data/com.termux/files/home/LearnSolidJS/FirstApp/src/FibCounter.tsx:15 Rule: "solid/reactivity" at checkForReactiveAssignment (/data/data/com.termux/files/home/LearnSolidJS/node_modules/eslint-plugin-solid/dist/rules/reactivity.js:445:69) at VariableDeclarator (/data/data/com.termux/files/home/LearnSolidJS/node_modules/eslint-plugin-solid/dist/rules/reactivity.js:768:11) at ruleErrorHandler (/data/data/com.termux/files/usr/lib/node_modules/eslint/lib/linter/linter.js:1115:48) at /data/data/com.termux/files/usr/lib/node_modules/eslint/lib/linter/safe-emitter.js:45:58 at Array.forEach () at Object.emit (/data/data/com.termux/files/usr/lib/node_modules/eslint/lib/linter/safe-emitter.js:45:38) at NodeEventGenerator.applySelector (/data/data/com.termux/files/usr/lib/node_modules/eslint/lib/linter/node-event-generator.js:297:26) at NodeEventGenerator.applySelectors (/data/data/com.termux/files/usr/lib/node_modules/eslint/lib/linter/node-event-generator.js:326:22) at NodeEventGenerator.enterNode (/data/data/com.termux/files/usr/lib/node_modules/eslint/lib/linter/node-event-generator.js:340:14) at runRules (/data/data/com.termux/files/usr/lib/node_modules/eslint/lib/linter/linter.js:1154:40)
Reverted my global installation of eslint to 8.57.0. A case of TLDR;
from eslint-plugin-react.
Even with the use of @eslint/compat
, installation remains an issue. Shall we continue to install eslint-plugin-react
using npm install --force
?
from eslint-plugin-react.
@onlywei no, you should continue to hold off upgrading to eslint 9 until all of the eslint-related packages you use support it.
from eslint-plugin-react.
I found the ESLint Compatibility Utilities worked for me.
@saltycrane thanks for your comment above, this was helpful!
For anyone who is not using the recommended
config but rather just configuring the plugin and its rules manually, the fixupPluginRules
compatibility util from @eslint/compat
may be what you're looking for.
First, install @eslint/compat
as a dev dependency. Then, use fixupPluginRules
in your config:
eslint.config.mjs
import { fixupPluginRules } from '@eslint/compat';
import react from 'eslint-plugin-react';
import globals from 'globals';
export default [
{
languageOptions: {
globals: {
...globals.browser,
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
},
plugins: {
react: fixupPluginRules(react),
},
rules: {
// Error on creating components within components
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md
'react/no-unstable-nested-components': 'error',
},
settings: {
react: {
version: 'detect',
},
},
},
];
from eslint-plugin-react.
@ljharb it looks like the code changes have been merged, and the only task left is to make the rule tests work with ESLint v9?
from eslint-plugin-react.
@mdjermanovic those were just the deprecations, which are the easy part. next we need tested flat config support, and then figuring out how to test on eslint 9 since we need to simultaneously test on eslintrc in a bunch of older versions (unfortunately since RuleTester doesn’t obey the eslintrc env var, this work can’t be delayed until after shipping v9 support)
from eslint-plugin-react.
@karlhorky have you found a way to make this typesafe?
I'm using something like:
...
import tseslint from "typescript-eslint";
...
export default tseslint.config({ ... });
but getting yelled at because:
Type 'FixupRuleDefinition' is not assignable to type 'LooseRuleDefinition'.ts(2322)
EDIT: For anyone wondering about typesafety as a result of this, please see this issue in the @eslint/compat
repo.
from eslint-plugin-react.
To be clear, peer dep warnings aren’t “crying”, they’re “it might happen to work sometimes, but if it doesn’t it’s your own fault, this is the danger zone”, and they should be taken very seriously.
from eslint-plugin-react.
Related Issues (20)
- [Bug]: TypeError in version 7.34.1 HOT 1
- `jsx-handler-names` support skipping prop naming checks HOT 2
- [Suggestion]: Drop support for node <16.20 HOT 1
- Proposal for Stringent Type Checking HOT 3
- [Bug]: Support for Eslint 9.0.0? HOT 1
- [Bug]: react/boolean-prop-naming - Cannot read properties of undefined (reading 'properties') HOT 1
- [Bug]: peer dependency error with eslint@9 HOT 1
- [Bug]: An incomprehensible mistake HOT 3
- [help wanted] The functions option (defaultArguments) in the react/require-default-props rule does not work as expected. HOT 1
- [Bug]: HOT 3
- Add "line-aligned" to react/jsx-closing-tag-location HOT 7
- [Bug]: Properties faulty identified as not declared for types in react-hook-form HOT 1
- [Bug]: checkKeyMustBeforeSpread of react/jsx-key doesn't work when generating array dynamically
- [Bug]: Endless listing cycle HOT 4
- [Bug]: The endless linting cycle HOT 1
- [Bug]: Rule "react/no-direct-mutation-state" failing in a stateless component HOT 1
- Remove `react/prop-types` from the recommended config HOT 1
- `jsx-no-leaked-render` should only complain if there is a certian leaked render HOT 5
- Quick question: does `settings.version` default to "detect" yet? HOT 3
- [Bug]: Unable to use with eslint 9.x HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from eslint-plugin-react.