Develop Reference

Webpack config error with html-webpack-plugin for creating index.html

I'm trying some POC with webpack for bundling project JS files.
I want to create an index.html file under output dist folder via webpack. For this purpose as per webpack documentation, installed "html-web-plugin" via npm as :
npm install --save-dev html-webpack-plugin
It updates in package.json file as below:
"devDependencies": {
"html-webpack-plugin": "^4.3.0"
}
Used this plugin in webpack.config.js as per documentation of webpack:
const HtmlWebpackPlugin = require('html-webpack-plugin');
And inside config object:
plugins: [
new HtmlWebpackPlugin(
title: 'Output Management'
)
],
To run npm scripts, used below code in package.json file:
"scripts": {
"devNoServer": "webpack --d --watch",
"dev": "webpack-dev-server",
"build": "webpack -p",
"test": "echo \"Error: no test specified\" && exit 1"
},
On running npm run dev OR npm run build command, getting below error which seems related to html-web-plugin:
/<PROJECT_PATH>/node_modules/webpack-dev-server/bin/webpack-dev-server.js:373
throw e;
^
TypeError: Cannot read property 'make' of undefined
at PersistentChildCompilerSingletonPlugin.apply (/<PROJECT_PATH>/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:182:20)
at new CachedChildCompilation (/<PROJECT_PATH>/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:68:44)
at HtmlWebpackPlugin.apply (/<PROJECT_PATH>/node_modules/html-webpack-plugin/index.js:92:33)
at Compiler.apply (/<PROJECT_PATH>/node_modules/tapable/lib/Tapable.js:375:16)
at webpack (/<PROJECT_PATH>/node_modules/webpack/lib/webpack.js:33:19)
at startDevServer (/<PROJECT_PATH>/node_modules/webpack-dev-server/bin/webpack-dev-server.js:367:16)
at /<PROJECT_PATH>/node_modules/webpack-dev-server/bin/webpack-dev-server.js:358:5
at /<PROJECT_PATH>/node_modules/portfinder/lib/portfinder.js:196:16
at /<PROJECT_PATH>/node_modules/async/dist/async.js:473:16
at replenish (/<PROJECT_PATH>/node_modules/async/dist/async.js:1006:25)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-sample-broken#1.0.0 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-sample-broken#1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /<USER_DIR>/.npm/_logs/2020-06-17T14_50_38_388Z-debug.log
Without using "html-webpack-plugin", npm run dev OR npm run build command works fine and create bundle.js in dist folder.
Is there something I'm doing wrong for using "html-webpack-plugin"?? I'm unable to find this error and it's fix anywhere.
Any input/ solutions will be really helpful.

Ok after hours of looking here and there, reading loads of documentation.This worked for me.
I was using this "html-webpack-plugin": "^4.3.0"
So I reverted back to using html-webpack-plugin#2.24.1 and the make command worked.
Dont know for sure but could be version's issue.

How to continue running scripts defined in package.json in case one fails?

