Eslint-plugin-import: Can't deactivate "import/no-extraneous-dependencies" (for devDependencies) for .ts files

[TobiasWehrum]

I continue to get errors for "import/no-extraneous-dependencies" despite doing my best to deactivate it in my .eslintrc.js. I've tried all variations of deactivating it I could think of for well over an hour now, and all of them are ignored. I can't even set it to "warn" instead of "error".

Things that work:

• Turning it off seems to work fine in .js files. When I rename my file from main.ts to main.js, my "import/no-extraneous-dependencies" configuration behaves exactly as expected.
• All other changes I make in the .eslintrc.js file work fine.
• Deactivating the error with // eslint-disable-next-line import/no-extraneous-dependencies works fine.
• /* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */ works fine too, but putting the same into .eslintrc.js produces no effect. It's like something adds the rule after my .eslintrc.js rules.

Here is an example of the error I get:
'pixi.js' should be listed in the project's dependencies, not devDependencies.eslint(import/no-extraneous-dependencies)

Here is my .eslintrc.js:

module.exports = {
    parser: "@typescript-eslint/parser",
    plugins: [
        "@typescript-eslint",
        "eslint-comments",
        "jest",
        "promise",
        "unicorn",
    ],
    extends: [
        "airbnb-typescript",
        "plugin:@typescript-eslint/recommended",
        "plugin:eslint-comments/recommended",
        "plugin:jest/recommended",
        "plugin:promise/recommended",
        "plugin:unicorn/recommended",
        "prettier",
        "prettier/react",
        "prettier/@typescript-eslint",
    ],
    env: {
        node: true,
        browser: true,
        jest: true,
    },
    rules: {
        // Too restrictive, writing ugly code to defend against a very unlikely scenario: https://eslint.org/docs/rules/no-prototype-builtins
        "no-prototype-builtins": "off",
        // https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html
        "import/prefer-default-export": "off",
        "import/no-default-export": "error",
        // Too restrictive: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/destructuring-assignment.md
        "react/destructuring-assignment": "off",
        // No jsx extension: https://github.com/facebook/create-react-app/issues/87#issuecomment-234627904
        "react/jsx-filename-extension": "off",
        // Use function hoisting to improve code readability
        "no-use-before-define": [
            "error",
            { functions: false, classes: true, variables: true },
        ],
        // Makes no sense to allow type inferrence for expression parameters, but require typing the response
        "@typescript-eslint/explicit-function-return-type": [
            "error",
            { allowExpressions: true, allowTypedFunctionExpressions: true },
        ],
        "@typescript-eslint/no-use-before-define": [
            "error",
            { functions: false, classes: true, variables: true, typedefs: true },
        ],
        // Common abbreviations are known and readable
        "unicorn/prevent-abbreviations": "off",

        // I put everything into dev-dependencies because it will all be transpiled by webpack
        "import/no-extraneous-dependencies": [
            "warn",
            {
                "devDependencies": true,
                "optionalDependencies": true,
                "peerDependencies": true,
            }
        ],

        // I don't see the point of this 
        "unicorn/prefer-node-append": "off"
    },
}

[ljharb]

Re "I put everything into dev-dependencies because it will all be transpiled by webpack" - anything that is conceptually a runtime dependency belongs in production deps. Use of webpack is an implementation detail, and doesn't make those things dev deps.

That said, it should certainly be set to warn as a result of this config. Try adding "root": true, because you might have a ~/.eslintrc or something?

[TobiasWehrum]

Re: devDendencies vs dependencies - from what I understand, runtime dependencies are dependencies that have to be present in ./node_modules while running the app. But here, everything is already bundled into the distribution at development time, so the app could (theoretically, because it's not a node app) be executed with an empty ./node_modules folder.

There's a fun thread about it over in the webpack issues (https://github.com/webpack/webpack/issues/520) that leans strongly towards devDependencies, and prominent frontend libraries like React (https://github.com/facebook/react/blob/master/package.json) and Vue (https://github.com/vuejs/vue/blob/dev/package.json) use that pattern too.

Either way, this is a pretty philosophical discussion considering that the app will never run as a node app.

Re: "root": true: Like this?

module.exports = {
    root: true,
    parser: "@typescript-eslint/parser",
[...]

That didn't change anything.

At this point I'm rather convinced that it's a problem with .ts files as opposed to e.g. .js files. As I said in my opening post, renaming a .ts file to .js makes it behave correctly, i.e. the error vanishes (with the configuration file above) or turns into a warning if I set devDependencies to false in the configuration file.

It only and persistently stays an error as long as the file has the .ts extension.

[ljharb]

You're only describing code that runs in node - dependencies is a conceptual field for anything that applies to the runtime.

[ljharb]

Yes, that's what I meant by root true :-/

I'm not familiar with airbnb-typescript - airbnb doesn't maintain that. Are you sure it's setting up all the right typescript extensions?

[TobiasWehrum]

I'm not really sure about anything, especially since this is my first time using ESLint for Typescript. For that reason, I'm just using this configuration file https://github.com/iamturns/create-exposed-app/blob/master/.eslintrc.js to start out with. Can you clarify what you mean by "setting up all the right typescript extensions"?

[ljharb]

The import plugin has to be told to look at .ts/.tsx files.

https://unpkg.com/[email protected]/index.js looks like it is doing that, though.

[TobiasWehrum]

Turns out I was using an extremely outdated eslint-config-airbnb-typescript (among other things). Upgrading my package.json to current versions (via ncu -u) helped.

Thanks a lot for your quick answers, and sorry I wasted your time there!