Crash in projects without *.js files

[EvgenyOrekhov]

See import-js/eslint-plugin-import#1645.

TODO:

• Verify if adding plugin:import/typescript to extends can solve this (see https://github.com/benmosher/eslint-plugin-import#typescript). Update: it doesn't solve the issue, it's not related to TypeScript.

[EvgenyOrekhov]

Workaround: import-js/eslint-plugin-import#1645 (comment).

[brunoparga]

Hi! I read the linked thread, tried to copy the workaround to my .eslintrc.js, but I still get this issue. Could you please help me run eslint on my React Typescript project? This is my .eslintrc.js. Is there any other relevant information I should provide?

[EvgenyOrekhov]

@brunoparga Hi! Try adding "import/no-unused-modules": "off" to your top-level rules section. Let me know if that works.

[brunoparga]

Thanks, but sorry, it doesn't work. I get the same error as before.

[EvgenyOrekhov]

@brunoparga Sorry to hear that. I guess then you should just turn the import/no-unused-modules rule off completely. Until import-js/eslint-plugin-import#1645 is resolved.

[brunoparga]

Wait, I am confused. Isn't that what I just tried? If not, how do I do it, please?

Edit for clarity: what I just did was running eslint with the config from the gist I linked, plus "import/no-unused-modules": "off" along with the other rule settings. What you suggested was turning the import/no-unused-modules rule off completely.

The reason I am confused is that I think that the thing I did is how your suggestion would be implemented. What am I missing?

[EvgenyOrekhov]

@brunoparga You tried to enable the rule by using "import/no-unused-modules": "off" plus the "overrides" workaround. Basically, "import/no-unused-modules": "off" was supposed to turn the rule off first, and then the "overrides" declarations were supposed to turn it on again (just in a different way).

To turn the rule off completely, you should make these changes:

module.exports = {
  env: {
    browser: true,
    es6: true,
    'jest/globals': true
  },
  extends: [
    'eslint:recommended',
    'hardcore',
    'plugin:jest/recommended',
    'plugin:jest/style',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  overrides: [
    {
      "files": ["*.js"],
      "extends": ["hardcore/ts-for-js"],
      "parserOptions": { "project": "./tsconfig.json" }
    },
-   {
-     "files": ["*.js"],
-     "rules": {
-       "import/no-unused-modules": [
-         "error",
-         {
-           "src": ["**/*.js"],
-           "missingExports": false,
-           "unusedExports": true
-         }
-       ]
-     }
-   }, 
-   {
-     "files": ["*.jsx"],
-     "rules": {
-       "import/no-unused-modules": [
-         "error",
-         {
-           "src": ["**/*.jsx"],
-           "missingExports": false,
-           "unusedExports": true
-         }
-       ]
-     }
-   }, 
-   {
-     "files": ["*.ts"],
-     "rules": {
-       "import/no-unused-modules": [
-         "error",
-         {
-           "src": ["**/*.ts"],
-           "missingExports": false,
-           "unusedExports": true
-         }
-       ]
-     }
-   }, 
-   {
-     "files": ["*.tsx"],
-     "rules": {
-       "import/no-unused-modules": [
-         "error",
-         {
-           "src": ["**/*.tsx"],
-           "missingExports": false,
-           "unusedExports": true
-         }
-       ]
-     }
-   }, 
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: [
    'inclusive-language',
    'jest',
    'woke',
    'react',
    '@typescript-eslint',
  ],
  rules: {
    'inclusive-language/use-inclusive-words': 'error',
    'import/extensions': 'off',
    'import/no-unresolved': 'off',
    'import/prefer-default-export': 'off',
    'no-use-before-define': 'off',
    'react/jsx-filename-extension': [1, { extensions: ['.jsx', '.tsx'] }],
    'react/prop-types': 'off',
    'woke/all': 'error',
+   'import/no-unused-modules': 'off'
  },
  settings: {
    react: {
      version: "detect"
    }
  }
};

[brunoparga]

@EvgenyOrekhov thank you for clarifying that, it was really helpful.

I have now realized that I might have had a different problem all along (oops). I was trying to just run eslint against the whole src directory of my create-react-app project. Now, instead of that I tried just the .tsx files, and it worked okay. Same with most .ts files, except for these two, which I haven't even touched as they come from create-react-app:

/* react-app-env.d.ts */
/// <reference types="react-scripts" />

/* setupTests.ts */
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';

I checked and, unfortunately, this is probably related to hardcore, as running with my previous eslint config (airbnb) works just fine. I encounter this issue when my .eslintrc.js is identical to the one you pasted above; this also happens when I remove the line turning off import/no-unused-modules, or the entire overrides property (as I don't have any .js files in my project), or both. The output is the same on each case. I've also removed an unrelated plugin I've installed since creating the gist (react-a11y), just to be 100% sure, and it wasn't it causing the issue.

So, I'm happy, since I can properly lint my project; but also dumbfounded that these two irrelevant files have to be excluded from the linter run so it can work properly.

[EvgenyOrekhov]

@brunoparga I created those two files in the root of the project, but I can't reproduce any failures, linting works fine:

❯ npx eslint --ext ts .

C:\eslint-config-hardcore\react-app-env.d.ts
  1:1  error  The filename `C:\eslint-config-hardcore\react-app-env.d.ts` should be named `react-app-environment.d.ts`. A more descriptive name will do too  unicorn/prevent-abbreviations
  1:1  error  Expected space or tab after '//' in comment
                                                            spaced-comment
  1:1  error  "use strict" directive should be on top of commonjs file (strict-mode/add)
                                                            putout/putout

C:\eslint-config-hardcore\setupTests.ts
  5:1  error  Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

✖ 4 problems (4 errors, 0 warnings)
  2 errors and 0 warnings potentially fixable with the `--fix` option.

If you could create a repo with a minimal reproducible case, that would be really helpful!

[brunoparga]

Hi! First of all, I am sorry I did not provide a minimal reproducible case for the previous case. I wasn't sure what to include if I started from a fresh new project, or where to start removing stuff from a copy of the actual project.

I now have the same issue on another project, with Angular this time. And one thing that I find really weird is that everything works fine if I use the default Prettier configuration, but not if I try to set either semi: false or singleQuote: true. Using the opposite values also works fine (but it is not what I want!).

I thought this would be useful for you to know.

[EvgenyOrekhov]

@brunoparga I was able to successfully set up eslint-config-hardcore for a TypeScript project by wrapping the entire config in overrides like this:

{
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],

      "extends": [
        "hardcore",
        "hardcore/fp",
        "hardcore/ts-for-js",
        "plugin:import/typescript"
      ],

      "parserOptions": {
        "project": "./tsconfig.json"
      },

      "env": {
        "browser": true
      }
    },

    {
      "files": ["*.json"],

      "extends": ["plugin:json/recommended"]
    }
  ]
}

I see no errors from import/no-unused-modules.

Could you try that?

[EvgenyOrekhov]

@brunoparga This issue should be fixed now. I just released eslint-config-hardcore v20.0.0, which now has support for TypeScript and React. Please see the Usage section of the README.