.eslintrc.js 'module' is not defined - eslint

I'm getting 'module' is not defined error from the eslint in .eslintrc.js file.
What does this mean and how do I fix it?

You need to add an environment setting inside your .eslintrc.js file, i.e.:
...
env: {
node: true
},
...
That said, the error in the .eslintrc.js file itself should only appear in Visual Studio Code, because ESLint ignores file names that start with a dot per default.

convert to es5 by writing export default { } instead of module.export = {}

Related

Why is eslint throwing error for .d.ts files in my node project

I have configured eslint for my typescript node project. There is also a file app.d.ts in the repo. On running the lint, I get the following error
error Parsing error: "parserOptions.project" has been set for #typescript-eslint/parser.
The file does not match your project config: src/app.d.ts.
The file must be included in at least one of the projects provided
I have already tried creating tsconfig.eslint.json and its contents are as follows
{
"extends": "./tsconfig.json",
"include": [ "src/**/*.d.ts", "src/**/*.ts", "src/**/*.unit.test.ts", "jest.config.js", "__tests__/**/*.int.test.ts"],
}
And in the .eslintrc.js, I added the parser option
parserOptions: {
sourceType: 'module',
project: './tsconfig.eslint.json',
tsconfigRootDir: './',
},
But Im still getting this error. What am I missing. Any help would be appreciated.
Does the name of your declaration file shadow a typescript file of the same name?
If so you will get this error. Declaration files are for providing types for javascript files so there isn't the need to provide one for a file written in typescript.

no-unused-expressions error in package.json

I am adding a linter to my big existing project. I have enabled "error" for no-unused-expressions. I am using lint-staged to run the linter upon git committing.
my .lintstagedrc.js:
module.exports = {
'*': ['eslint --ext .js,.jsx,.ts,.tsx,.graphql --fix .', 'npx prettier --ignore-path .eslintignore --write'],
}
When trying to git commit (staging includes changes to package.json)
I get:
/Users/myuser/myproject/package.json
1:1 error Expected an assignment or function call and instead saw an expression no-unused-expressions
And my normal-looking package.json:
{
"name": "myproject",
"private": true,
"description": "myproject description",
...
Since json is such a tightly defined format, I have a high degree of confidence it is formatted properly. This leads me to believe it is an eslint setting of some sort. I can't even really be sure why this no-unused-expressions rule would be looking at a json file.
Not sure where to begin diagnosing this one.
The '*' in your .lintstagedrc.js means all files will be checked by eslint, regardless of extension. What you probably want to do is this:
module.exports = {
'*.{js, jsx, ts, tsx, graphql}': ['eslint --fix', 'prettier --ignore-path .eslintignore --write'],
}
By calling eslint on package.json you interpret it as a JavaScript/TypeScript file (based on your configuration). Any JSON file is also a valid JavaScript file that contains a single value that is not assigned to anything, which is called an unused expression and should not normally occur in your code.

ESLint Vue plugin showing false positives for vue/comment-directive

After migrating from VueCLI to Vite, I have to do the linting "manually" as far as I understand; correct me if I'm wrong.
As I only want to lint my .ts and .html files (I separate them even for components), I have this script in my package json:
"lint": "eslint --ext .ts --ext .html src/"
It found some issues like missing :key in loops, but it also shows me this error for each template:
error clear vue/comment-directive
And this is always the closing tag of any root elements within my template.html
If there is only one root element I get one warning for the file, if there are multiple root elements I get a warning for each closing tag.
I don't understand what this rule complains as, according its documentation, it is there for the eslint-disable comments, which I don't have in my templates.
I had the same issue but in nuxt with eslint, i just needed to update eslint-config and eslint-module:
"#nuxtjs/eslint-config": "^5.0.0",
"#nuxtjs/eslint-module": "^3.0.1",
source: https://github.com/nuxt/eslint-plugin-nuxt/issues/121
I've just updated my npm dependencies and I have the same error.
I was reading the eslint documentation and finally I've realized that you can remove the false error if you setup the rule in the .eslintrc.js config file.
this is my .eslintrc.js config file:
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [
'#nuxtjs',
'prettier',
'prettier/vue',
'plugin:prettier/recommended',
'plugin:nuxt/recommended'
],
plugins: [
'prettier'
],
// add your custom rules here
rules: {
"vue/comment-directive": 0
}
}
add the rule "vue/comment-directive": 0 and that is!, the error message is removed!.
the possible values are:
0 means disabled
1 means warning
2 means error
Try to change it in your IDE to how it works
(In my case I've had to stop the server and re-run it every time that I've changed a value in this config file.)
I have the same error.
I was taught how to fix this error.
https://qiita.com/tashinoso/items/a72741ca8e2fd928ca77#comment-3e6cd674353056ecbb3a
module.exports = {
...
overrides: [
{
files: ["*.vue"],
processor: "vue/.vue"
}
]
}
Set this snippet on .eslintrc.js
"vue/comment-directive": ["error", {
"reportUnusedDisableDirectives": false
}]
Solve my issue, i wonder why. Solution from documentation
Node v12.20.0
This is a kind of a temporary fix that worked for me and I think it will work for you as well.
vue/comment-directive
This rule is included in all of "plugin:vue/base", "plugin:vue/essential", "plugin:vue/vue3-essential", "plugin:vue/strongly-recommended", "plugin:vue/vue3-strongly-recommended", "plugin:vue/recommended" and "plugin:vue/vue3-recommended".
ESLint doesn't provide any API to enhance eslint-disable functionality and ESLint rules cannot affect other rules. But ESLint provides processors API.
This rule sends all eslint-disable-like comments as errors to the post-process of the .vue file processor, then the post-process removes all vue/comment-directive errors and the reported errors in disabled areas.
All you need to do is add
eslint-disable-next-line vue/component-tags-order
this line as comment above anywhere you using comments within tags in each block you need to specify if comments are added.
For more information please visit:- https://eslint.vuejs.org/rules/comment-directive.html

