Develop Reference

ESLint throwing unpredicted errors with Hardhat

I recently began a project which uses hardhat. I ran npx hardhat ., and went with the advanced TS project.
Everything works fine, from the types to the solidity compiling, but ESLint always complains...
This is the kind of error I keep seeing:
As you can see the types are there, but ESLint continues to throw errors. This luckily doesn't stop the app to run.
Here is my config file:
module.exports = {
env: {
browser: false,
es2021: true,
mocha: true,
node: true
},
plugins: ['#typescript-eslint'],
extends: ['standard', 'plugin:node/recommended'],
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaVersion: 12
},
rules: {
'node/no-unsupported-features/es-syntax': [
'error',
{ ignores: ['modules'] }
]
}
}

I've spent a lot of time on this issue, and the best method for me was to remove everything.
1 - Create a .ptettierrc.json file the root of your project.
2 - Run yarn remove eslint-plugin-promise eslint-plugin-node eslint-plugin-import eslint-config-standard eslint-config-prettier
3 - Change your ESLint config to the one below:
module.exports = {
env: {
browser: false,
es2021: true,
mocha: true,
node: true
},
plugins: ['#typescript-eslint'],
extends: ['plugin:prettier/recommended'],
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaVersion: 12
},
rules: {
'node/no-unsupported-features/es-syntax': [
'error',
{ ignores: ['modules'] }
]
}
}
Keep in mind this is for a fresh config, if you've already changed your config, just remove any mentions of the package we removed on step 2.

arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6')

Currently I'm running my tests with protractor/grunt but I'm getting the follow error message:
'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6').
I think my .jshintrc file is not being read, because I've added this condition.
.jshintrc
{
"esversion": 6
}
Gruntfile.js
jshint : {
all: ["tests/API/**/*.js"],
options: {
undef: true,
mocha: true,
node: true,
jshintrc: true,
esversion: 6,
globals: {
require: true,
module: true,
console: true,
esversion: 6,
}
},
ui: ["tests/UI/**/*.js"],
options: {
undef: true,
mocha: true,
node: true,
jshintrc: true,
esversion: 6,
globals: {
require: true,
module: true,
console: true,
esversion: 6,
jshintrc: true,
}
}
}
Any idea to solve this problem?

I was able to resolve this issue by adding this block of code at the top of each file.js that accused the error
/*jshint esversion: 6 */
Example:

It is not possible to add /*jshint esversion: 6 */ in each file.js file.
Instead of above, please do below changes if you are using Visual Studio Code: -
Open Visual Studio Code
File -> Preferences -> Settings
Default User Settings -> JSHint configuration
look for "jshint.options": {},
change it to "jshint.options": {"esversion": 6}, by clicking on Edit on the left

You can do more project-specific settings by following these steps.
Create a folder with the name of .vscode at the root of your project directory
Create a file with the name settings.json
Add the following content into it.
{
"jshint.options": {
"esversion": 6
}
}
You can add some more settings to keep things consistents across your team.
{
"editor.tabSize": 2,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"jshint.options": {
"esversion": 6
}
}

Add the following into your package.json:
"jshintConfig": {
"esversion": 6
}

I have this problem after I installed JSHint. The process for me to solve this problem as below:
Preference -> setting -> Extensions -> JSHint Configuration -> options -> add
"jshint.options": {"esversion": 6}
Done.

Running webpack with watch enabled and starting server

I am using webpack to bundle my express server, and would like to utilize the webpack watcher. I am using nodemon to restart my server when the bundle changes.
I can manually run webpack with the watcher in one terminal and start nodemon in a second, but I would, ultimately, like to be able to kick off both processes cleanly using only the "npm start" script.
ex. Webpack Bundles -> Nodemon Starts -> Webpack Watchers Start
Does anybody have any thoughts on this topic?