I have this in package.json file:
{
"name": "test demo",
"version": "1.0.0",
"description": "test demo scripts",
"scripts": {
"test:v1": "wdio src/resources/config/wdio.chrome.conf.js --spec test/Tests.spec.ts",
"test:v2": "wdio src/resources/config/wdio.firefox.conf.js --spec test/Tests.spec.ts",
"test": "npm run test:v1 && npm run test:v2"
},
...
}
When run this command:
npm run test
then if test:v1 fails, then test:v2 script is not executed at all.
Is there a way to configure this so that all scripts run regardless if some of them failed?
EDIT:
When I try this in package.json:
"test": "npm run test:v1 ; npm run test:v2"
Then I still don't get both scripts executed, just test:v1 gets executed with error.
This is what I get in the console:
C:\2020\demo>npm run test
> demo#1.0.0 test C:\2020\demo
> npm run test:v1 ; npm run test:v2
> demo#1.0.0 test:v1 C:\2020\demo
> wdio src/resources/config/wdio.chrome.conf.js --spec test/Tests.spec.ts ";"
"npm" "run" "test:v2"
Execution of 1 spec files started at 2020-06-12T15:16:42.936Z
[0-0] RUNNING in chrome - C:\2020\demo\Tests.spec.ts
... other log with failing tests ...
Spec Files: 0 passed, 1 failed, 1 total (100% completed) in 00:00:27
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! demo#1.0.0 test:v1: `wdio src/resources/config/wdio.chrome.conf.js --spec test/Tests.spec.ts ";" "npm" "run" "test:v2"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the demo#1.0.0 test:v1 script.
npm ERR! This is probably not a problem with npm. There is likely additional
logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\<User>\AppData\Roaming\npm-cache\_logs\2020-06-
12T15_17_10_512Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! demo#1.0.0 test: `npm run test:v1 ; npm run test:v2`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the demo#1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional
logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\<User>\AppData\Roaming\npm-cache\_logs\2020-06-
12T15_17_10_548Z-debug.log
If I try like this in package.json:
"test": "npm run test:v1; npm run test:v2"
Then I get this in the console:
npm ERR! missing script: test:v1;
npm ERR!
npm ERR! Did you mean one of these?
npm ERR! test:v1
npm ERR! test:v2
Thanks!

The solution for this differs depending on which OS you are using because NPM utilizes a different shell for running npm scripts.
On *nix, (Linux, macOS, etc..), the default shell that npm utilizes for running npm scripts is sh.
On Windows the default shell that npm utilizes for running npm scripts is cmd.exe.
Check which shell npm is using?
Using the npm config command you need to check the value of the script-shell setting. To do this you can run the following command:
npm config get script-shell
It will typically return/print either the pathname to cmd.exe or sh - depending on which OS your using.
Solution:
If you're running Windows and the default shell is cmd.exe
Then change your test script in package.json to the following:
"test": "npm run test:v1 & npm run test:v2"
Note the double ampersand (&&) has been replace with a single ampersand (&).
Or...
If you're running *nix and the default shell is sh
Then change your test script in package.json to the following:
"test": "npm run test:v1; npm run test:v2"
Note the double ampersand (&&) has been replace with a single semi-colon (;).

npm run test:v1; npm run test:v2
; means run the next command regardless of the success of the previous one.
&& means only run the next command if the previous one succeeded.

Babel CLI --out-dir runs into permissions errors on second compile

