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"]
}
Go to settings --> packages --> linter-eslint settings. On that menu, look for the . eslintrc Path option. For your particular preference, you would put ~/.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With