Eslint-plugin-react: Warning: React version not specified in eslint-plugin-react settings.

[kud]

Hello,

Since I've updated this plugin, i've got a message like Warning: React version not specified in eslint-plugin-react settings..

This is true, I didn't specify the version of react, and this happens due to https://github.com/yannickcr/eslint-plugin-react/pull/1857/commits/8738e5917709c0cba0e7dd45289356f8a1d77384#diff-4e51c5c91adee02670adaca34f7fd7fdR17

However, when I read the doc, I've got this:

"version": "15.0", // React version, default to the latest React stable release

It's said "by default, it uses the latest version of react".

So why displaying a warning if there's a default and this is what I want? as I keep my react often upgraded.

[ljharb]

(linking to your comment here: https://github.com/yannickcr/eslint-plugin-react/pull/1857#issuecomment-415091579)

[ljharb]

Just because there's a default doesn't mean you shouldn't always be providing an explicit value.

Repeating https://github.com/yannickcr/eslint-plugin-react/pull/1857#issuecomment-415171990:

i could see adding a separate option for "detect" (using the "version" as a fallback), which did require('react').version - want to open a PR that adds that?
(Note that it'd have to use process.cwd(), and the resolve package, to get the proper require path)

[kud]

Yes, it's true.

For the moment, I use this workaround: "version": "999.999.999".

[chrisdothtml]

+1 for supporting latest as the value

[marcofugaro]

Yeah please I don't want to update this config each time a new react comes out

[ljharb]

You have to update your package.json every time that happens; I’m not sure also updating eslintrc is much harder.

[marcofugaro]

Yeaaah... I don't have it in a package.json, I have it in the eslint config shared for the team, and each time I would have to upgrade deps, update by hand, publish a new version of the tool.

Most importantly, I upgrade my dependencies using yarn upgrade-interactive --latest, not by hand. I (or other mantainers) might forget to update this version by hand.

[chrisdothtml]

We also use a shared eslint config and this would make it quite annoying every upgrade. If "latest" isn't supported, everyone's just gonna use "999.999.999" instead, which could lead to issues in the future if this plugin assumes that property contains their actual React version

[kud]

https://github.com/yannickcr/eslint-plugin-react/issues/1955#issuecomment-416659624

Well, I use ncu to update my packages, and yes it's not hard to update .eslintrc but you have to remember this and it's not something I want. :D

I'm using 999.999.999 for the moment.

[bhardy]

Comment removed and new issue created: https://github.com/yannickcr/eslint-plugin-react/issues/1963

[ljharb]

@bhardy that seems like a different issue; if you have the settings object with a react version you shouldn't get a warning at all.

[bhardy]

@ljharb would you like me to create a new issue?

[ljharb]

@bhardy yes please :-)

[mohsinulhaq]

I tried {"version": "latest"}, and it's working fine. Why are we pushing for '999.999.999'?

[ljharb]

@mohsinulhaq it would be more explicit than relying on React never hitting v999

[mohsinulhaq]

but there is no downside of using latest with regards to linting, right?

[ljharb]

The downside would be a lack of explicit configuration with respect to which React version you’re using, i suppose.

[anilanar]

I think this is an important bug. There are editor plugins that rely on exit code and stdout of eslint --fix/prettier-eslint for auto-formatting.

As a formatter, prettier-eslint must not log something to stdout when exit code is 0.

[bertho-zero]

@anilanar Even when the version is filled the warning appears with prettier-eslint, I fixed that and I wait for a response. (https://github.com/prettier/prettier-eslint/pull/194)

[manuelbieh]

Hmm had (or let's say: have) the same issue. Since I'm using an .eslintrc.js I was able to use the following workaround which seems to work. At least I don't see this warning anymore:

settings: {
    react: {
        version: require('./package.json').dependencies.react,
    },
},

🤷‍♂️

[ljharb]

@manuelbieh require('react/package.json').version; but once the next release goes out, you can use "detect".

[manuelbieh]

Ah right, even better.

Detect, also cool! Thanks 👍

[ljharb]

v7.12.0 is released.

[mohsinulhaq]

Cool! Thanks

[jaydenseric]

I'm still seeing the warning, why is detect not the default?

[ljharb]

Making that the default would be a breaking change.

[jaydenseric]

That's ok, just publish a new default in a new major version.

[ljharb]

When we get around to the next major, we surely will. There’s no hurry tho; you can maually set it for yourself.

[jaydenseric]

Glad it's on the roadmap, although it's suboptimal to get all eslint-plugin-react consumers worried about a warning, have them change their config, just to make their extra config redundant when the new version is out. Will users be warned their config is bloated and can be simplified once their setting is a default? Probably not. Then they will be maintaining junk code.

Useful defaults like this are a low hanging fruit; the sooner they are published the better for everyone.

[ljharb]

If they follow the link, they’ll see they can use “detect”.

And sure, we could warn them of that, but there’s zero harm from explicitly specifying a default.

[aczekajski]

The detect option is missing in docs, it took me way too long to find this issue and thus an info about the new option.

[ljharb]

Good catch; a PR to add it to the docs would be appreciated.

[eeriee]

Add 'detect' to the setting but still encounter the warning.

[ljharb]

@eeriee if updating to the latest doesn’t fix it, please file a new issue with your config and your plugin version

[craigcosmo]

my eslintrc is like this, where should i put the react version?

{
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true,
            "modules": true
        }
    },
    "env": {
           "browser": true,
           "node": true,
          "es6":true
         },
    "extends":[
        "plugin:import/errors",
        "plugin:import/warnings"
    ],
    "plugins": [
        "react",
        "json",
        "import"
    ],
    "globals": {
        "new": true,
        "localStorage": true,
        "google": true,
        "process": true,
        "__dirname":true,
        "describe":true,
        "require":true,
        "module":true,
        "it":true,
        "Promise":true,
        "console":true,
        "__DEV__":true
    }
}

[ljharb]

@craigcosmo in settings, as a top-level property. See the readme.

[xylix]

This isn't documented in the readme anymore?

[ljharb]

@xylix https://github.com/yannickcr/eslint-plugin-react/blob/master/README.md#configuration

[Robertosousa86]

hello, I had the same problem, I managed to solve with:
npm install react-peer react react-dom --save
from: https://www.npmjs.com/package/react-peer
I hope this is useful =)