jest global variable example

Can someone give an example on how to use jest globals?
{
...
"jest": {
"globals": {
"__DEV__": true,
}
}
...
}
Do I specify the globals in the package.json file or do I create a folder with a js file where the globals should be defined?
Thanks
Yep. You put the globals in the package.json. For example, here's an excerpt from the default react-native jest configuration:
"jest": {
"globals": {
"__DEV__": true,
"__RCTProfileIsProfiling": false
},
...
},
This will make the variables available globally when the tests are run.
A cleaner way to add globals would be to set "setupFiles": "<rootDir>/private/jest/setup.js" in package.json, and then create a setup.js file that sets global.__DEV__ = true.
This pattern is helpful for making 3rd party libraries available as globals to Jest tests as well (like Backbone, jQuery, lodash, etc.) - eg. global.Backbone = require('backbone'); and so on.
(Re-submitting this as an answer as it was previously just a comment under Michael Helvey's answer.)
For me using the Jest config file worked much better because it is a Javascript file itself so it gives full freedom:
After running jest --init in your folder, in the jest.config.js file Jest makes, scroll down to find:
// A set of global variables that need to be available in all test environments
// globals: {},
Uncomment the second line and put all your globals in there.
If you are using create-react-app, you must use the src/setupTests.js file instead of pointing to a file via setupFiles in the package.json file.
https://create-react-app.dev/docs/running-tests/#srcsetuptestsjs
In the src/setupTests.js file, you can define globals like so:
global.TIMEOUT = 3000;
To share object variables (not only primitives as with configuration's globals property), you can use the testEnvironment property.
More explanations here in Jest's Git

In Webpack, how do I set the public path dynamically?

I am using Angular2/Typescript/Webpack to build an application
I'm having problem setting the Webpack option publicPath dynamically. In the official Webpack docs, it says:
Note: In cases when the eventual publicPath of output files isn't known at compile time, it can be left blank and set dynamically at runtime in the entry point file. If you don't know the publicPath while compiling you can omit it and set __webpack_public_path__ on your entry point.
My question: But how do I set this __webpack_public_path__ variable and where?
I thought I would have to set it in src/main.ts, but then I just get compiler error ERROR in ./src/main.ts
Cannot find name '__webpack_public_path__' when I build the project:
Isn't main.ts where I should set this variable? I even tried to set it in the built version of the file, main.js, and that didn't work either. Here is part of my Webpack config where I set the entry point.
config.entry = isTest ? {} : {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts' // our angular app
};
compiler error ERROR in ./src/main.ts
TypeScript compiler errors are mostly just really powerful linting. More on this.
That compiler errors just tells you the TypeScript doesn't know about __webpack_public_path__. Just create globals.d.ts with :
declare var __webpack_public_path__:string;
And you should be golden. More on this 🌹

Resources