Javascript: react/require-extension is deprecated

[billyjanitsch]

See the deprecation notice. The newly released [email protected] includes this rule, so a warning is printed to the console.

[ljharb]

Sadly the replacement rule can't yet be configured for us - it's blocked by https://github.com/benmosher/eslint-plugin-import/issues/390 (as indicated here).

[barbalex]

this makes working with airbnb in atom completely unusable, see https://github.com/AtomLinter/linter-eslint/issues/579#issuecomment-237391861

[sompylasar]

@barbalex you might want to vote for the culprit issue that causes Atom to throw the exception: https://github.com/yannickcr/eslint-plugin-react/issues/783

[dtothefp]

@barbalex @billyjanitsch you can make your own override config, maybe this is a big hack but seems to work

//airbnd-override.js
import omit from 'lodash/omit';
import merge from 'lodash/merge';
import airbnb from 'eslint-config-airbnb';

const config = airbnb.extends.reduce((acc, fp) => {
  return merge(acc, require(fp));
}, {});
const {rules: allRules} = config;
const rules = omit(allRules, 'react/require-extension');

export default Object.assign({}, config, {rules});

//src/index.js => compiled to dist/index.js
export default {
  parser: 'babel-eslint',
  extends: [
    './airbnd-overwride.js'
  ].map(require.resolve),
  env: {
    'shared-node-browser': true
  },
  ecmaFeatures: {
    experimentalObjectRestSpread: true
  },
  rules: {
    'comma-dangle': 0,
    'arrow-body-style': 0,
    'object-curly-spacing': 0,
    'global-require': 0
  }
};

//.eslintrc
{
  "extends": "./dist/index.js"
}

[ljharb]

that's a whole lot of work to avoid a single console.warn

[dtothefp]

@ljharb truedat

[yangshun]

Temporary workaround for my project that is using eslint would be to add the rule to .eslintrc:

{
  "extends": "airbnb",
  "rules": {
    "react/require-extension": "off"
  }
}

[GeekG1rl]

@yangshun you absolute hero - that warning message was really annoying me!

[JasonEtco]

That helps make it usable, but I'm seeing problems with eslint-plugin-import; after settings react/require-extension: off all of my imports are throwing import/no-unresolved errors for every import (both absolute and relative). Any ideas?

[ljharb]

Just to test - if you set it explicitly to "error", do all those import warnings go away?

[ljharb]

• If not, it's related to your project's eslint configs, and not to that rule

[JasonEtco]

@ljharb Do you mean import/no-unresolved or react/require-extension?

[ljharb]

The latter :-)

[JasonEtco]

@ljharb Then I get that spooky error message: https://github.com/AtomLinter/linter-eslint/issues/579

[ljharb]

Wait - are you saying you get those linter errors in Atom, or on the command line? The only thing that matters for reporting to anything but $EDITOR is that it happens on the command line - anything happening in $EDITOR only is a specific bug that that project needs to fix.

[yangshun]

@JasonEtco are you using webpack resolve root?

[JasonEtco]

@yangshun No, I'm not. We opted for Gulp to build the app instead. Is there a setting to do that within Atom? (Sorry if this is off-topic)

[sompylasar]

@JasonEtco The spooky error message is triggered by console.log or console.warn in ESLint plugins, caused by a bug in Atom, it throws on console calls in certain conditions (child_process), see https://github.com/atom/atom/issues/12504

[ljharb]

This is now waiting on a release of eslint-plugin-import.

[mkscrg]

[email protected] has been released.

[ljharb]

This will need a major version update, so I'll try to get that out this weekend.

[ljharb]

v12.0.0 of the config should resolve this issue.

[goodaccoustics]

This react/require-extension issue was fixed when I downgraded the node module "eslint-plugin-react" so as to get back this check rule.

[ljharb]

@goodaccoustics the check exists in a replacement rule; there's no need to downgrade.