module is not defined and process is not defined in eslint in visual studio code - module

I have installed eslint in my machine and i have used visual studio code
i have certain modules and process to be exported
When i try to use "module" or "process" it shows
it was working fine before.
[eslint] 'module' is not defined. (no-undef)
[eslint] 'process' is not defined. (no-undef)
and here is my .eslintrc.json
{
"env": {
"browser": true,
"amd": true
},
"parserOptions": {
"ecmaVersion": 6
},
"extends": "eslint:recommended",
"rules": {
"no-console": "off",
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}
I want to remove this error

You are probably trying to run this in node environment.
The env section should look like this:
"env": {
"browser": true,
"amd": true,
"node": true
},

In your ESLint config file, simply add this:
{
...
env: {
node: true
}
...
}
That should fix the "module" is not defined and "process" is not defined error.
That assumes you are running in a Node environment. There is also the browser option for a browser environment. You can apply both based on your need.
If you want to prevent ESLint from linting some globals then you will need to add the specific global variables in the globals section of the config.
globals: {
window: true,
module: true
}

You need to tell eslint that you are in a Node environment. My favourite way to do this for one-off files like gulpfile.js is to include this comment at the top:
/* eslint-env node */

I think you can just rename all your CommonJS config files to have .cjs as their extension and then add this to eslintrc.cjs:
module.exports = {
// ...
env: {
// If you don't want to change this to `node: true` globally
es2022: true,
},
// then add this:
overrides: [
{
files: ['**/*.cjs'],
env: {
node: true,
},
},
],
}

Related

Docusaurus | ValidationError: "authorsMapPath" is not allowed

I wanna try to use the global "authors" in the blog markdown file "authorsMapPath" this parameter in the docusaurus.config.js file.
However, whatever I tried in the presets or plugins, I always got this error.
A validation error occured.
The validation system was added recently to Docusaurus as an attempt to avoid user configuration errors.
We may have made some mistakes.
If you think your configuration is valid and should keep working, please open a bug report.
ValidationError: "authorsMapPath" is not allowed
Here is my partial setting in the docusaurus.config.js file.
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
// sidebarCollapsible: true,
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/',
},
blog: {
// authorsMapPath: 'authors.yml',
showReadingTime: true,
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/blog/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
plugins: [
[
'#docusaurus/plugin-content-blog',
{
authorsMapPath: 'authors.yml',
// Simple use-case: string editUrl
// editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
// Advanced use-case: functional editUrl
},
],
],
Is there any idea about my error?
Thank you!
I could resolve this issue after I upgraded #docusaurus/preset-classic version from 2.0.0-alpha.72 to 2.0.0-beta.21.
The code became like below:
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
// sidebarCollapsible: true,
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/',
},
blog: {
authorsMapPath: 'authors.yml',
showReadingTime: true,
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/blog/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],

Error evaluating function `ceil`: argument must be a number

On OSX, after I installed all of dependencies by yarn install, The webpack bundle's output keeps showing the error Error evaluating function ceil: argument must be a number.
I have no idea why this happen but it works on my linux machine with the same package.json
Some info:
webpack: "5.56.0"
less: "^4.1.2"
less-loader: "^10.0.1"
Here is my less-loader config:
{loader: "less-loader"}
It looks like the there is a change of the default options of less based on what I've found in here
https://lesscss.org/usage/#less-options-math
The solution is adding the option for less-loader in webpack config as following:
{
loader: "less-loader",
options: {
lessOptions: {
math: 'always' // <=== add this
}
}
}
Also you should change => strictMath: false
Example (my file config-overrides.js):
const addLessLoader = require("customize-cra-less-loader");
module.exports = override(
addLessLoader({
cssLoaderOptions: {
sourceMap: true,
modules: {
localIdentName: "[hash:base64:8]",
},
},
lessLoaderOptions: {
lessOptions: {
math: "always",
modifyVars: { "#primary-color": "#2a4365" },
javascriptEnabled: true,
strictMath: false,
},
},
})
);

How to do module name alias for third party package

I have a app that created by react-native init command.
My app import websocket package which in turn require http package and cause error said "Unable to resolve module http".
i.e: myApp -> 3rd-module -> ws -> http
I try to work-around by install "#tradle/react-native-http", and added follow lines to my app's package json file:
"browser": { "http": "#tradle/react-native-http" },
"react-native": { "http": "#tradle/react-native-http" },
but it doesn't work.
I also try using babel-plugin-module-resolver but unluck either. Here is my .babelrc :
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
["module-resolver", {
"alias": {
"#tradle/react-native-http": "http"
}
}]
]
}
How to do alias for my case? I research to fixing this problem by using webpack configuration, but don't know where is the configure file. After google, i think project created by react-native init use metro config instead of webpack.
try
["module-resolver", {
"alias": {
"http":"#tradle/react-native-http"
}
}]

Webdriver io autocomplete in VS Code

I'm using Webdriver IO as the e2e testing framework. But this autocomplete issue is really slowing me down. VS Code doesn't auto complete the global variable browser and it's methods.
.eslintrc
{
"extends": ["eslint:recommended", "standard"],
"parser": "babel-eslint",
"plugins": [
"mocha",
"webdriverio"
],
"env": {
"webdriverio/wdio": true,
"mocha": true
},
"parserOptions": {
"ecmaVersion": 8,
"sourceType": "module"
},
"rules": {
"indent": ["error", 4]
}
}
.babelrc
{
"presets": ["es2015"],
"plugins": [
["transform-runtime", {
"polyfill": false
}]
]
}
I think you can use TypeScript typings.
Add 2 dependencies to package.json:
"#types/node": "^8.5.2",
"#types/webdriverio": "^4.8.7",
Install them, reload project. If autocomplete does not yet works, create
tsconfig.json in root of your project:
{
"compilerOptions": {
"allowJs": true,
"outDir": "./.built/"
}
}
You don't need to use typescript compiler, it will just provide autocomplete. Continue writing your js code as usual.
But if you wish to use typescript, here is small beginner guide:
http://webdriver.io/guide/getstarted/configuration.html#Setup-TypeScript

karma-eslint preprocessor not working

I'm using karma-eslint plugin. It looks very easy to use but for some reason, I don't see any errors or warnings and my tests are running smoothly even though I put some eslint errors
here is my karma.config.js file:
module.exports = function (config) {
config.set({
browsers: [process.env.CONTINUOUS_INTEGRATION ? 'Firefox' : 'Chrome'],
singleRun: true,
frameworks: ['mocha'],
files: [
'tests.webpack.js'
],
preprocessors: {
'tests.webpack.js': ['webpack', 'sourcemap'],
'src/**/*.jsx': ['coverage'],
'test/**/*.js': ['eslint'],
},
eslint: {
engine: {
configFile: './.eslintrc',
emitError: true,
emitWarning: true
}
},
reporters: ['progress', 'coverage'],
coverageReporter: {
/* coverage configurations */
},
webpack: {
/* some webpack configurations */
}
The violation I planted in the one of my test.js files - define a new variable but not using it (eslint rule: 'no-unused-vars')
Please let me know if any further information is needed and I'll edit the post accordingly.
Cheers!
Found another solution!
in my webpack configuration I've used the eslint-loader' forwebpack` as follows:
webpack: {
module: {
preLoaders: [
{test: /\.js$/, exclude: /(src|node_modules)/, loader: 'eslint-loader'}
]
}
}