I'm running into a strange error that seems to be giving me permissions issues on Windows 10. I'm using the Babel CLI to compile some ES6 code, which works great using --out-file, which will overwrite files just fine, by --out-dir doesn't. Here's the relevant parts of my package.json:
{
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-minify": "^0.2.0",
"babel-preset-env": "^1.6.0"
},
"scripts": {
"build-components": "babel Scripts/Components --out-file Scripts/Compiled/components.js",
"build-pages": "babel Scripts/Pages --out-dir Scripts/Compiled/Pages",
"watch-components": "babel Scripts/Components -w --out-file Scripts/Compiled/components.js",
"watch-pages": "babel Scripts/Pages -w --out-dir Scripts/Compiled/Pages",
"build-js": "npm run build-components && npm run build-pages"
}
}
I'm building this within Visual Studio and using the Task Runner Explorer package to run my commands (though it still fails from PowerShell, or running it as a build command within the project). The plugin runs 'npm run build-js' on build and 'npm run watch-components' and 'npm run watch-pages' afterwards to watch for any changes. 'npm run watch-pages' fails every time, as does 'npm run build-pages' if the files it outputs to already exist. The only solution I've found so far is to delete the 'Scripts/Compiled/Pages' folder every time I make a change to a file within 'Scripts/Pages', which defeats the purpose of the watch command and is generally just annoying to have to do every time, especially when I'm doing a lot of file changes. Both build commands for the components works every time and will overwrite the old file without issue.
> babel Scripts/Pages --out-dir Scripts/Compiled/Pages
Error: EPERM: operation not permitted, open 'D:\Projects\PasswordReset\Trunk\STS.PasswordReset.Web\Scripts\Compiled\Pages\Index.Vue.js'
at Error (native)
at Object.fs.openSync (fs.js:584:18)
at fs.writeFileSync (fs.js:1224:33)
at outputFileSync (D:\Projects\PasswordReset\Trunk\STS.PasswordReset.Web\node_modules\output-file-sync\index.js:45:3)
at write (D:\Projects\PasswordReset\Trunk\STS.PasswordReset.Web\node_modules\babel-cli\lib\babel\dir.js:33:5)
at handleFile (D:\Projects\PasswordReset\Trunk\STS.PasswordReset.Web\node_modules\babel-cli\lib\babel\dir.js:43:7)
at D:\Projects\PasswordReset\Trunk\STS.PasswordReset.Web\node_modules\babel-cli\lib\babel\dir.js:61:9
at Array.forEach (native)
at handle (D:\Projects\PasswordReset\Trunk\STS.PasswordReset.Web\node_modules\babel-cli\lib\babel\dir.js:59:29)
at Array.forEach (native)
npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\Enterprise\\Web\\External\\Node.exe" "C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\Enterprise\\Web\\External\\node_modules\\npm\\bin\\npm-cli.js" "run" "build-pages" "--color=always"
npm ERR! node v5.4.1
npm ERR! npm v3.3.4
npm ERR! code ELIFECYCLE
npm ERR! STS-VueApp#1.0.0 build-pages: `babel Scripts/Pages --out-dir Scripts/Compiled/Pages`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the STS-VueApp#1.0.0 build-pages script 'babel Scripts/Pages --out-dir Scripts/Compiled/Pages'.
npm ERR! This is most likely a problem with the STS-VueApp package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! babel Scripts/Pages --out-dir Scripts/Compiled/Pages
npm ERR! You can get their info via:
npm ERR! npm owner ls STS-VueApp
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! D:\Projects\PasswordReset\Trunk\STS.PasswordReset.Web\npm-debug.log
Process terminated with code 1.
I thought maybe it was something having to do with the files not being included in my project, because I get a similar error from the component builds if my 'Scripts/Compiled' folder isn't included in the project, but including 'Scripts/Compiled/Pages' still gives me the same error and including the actual output file, ie: 'Scripts/Compiled/Pages/Index.js' doesn't fix it either.
Any ideas?? :\

It's only my thoughts. But, can you please double check:
do you run VS as Administrator?
do you run Task Runner Explorer as Administrator?
Make sure that both works under Administrator.

I'm running into something similar and the problem looks to be that babel is moving over the read only attrib on files that are under source control from VSS, i.e you pull a file from VSS it comes down with read only. The watch on it transpiles it to your target folder with read only on it. Subsequent transpiles fail as the target file won't get overwritten when it's set to read only.
I'm still working on the right solution to this but at the moment I have hacked up temp fix via a task runner command that removes read only on the entire target folder.
"babelJsxTranspileInit": "attrib -r [targetFolder] /s",

How to propagate npm script command line arguments?