I ended up creating a custom build script using the Webpack/Nodemon Node APIs as opposed to the CLIs. This option provided much more flexibility for me to customize the terminal output to my liking.
import webpack from 'webpack';
import nodemon from 'nodemon';
import webpackConfig from './webpack.config.babel';
const compiler = webpack(webpackConfig);
compiler.run((runErrors, runStats) => {
console.log(runStats.toString({
cached: false,
colors: true,
assets: true,
chunks: false,
chunkModules: false,
chunkOrigins: false,
errors: true,
errorDetails: true,
hash: false,
modules: false,
timings: false,
warnings: false,
version: false,
}));
console.log();
nodemon({
script: 'build/server.bundle.js',
watch: 'build/server.bundle.js'
}).on('restart', () => {
process.env.NODEMON_STATUS = 'restarted';
});
compiler.watch({}, (watchErrors, watchStats) => {
const hasErrors = watchErrors || watchStats.hasErrors();
if (hasErrors) {
console.log((watchStats.toString({
cached: false,
colors: true,
assets: false,
chunks: false,
chunkModules: false,
chunkOrigins: false,
errors: true,
errorDetails: true,
hash: false,
modules: false,
timings: false,
warnings: false,
version: false,
children: false,
reasons: false,
source: false,
})));
}
});
});
process.on('SIGINT', () => {
process.exit(0);
});
process.on('SIGTERM', () => {
process.exit(0);
});
process.on('SIGUSR2', () => {
process.exit(0);
});
process.on('exit', () => {
process.exit(0);
});

If nodemon automatically restart your server on file changes you can use a package called concurrently.
First install concurrently as a dev dependency.
npm i concurrently --save-dev
After that edit your package.json
"start": "**webpack build** && concurrently --kill-others \"nodemon app.js\" \"**webpack watch**\""
ps: I added ** placeholders, you should change the commands between them with your commands which builds and watches.

MyCntrl is not defined on page after using requirejs on controller script files

I am using angular, grunt and bower in my application
I load the javascript files like this in my index.html file:
I define requirejs in Gruntfile as, where dep1 and dep2 are other controllers that will be used by MyCntrl.
requirejs: {
compile: {
options: {
baseUrl: './app',
removeCombined: true,
mainConfigFile: './config/config.js',
include: [ 'scripts/controllers/mycntrl.js''scripts/controllers/dep1.js', 'scripts/controllers/dep2.js' ],
out: './app/requirejs/appIdeas-combined.js',
uglify2: {
output: {
beautify: true
},
compress: {
sequences: false,
global_defs: {
DEBUG: false
}
},
warnings: true,
mangle: false
},
}
}
}
When I access my application I get
Error: [ng:areq] Argument 'myCntrl' is not a function, got undefined
http://errors.angularjs.org/1.5.3/ng/areq?p0=myCtrl&p1=not%20a%20function%2C%20got%20undefined
and when I look at appIdeas-combined.js I see this:
angular.module("MyApp").controller("MyCntrl", function($rootScope, dep1, dep2) {
function initialize() {
So is it possible to combine all of my controllers into one javascript file?
Once I get this to work I will try to add the other javascript files into this.

Grunt: Running tasks after "jasmine_node"

I'm implementing my own XML/HTML-reporting tool for test-automation using grunt, jasmine_node and some other tools. Unfortunately I need to run some tasks right after jasmine_node --> in fact I only use jasmine_node for creating junit xml reports :D
The problem is: When jasmine is done with testing, it is exiting the task chain (whether I use forceexit or not). But I need the following tasks to be executed.
See below my config:
jasmine_node: {
options: {
forceExit: true,
match: '.',
matchall: false,
extensions: 'js',
specNameMatcher: 'spec',
includeStackTrace: false,
jUnit: {
report: true,
savePath : "test-automation/test-xml/",
useDotNotation: true,
consolidate: true
}
},
all: ['test-automation/test-specs/']
},
And here comes the chain:
grunt.registerTask('test', ['jasmine_node', 'junit_xml_merge', 'open', 'connect']);
What am I doing wrong here?