Develop Reference

GET result was undefined/null in IE11, until a change was made to webpack file. Any ideas why?

I'm making multiple GET requests within a project and all of them were fine in IE11 except for a particular call.
The error was something like: Unable to get property X of undefined or null reference. Expanding the error mentioned anonymous functions.
I readjusted my webpack.test.js file (I realized it had been changed) and I brought back a block of code. Doing this caused the request to run properly.
module.exports = merge({
entry: {
'/SiteAssets/scripts/somefile': './src/index.js'
}
},
common, {
mode: 'production',
devtool: 'cheap-module-eval-source-map', // This line and the devServer block were brought back
devServer: {
contentBase: './dist',
compress: true,
historyApiFallback: false
}, //
stats: {
colors: false,
hash: true,
timings: true,
assets: true,
chunks: true,
chunkModules: true,
modules: true,
children: true,
}
}
);
Any ideas as to why this worked? I've been trying to think of reasons why, but I haven't had any luck. I'm interested in finding out so I can avoid it in the future, if possible.

I did some debugging with a more experienced dev, and although commenting out the code from the webpack file did work, it didn't tackle the root of the problem.
In the code below, it appeared that there was a timing delay with getRandomInt(), to where IE11 was too slow. The issue was resolved by "slowing down" the code with two console.logs.
function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
async function loadCommunityArticle(issueID) {
axios.get(`${_something}/news/_api/lists/GetByTitle('News')/Items?$select=ID,Created,OtherThings&orderby=ID desc&$top=50`, restHeaders)
.then(resp => {
let _data = resp.data.d.results;
if(_data && _data.length > 0) {
let rand = getRandomInt(0, _data.length - 1);
console.log(rand);
let item = _data[rand];
console.log(item);
// other code
After making the changes, the request hasn't failed in IE since.

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.

Exclude a module from webpack bundle

I'd like the same functionality like RequireJS empty: http://requirejs.org/docs/optimization.html#empty
My use-case is that I include jquery-migrate in development, but I'd like to exclude this when built for production.
Using IgnorePlugin just makes it not included, and when requireing it in the code, it then throws an error (Uncaught Error: Cannot find module "jquery-migrate").
What I'd like to happen is for it to just return undefined, or something of the like (like empty: in RequireJS). Id like to not touch the import in the code, just configuring it to return undefined.
EDIT: Using NormalModuleReplacementPlugin works, if I point the replacement to an empty file. But keeping an empty file around just for this seems unnecessary.

I use the null-loader for blanking out modules.
The noop-loader can be used for a less awkward if-else in the config.
Try:
rules: [{
test: /jquery-migrate/,
use: IS_DEV ? 'null-loader' : 'noop-loader'
}]

You can try to make a resolve.alias in webpack.config:
resolve: {
alias: {
"jquery-migrate": process.env.NODE_ENV === 'production' ? "empty-module": "jquery-migrate"
}
}

Use Webpack's DefinePlugin in combination with the normal production plugins (Dedupe and Uglify).
Then in your code you can write:
if(DEBUG) {
var test = require('test');
alert(test);
}
And when it's built in production, the DEBUG will be replaced with a literal if(false) { ... } which will be completely removed by the uglify plugin, so test will only be required in a debug build.
Here's a sample Grunt task config for grunt-webpack that has development and production targets for the task:
development: {
devtool: "sourcemap",
output: {
pathinfo: true,
},
debug: true,
production: false,
plugins: [
new webpack.DefinePlugin({
DEBUG: true,
PRODUCTION: false
})
]
},
production: {
plugins: [
new webpack.DefinePlugin({
DEBUG: false,
PRODUCTION: true
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
output: {
comments: false,
}
})
]
},

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?

How to set jshint.options using gradle-js-plugin?

I am using gradle-js-plugin version 1.9.0 and I am having trouble configuring global variables. So far I've tried the following:
Creating the .jshintrc file in my project home directory. .jshintrc file looks like:
{
"globals": {
"NoesisCode" : false
}
}
Updating the jshint.options array inside the jshint configuration.
jshint.options = [
expr: "true",
unused: "true",
curly: "true",
global: [
"NoesisCode": false
]
]
Any help with this would be much appreciated.
Thank you in advance.

Use the
jshint.predef = [
"NoesisCode": false
]