My package.json has few scripts defined in this manner.
{
"name": "project",
"scripts": {
"standard": "./node_modules/.bin/standard",
"lint": "npm run standard",
"lint:fix": "npm run lint -- --fix"
}
}
When I execute $ npm run lint:fix I find that the argument --fix does not propagate to ./node_modules/.bin/standard. This is the output that I get.
bash-3.2$ npm run lint:fix
> project#0.0.1 lint:fix /path/to/my/project
> npm run lint -- --fix
> project#0.0.1 lint /path/to/my/project
> npm run standard "--fix"
> project#0.0.1 standard /path/to/my/project
> standard
standard: Use JavaScript Standard Style (http://standardjs.com)
standard: Run `standard --fix` to automatically fix some problems.
/path/to/my/project/data/someFile.js:38:34: Extra semicolon.
npm ERR! Darwin 16.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "standard" "--fix"
npm ERR! node v6.9.4
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
Here there's an error because --fix argument didn't propagate correctly.
Well, my question is not around linting or standardJs. I would like to know how to get the arguments propagate correctly till the top level script.

Well, this is what I found after sweating a lot on this issue. (It is very silly, though).
The error was caused not because the argument didn't propagate. Instead, it was because the --fix flag in standard doesn't auto-fix the semicolon issues during linting.
In the given set of scripts (in the question). The argument successfully propagated. Therefore, that's the way to propagate arguments till the top level script.

You shouldn't need a double -- -- in your npm script.
Your lint:fix script should be: "npm run lint --fix"

NPM rimraf - continue executing when folders are missing (stop exit code 1)

I have an npm script set up to a few synchronous commands. The starting command is npm run clean:install".
Here is the sequence:
"install:all": "npm install && bower install",
"clean": "npm run rimraf -- node_modules doc typings coverage wwwroot bower_components"
"preclean:install": "npm run clean",
"clean:install": "npm set progress=false && npm run install:all"
Works fine if all directories exist. The problem is if any of the directories are already deleted, the script exists with code 1 and prevents all additional syncronous scripts from running.
So that means it failes to run the original command of clean:install which is " "clean:install": "npm set progress=false && npm run install:all"
Error from npm:
npm ERR! angular2-webpack-starter#5.0.4 clean: `npm cache clean && npm run
rimraf -- node_modules doc typings coverage wwwroot bower_components`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular2-webpack-starter#5.0.4 clean script 'npm cache clean && npm run rimraf -- node_modules doc typings coverage wwwroot bower_components'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-webpack-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm cache clean && npm run rimraf -- node_modules doc typings coverage wwwroot bower_components
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2-webpack-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular2-webpack-starter
npm ERR! There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
The last line gives it away. It wants node_modules but can't find it so it fails.
How can I make my script continue executing to ignore these failures (missing directories)?
EDIT: The error occurs because rimraf is removing node_modules and wiping itself out. Once the folder it cleared, rimraf is gone and exit code 1. Can I exclude the rimraf folder within node_modules so it exists correctly?

I am (probably) looking at this boilerplate project you're using. Did you read the instructions? They are asking you to run npm install typings webpack-dev-server rimraf webpack -g, which includes installing rimraf globally, before even using the project. If you've failed to do this, using the npm run clean:install, or anything which calls this script, will fail because the rimraf module can't be found in your local node_modules (if already removed) or it will be deleting itself.

The solution was a bit tricky. The problem was because rimraf was removing itself since it was only installed locally in node_modules. So as soon as it removed the node_modules dir, the program died.
I realized it was necessary to add a task to have it install rimraf globally. The first task that executes is install:all. Then rimraf is in the global PATH. However, rimraf was a dependency for many other node_modules, so it kept getting installed locally and therefore ignored the global PATH. It kept dying because it was still referencing the local node_modules folder.
The trick was to uninstall rimraf locally right before executing any rimraf command. Now it's forced to use the global PATH because it doesn't exist locally.
"preinstall:all": "npm install typings webpack-dev-server rimraf webpack -g",
"install:all": "npm install && bower install",
"prerimraf": "npm uninstall rimraf",
"rimraf": "rimraf",
"clean": "npm run rimraf -- node_modules doc typings coverage wwwroot bower_components"
"preclean:install": "npm run clean",
"clean:install": "npm set progress=false && npm run install:all"
After install:all has been executed on project load (in Visual Studio 2015, Task Runner Explorer has a binding called Project Open), there are times I want to clean everything and start fresh. Now I can simply execute clean:install and uninstall node_modules and reinstall immediately with no problem! Exit code 0. Sweet!