import-js / import-js/eslint-plugin-import

Optional chaining in import bombs plugin out

Open
#1,995 11 comments 4 reactions 0 assignees View on GitHub
invalid
Dominant language
JavaScript
Stars
5.9k
Forks
1.5k
PR merge metrics
No merged PRs in 30d

Description

Given the following config (which is used as part of a larger shareable config that gets published to npm):
```js
module.exports = {
plugins: ['import'],
settings: {
'import/parsers': {
espree: ['.js', '.jsx'],
},
},
rules: {
// static analysis
'import/no-unresolved': 0,
'import/named': 2,
'import/default': 2,
'import/namespace': 2,
'import/no-restricted-paths': 0,
'import/no-absolute-path': 2,
'import/no-dynamic-require': 0,
'import/no-internal-modules': 0,
'import/no-webpack-loader-syntax': 2,
'import/no-self-import': 2,
'import/no-cycle': 0,
'import/no-useless-path-segments': 2,
'import/no-relative-parent-imports': 0,
// helpful warnings
'import/export': 2,
'import/no-named-as-default': 2,
'import/no-named-as-default-member': 2,
'import/no-deprecated': 2,
'import/no-extraneous-dependencies': 0,
'import/no-mutable-exports': 2,
'import/no-unused-modules': 2,
// module systems
'import/unambiguous': 0,
'import/no-commonjs': 0,
'import/no-amd': 2,
'import/no-nodejs-modules': 0,
// style guide
'import/first': 2,
'import/exports-last': 0,
'import/no-duplicates': 2,
'import/no-namespace': 0,
'import/extensions': [
2,
{
jpg: 'always',
jpeg: 'always',
js: 'never',
json: 'always',
png: 'always',
scss: 'always',
svg: 'always',
webp: 'always',
},
],
'import/order': [
2,
{
groups: [
'builtin',
'external',
'internal',
'parent',
'sibling',
'index',
'unknown',
],
'newlines-between': 'never',
},
],
'import/newline-after-import': 2,
'import/prefer-default-export': 0,
'import/max-dependencies': 0,
'import/no-unassigned-import': 0,
'import/no-named-default': 2,
'import/no-default-export': 0,
'import/no-named-export': 0,
'import/no-anonymous-default-export': 0,
'import/group-exports': 0,
},
};
```

When *stuff-utils.js* is imported into *Foo.js* (see internals below), you get multiple errors from seemingly unrelated rules.

*Foo.js*
```js
import StuffUtils from './stuff-utils';

const Foo = () => {
const onButtonClick = evt => {
StuffUtils.doStuff();
};

return (


Testing

);
};

export default Foo;
```

*stuff-utils.js*
```js
const StuffUtils = {
doStuff(foo) {
const bar = foo?.bar || 'bar';

return bar;
},
};

export default StuffUtils;
```

Reported errors:
```
/Users/mprzybylski/Work/fe-eslint-config/examples/Foo.js
1:24 error Parse errors in imported module './stuff-utils': Unexpected token . (3:25) import/namespace
1:24 error Parse errors in imported module './stuff-utils': Unexpected token . (3:25) import/no-deprecated
1:24 error Parse errors in imported module './stuff-utils': Unexpected token . (3:25) import/default
1:24 error Parse errors in imported module './stuff-utils': Unexpected token . (3:25) import/no-named-as-default
1:24 error Parse errors in imported module './stuff-utils': Unexpected token . (3:25) import/no-named-as-default-member
```

Changing *stuff-utils.js* to the below, no errors are reported in the same setup/configuration:
```js
const StuffUtils = {
doStuff(foo) {
const bar = foo.bar || 'bar';

return bar;
},
};

export default StuffUtils;
```

Contributor guide

Open the contributing guide

Research direction

Reproduce the reported configuration with Foo.js importing stuff-utils.js, first comparing the optional-chaining example with the foo.bar variant. Trace how the imported module is parsed and how the affected import rules report that parse failure. Done means the optional-chaining module no longer produces the listed unrelated rule errors under the shown setup.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.