Split error with eslint-plugin-import

[SoleneChiche]

Hi all,

I'm trying by any mean to add to CRA v4 the airbnb config. It seems it is calling eslint-plugin-import (v2.23.4) and I run into this error:

>eslint --ext ts,tsx .

Oops! Something went wrong! :(

ESLint: 7.28.0

TypeError: Cannot read property 'split' of undefined
Occurred while linting .../src/Platform/theme.ts:2
    at checkDependencyDeclaration (.../node_modules/eslint-plugin-import/lib/rules/no-extraneous-dependencies.js:133:40)
    at reportIfMissing (.../node_modules/eslint-plugin-import/lib/rules/no-extraneous-dependencies.js:187:38)
    at commonjs (.../node_modules/eslint-plugin-import/lib/rules/no-extraneous-dependencies.js:264:7)
    at checkSourceValue (.../node_modules/eslint-module-utils/moduleVisitor.js:29:5)
    at checkSource (.../node_modules/eslint-module-utils/moduleVisitor.js:34:5)
    at .../node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (.../node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (.../node_modules/eslint/lib/linter/node-event-generator.js:293:26)
    at NodeEventGenerator.applySelectors (.../node_modules/eslint/lib/linter/node-event-generator.js:322:22)

What seems to trigger this is the following lines from theme.ts:
import { Styles } from '@material-ui/styles/withStyles'
Which seems valid to me...

Here is my config:

"devDependencies": {
        "@testing-library/jest-dom": "^5.12.0",
        "@testing-library/react": "^11.2.7",
        "@types/history": "^4.7.8",
        "@types/jest": "^26.0.23",
        "@types/react": "^17.0.8",
        "@types/react-dom": "^17.0.5",
        "@types/react-dropzone": "^5.1.0",
        "@types/react-imageloader": "^2.1.10",
        "@types/superagent": "^4.1.11",
        "escodegen": "^1.14.1",
        "eslint-config-airbnb": "^18.2.1",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-import": "^2.23.4",
        "eslint-plugin-jsx-a11y": "^6.4.1",
        "eslint-plugin-react": "^7.24.0",
        "eslint-plugin-react-hooks": "^1.7.0",
        "eslint-plugin-prettier": "^3.4.0",
        "esprima": "^4.0.1",
        "estraverse": "^5.0.0",
        "husky": "^6.0.0",
        "prettier": "2.3.0",
        "typescript": "^4.3.2"
    },
    "dependencies": {
        "@date-io/moment": "^2.10.11",
        "@material-ui/core": "^4.11.4",
        "@material-ui/icons": "^4.11.2",
        "@material-ui/lab": "^4.0.0-alpha.58",
        "@material-ui/pickers": "^3.3.10",
        "clsx": "^1.1.1",
        "fuse.js": "^6.4.6",
        "google-map-react": "^1.1.5",
        "history": "^5.0.0",
        "lint-staged": "^11.0.0",
        "lodash": "^4.17.21",
        "mobx": "^4.13.0",
        "mobx-react": "^6.1.3",
        "moment": "^2.29.1",
        "qrious": "^4.0.2",
        "quill": "^1.3.7",
        "quill-magic-url": "^3.0.2",
        "react": "^17.0.2",
        "react-beautiful-dnd": "^13.1.0",
        "react-big-calendar": "^0.33.5",
        "react-dimensions": "^1.3.1",
        "react-dom": "^17.0.2",
        "react-dropzone": "^11.3.2",
        "react-measure": "^2.5.2",
        "react-meta-tags": "^1.0.1",
        "react-scripts": "4.0.3",
        "react-select": "^4.3.1",
        "react-webcam": "^5.2.4",
        "smoothscroll": "^0.4.0",
        "superagent": "^6.1.0",
        "throttle-debounce": "^3.0.1",
        "urijs": "^1.19.6"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "airbnb",
            "prettier"
        ],
        "rules": {
            "no-unused-vars": "off",
            "@typescript-eslint/no-unused-vars": [
                "error"
            ],
            "no-extraneous-dependencies": "off"
        }
    },

Important to know :

• I do not have an .esllintrc
• I setup the eslint config with init from eslint

Any help is welcome!

Thanks

[uturnr]

Same here, with an import like this:

import mapboxGl, { GeoJSONSource } from 'mapbox-gl';

Downgrading to 2.23.3 fixes it.

Seems like the issue may be related to this commit. da8d584

[ljharb]

Just to confirm - is the dependency being imported actually installed?

[uturnr]

Just to confirm - is the dependency being imported actually installed?

Yes, in my case, I am using typescript, and I have mapbox-gl and @types/mapbox-gl installed.

In VSCode, mapboxGl is showing as a namespace and GeoJSONSource is showing as a class, both found in index.d.ts in @types/mapbox-gl

edit: I should clarify I have these dependencies both listed as devDependencies. This is a component library and I have all the dependencies listed in devDependencies.

[ljharb]

Hm - I wonder if the issue here is that the typescript resolver is resolving, for example, mapbox-gl to @types/mapbox-gl. cc @paztis

[paztis]

I'm trying to reproduce it without success.
What is the resolver you're using ?

[paztis]

I can add a NPE to avoid the crash on split part in case of

[paztis]

here is the PR: #2121

[SoleneChiche]

@paztis Can I provide you with more info?

[SoleneChiche]

PS: I can back @uturnr as downgrading to 2.23.3 fixes it.

[paztis]

If you can add a log in the no-extraneous-dependenxies.js file at line 186
I'd like to see the value of variable 'resolved' and 'realPackageName'

[paztis]

@SoleneChiche, @uturnr can you try my changes directly inside the code of eslint-plugin-import inside your node_modules ?
You modify this file node_modules/eslint-plugin-import/lib/rules/no-extraneous-dependencies.js line 133

replace this
const packageNameParts = packageName.split('/');

with this
const packageNameParts = packageName ? packageName.split('/') : [];

If it works correctly it means this PR will resolve the issue and we can merge it / deliver a 2.23.5

[ljharb]

We’d still need a regression test, so we’ll still need to be able to reproduce it.

[uturnr]

@paztis It works for me with the above change.

And the console logs you previously requested:

  const realPackageName = getModuleRealName(resolved);
  console.log(resolved);
  console.log(realPackageName);

resolved:
(my project path)/node_modules/mapbox-gl/dist/mapbox-gl.js

realPackageName:
undefined

[paztis]

Wait a second: there's no package.json into nodes_module/mapbox-gl ? @uturnr can you verify it ?
This might be the reason.
@ljharb this might be the regression to add

[paztis]

readPkgUp.sync isn't able to find your package.json

[uturnr]

@paztis, hmm, this is strange. package.json is there in node_modules/mapbox-gl. It matches the package.json on github for the version I have installed: https://github.com/mapbox/mapbox-gl-js/blob/v2.2.0/package.json.

However there is an empty package.json (contains only {}) in mapbox-gl/dist (https://github.com/mapbox/mapbox-gl-js/blob/main/dist/package.json), and that is the file that is read by readPkgUp. Deleting that package.json file locally makes the error go away.

[paztis]

Better understand this problem now. We need to inspect the package.jsob to lookup on parents level of it didn't fit to the real package

[paztis]

I will try to do it this evening

[ertrzyiks]

I created a repro repo https://github.com/ertrzyiks/extraneous-dependencies-demo

In this case it happens because material-ui provides incomplete package json for subfolders.

package.json example:

{
  "sideEffects": false,
  "module": "../esm/Collapse/index.js",
  "typings": "./index.d.ts"
}

[paztis]

after looking the content of @material-ui/core and mapbox-gl, I notice all the intermediate package.json have no name field.
Can I consider until I found a name file I look the parent level, recursively ?

[paztis]

Correct fix now (and unit test) done in #2121
The trick is ti survey if a name is provided in the package.json, what is not the case for ESM modules.
if not I continue to recurse until I found the correct package.json

[benjamingr]

Hey, I'm also experiencing this - going to float the patch in the meantime. Just sharing in case you need help isolating this issue though it looks like Paztis already has a grip on the issue.

[paztis]

Hi. Fix is done in PR #2121.
Not sure it is merge now

[benjamingr]

(I was more saying that I am able to help with reproducing/debugging if that's needed - I'm fine with waiting for the fix a few weeks I'm in no rush - but thanks!)

[msonowal]

I can confirm that this can be reproduced by this also

import { HomeIcon } from '@heroicons/vue/solid'

[seanblonien]

I ran into this exact same error today when I was running NextJS's new eslint-config-next, and it turned out to be that I had a bad packageDir value in the array calculated from my monorepo

this is how I calculate packageDir in my .eslintrc.js config now

const {sync} = require('glob');
// ... rest of config
'import/no-extraneous-dependencies': [
  'error',
  {
    packageDir: ['.', ...sync(`./packages/*`)],
  },
],