Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

typescript-eslint config: .eslintrc file 'module' is not defined

I am setting up a new project as described in the typescript-eslint getting started docs. However, in my .eslintrc.js file I am getting an error:

'module' is not defined.eslint(no-undef)

Now, if I remove eslint:recommended from the extends of the config, this error goes away. However, typical rules like debugger or const iAmUnused = true do not get picked up by ESLint, so if feels a little like whack-a-mole.

Why is my ESLint file being picked up when it's in the root of my project with the eslint:recommended enabled? I don't want to include this file in my .eslintignore because when running my eslint command, it says this file is already automatically ignored, but it's not 🤷‍♂️

ESLINTRC:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: '*/tsconfig.json',
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  plugins: ['@typescript-eslint', 'jest', 'react', 'react-hooks'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:jest/recommended',
    'plugin:prettier/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'prettier',
    'prettier/@typescript-eslint',
  ],
  rules: {
    'no-unused-vars': 2,
  },
  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  overrides: [
    {
      files: ['**/*.tsx'],
      rules: {
        'react/prop-types': 'off',
      },
    },
  ],
};

TSConfig:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "declaration": true,
    "declarationDir": "build",
    "jsx": "react",
    "lib": ["es6", "dom", "es2016", "es2017"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "rootDir": "./src",
    "rootDirs": ["./src"],
    "sourceMap": true,
    "strict": true,
    "target": "es5"
  },
  "include": ["./src"],
  "exclude": ["node_modules", "build", "dist", "src/**/*.stories.tsx", "src/**/*.test.tsx"]
}

like image 251
Phil Lucks Avatar asked Aug 18 '20 23:08

Phil Lucks


People also ask

Where is .eslintrc located?

Go to settings --> packages --> linter-eslint settings. On that menu, look for the . eslintrc Path option. For your particular preference, you would put ~/.

How do I create an ESLint configuration file?

There are two primary ways to configure ESLint: Configuration Comments - use JavaScript comments to embed configuration information directly into a file. Configuration Files - use a JavaScript, JSON, or YAML file to specify configuration information for an entire directory and all of its subdirectories.

What format do you want your config file to be in ESLint?

Configuration File FormatsJavaScript (ESM) - use .eslintrc.cjs when running ESLint in JavaScript packages that specify "type":"module" in their package.json . Note that ESLint does not support ESM configuration at this time. YAML - use .eslintrc.yaml or .eslintrc.yml to define the configuration structure.


Video Answer


1 Answers

Looks like the env needed to be updated from:

env: {
    browser: true,
    es6: true,
    jest: true,
  },

to include node: true for the module error to be resolved.

like image 131
Phil Lucks Avatar answered Oct 26 '22 02:10

Phil Lucks