[ljharb]

Better to use npx install-peerdeps; you shouldn’t need a dep on react-peer.

[ittroller]

3/2020, i fixed it in my .eslintrc
"settings": {
"react": {
"pragma": "React",
"version": "16.12.0"
}
}
hope it help you

[henryhawke]

  settings: {
    react: {
        "version": "latest",
    },
},

[Hongbo-Miao]

I have eslint-plugin-react 7.20.5 installed in my root folder.
My root folder does not have react, while, my client sub folder has react 16.13.1 installed.

I tried

module.exports = {
  // ...
  settings: {
    react: {
      version: 'latest',
    },
  },
};

at my root .eslintrc.js, but got error

error Fragments are only supported starting from React v16.2. Please disable the react/jsx-fragments rule in ESLint settings or upgrade your version of React react/jsx-fragments

So I think this latest is not really latest.

However, the workaround way works perfect.

module.exports = {
  // ...
  settings: {
    react: {
      version: '999.999.999',
    },
  },
};

Thanks!

[ljharb]

@Hongbo-Miao latest isn't a valid option. It must be a version number, or 'detect'.

eslint-plugin-react should not be installed or used in a package.json that doesn't also have react in it.

[Hongbo-Miao]

Thanks @ljharb I agree need react in it. That case I need splits .eslintrc.js to three: one in root folder, and one in client, one in server folder. However, I found it is a little hard to manage them after spliting them. Here is my repo.
BTW, I saw you left Airbnb earlier, enjoy your next journey! 🎉🎉🎉