Gulp - throw er; // Unhandled 'error' event - angularjs

gulp-htmlmin throwing err like
events.js:183
throw er; // Unhandled 'error' event
^
Error: Parse Error: <!-- END PAGE CONTENT WRAPPER
This same code work with other project but when I'm running gulp it is throwing error like this. How can I resove this.
here, my gulp file code
let gulp = require('gulp');
let htmlmin = require('gulp-htmlmin');
//Pages
gulp.task('pages', function () {
gulp.src(['./src/**/*html'])
.pipe(htmlmin({
collapseWhitespace: true,
removeComments: true
}))
.pipe(gulp.dest('./public'));
});
gulp.task('default', ['pages']);
Can anyone help?
Thanks in advance.

If the code is working on other machines it’s usually either:
One of the gulp dependencies doesn’t work with your version of node. Type node -v into your terminal and compare that with your coworkers. I’d recommend the LTS version of node as it’s the most stable
Somewhere down the line your node_modules became corrupt. Try deleting the entire node_modules directory and run npm install

Thank you all for comments and answer.
I got the solution. I've re-install all node modules (as per Joe Rushton's suggestion) and add gulp-util module to track error. I've found <!-- END PAGE CONTENT WRAPPER is unfinished comment in HTML file, it should be like <!-- END PAGE CONTENT WRAPPER -->.

Related

Uncaught TypeError: Cannot read properties of undefined (reading 'call') at Hash.CipherBase

I am using create-hash package (https://github.com/crypto-browserify/createHash) in my code of ionic react application.
I have installed the package using npm install create-hash
I am using the function as following:
const hash = createHash('sha256')
.update("entropyBuffer")
.digest();
However, it throws the following error in the browser:
When I change the algorithm to the following: 'md5', 'rmd160' and 'ripemd160', it works fine. I don't understand what is the problem?
I have looked at the similar queries online but nothing was helpful.
https://github.com/crypto-browserify/cipher-base/issues/11
How to generate a Mnemonic in Angular (with npm package bip39 for Solana)
Referring to the original answer here - Link
patch-package helped me:
npm i patch-package
in the package.json add this line:
"scripts": {
"postinstall": "patch-package",
}
opend the problem file and correct it. In my case:
node_modules/cipher-base/index.js
var Buffer = require('safe-buffer').Buffer
var Transform = require('readable-stream').Transform // replacing instead of "stream"
var StringDecoder = require('string_decoder').StringDecoder
var inherits = require('inherits')
function CipherBase (hashMode) {
...
run the command from a root dir of your project:
npx patch-package cipher-base
it'll create a new folder patches in the root dir and add there this fix. That's all. Commit changes. It'll automaticaly replace code in the node_modules after reinstalling packages

Getting Module parse failed: Unexpected token (3042:46) this error in reactJS

Guyz getting this error i have added pdf.js file also and i'm upgrading node version that time i have got this error if anyone know please let me know
Failed to compile.
./node_modules/pdfjs-dist/build/pdf.js 3042:46
Module parse failed: Unexpected token (3042:46)
File was processed with these loaders:
./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| key: "getJSActions",
| value: function getJSActions() {
return this._jsActionsPromise ||= this._transport.getPageJSActions(this._pageIndex);
| }
| }, {
It's a compile error. Node said "you need an additional loader to handle this issue" which means while you update you node, something happens in one of your loader file. You should re-install "the issue loader" and then run it again. Are you building your app with CRA template? if so, you should re-install CRA template again and then move all files into the new project folder and run it.
I hope you find a solution! :D

I keep getting the Error: Cannot find module 'webpack-CLI/bin/config-yargs'

I'm using this tutorial to make a React app. I have the most updated webpack-CLI 4.2.0 in devDependencies. I looked in node_modules/webpack-cli/bin/config-yargs but its not there. It only goes as far as 'bin' and it has one file in it. It's also telling me about
`(/Users/danielengel/Desktop/Project portfolio/watches/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)`
It has
// webpack-cli#3.3 path : webpack-cli/bin/config/config-yargs
let configYargsPath;
try {
require.resolve('webpack-cli/bin/config/config-yargs');
configYargsPath = 'webpack-cli/bin/config/config-yargs';
} catch (e) {
configYargsPath = 'webpack-cli/bin/config-yargs';
}
// eslint-disable-next-line import/no-extraneous-dependencies
// eslint-disable-next-line import/no-dynamic-require
require(configYargsPath)(yargs);
, And at the top of the file it has
`const yargs = require('yargs');
I've tried commenting out some of the code, or uncommenting in the node_modules but I know that's a bad idea. I also tried uninstalling and reinstalling the webpacks with NPM. I tried changing it to a regular dependency instead of dev-dependency. I tried installing it globally too.
Try using webpack serves instead of webpack-dev-server in package.json

`_Symbol.'for'`: Is that actually valid ES6? Webpack built it from React source

I'm trying to take React 0.14 for a spin before I upgrade it in my project. However, with a simple "hello world" prototype, Webpack is throwing an error:
ERROR in ./~/react/lib/ReactElement.js
Module parse failed: /home/dan/Demos/reactiflux/node_modules/babel-loader/index.js!/home/dan/Demos/reactiflux/node_modules/react/lib/ReactElement.js Line 25: Unexpected string
You may need an appropriate loader to handle this file type.
| // The Symbol used to tag the ReactElement type. If there is no native Symbol
| // nor polyfill, then a plain number is used for performance.
| var REACT_ELEMENT_TYPE = typeof _Symbol === 'function' && _Symbol.'for' && _Symbol.'for'('react.element') || 0xeac7;
|
| var RESERVED_PROPS = {
# ./~/react/lib/ReactMount.js 18:19-44
I do have babel-loader configured, and when I downgrade to React 0.13, everything works. What really stands out to me, is _Symbol.'for', in the middle of the error message.
In react/lib/ReactElement.js on line 21 (not 25), that line looks much more correct, with square brackets around the 'for' key:
var REACT_ELEMENT_TYPE = typeof Symbol === 'function' && Symbol['for'] && Symbol['for']('react.element') || 0xeac7;
I assume that the code shown in the error message is either in an intermediate state during compilation, or is the final compiled output. Does anyone know what could cause Webpack to produce something that looks so wrong? Has anyone successfully used Webpack, Babel and React ~0.14.1 together yet?
update
There is an issue for this: https://github.com/babel/babel/issues/2377
It's closed, but it looks like it came back for me. This was fixed in 5.8.25, but I have 5.8.29 and I still hit the bug.
It appears that the problem has something to do with me including babel runtime. My .babelrc was copied from an older project:
{
"optional": "runtime",
"stage": 0
}
In this little hello-world demo, there is nothing that requires bundling the runtime, so I just removed it, after noticing that https://github.com/DominicTobias/universal-react/, which also uses the same build tools, does not need it. That was the only change I needed to make to get this to build.
My webpack config is super simple:
var path = require("path");
module.exports = {
entry: "./index.js",
output: {
path: path.join(__dirname, "/dist"),
filename: "index.min.js"
},
module: {
loaders: [{
test: /\.js$/,
loader: "babel"
}]
}
};
I guess that's what I get for copying a config file from a more complex project into what was supposed to be a simplest possible demo.
I see that there is a babel-plugin-runtime as well as a babel-runtime on NPM, but when I tried out BPR for the sake of completeness, Babel complains: Module build failed: ReferenceError: The plugin "runtime" collides with another of the same name. Since I don't actually need the runtime, the linked GH repo is a 404, and since this really belongs in the issue trackers after all, this is as far as I am going to take this for now.
No, that is not valid code. That was an issue in Babel project, but it has been fixed in the 6.0 version which was released recently.
I was run into this issue too, and now I have checked this with latest version, and it is works fine. Here is my test steps:
# install Babel and plugins
npm install babel-cli babel-preset-es2015 babel-plugin-transform-runtime
# install React
npm install react
# run babel against problem react file
./node_modules/.bin/babel node_modules/react/lib/ReactElement.js --plugins transform-runtime --presets es2015
It is provides valid output, so the issue seems to be resolved.
And there is good news for you, babel-loader for webpack already supports 6 version of Babel. Check out its docs for details

Gulp-uglify : throw er; // Unhandled 'error' event

i'm pretty new to gulp , and I follow tutorials in http://leveluptuts.com/tutorials/learning-gulp , I get this error:
events.js:141
throw er; // Unhandled 'error' event
^
Error
at new JS_Parse_Error (/home/kid/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:196:18)
at js_error (/home/kid/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:204:11)
at croak (/home/kid/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:680:9)
at token_error (/home/kid/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:688:9)
at unexpected (/home/kid/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:694:9)
at expr_atom (/home/kid/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:1201:9)
at maybe_unary (/home/kid/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:1363:19)
at expr_ops (/home/kid/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:1398:24)
at maybe_conditional (/home/kid/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:1403:20)
at maybe_assign (/home/kid/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:1427:20)
here is my code :
var gulp = require('gulp')
uglify = require('gulp-uglify');
gulp.task('default', function() {
// body...
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('minjs'));
});
and the tree of directory, just simple
-gulp
-js/
-gulpfile.js
thanks a lot
Your uglify task is probably choking on one of the files it is trying to process. Handle the error and write the output to the console so you can see which file causing the task to fail.
gulp.task('scripts', ['clean'], function () {
return gulp.src('js/*.js')
.pipe(uglify().on('error', function(e){
console.log(e);
}))
.pipe(gulp.dest('minjs'));
});
When you run your gulp task again, you will still get an error, but this time, right towards the top of the output, you will see the file and line number that uglify is having trouble processing. Debug from there.
Maybe its a syntax error? Fix it and try again.
Maybe you've got a weird _reference.js file with unexpected characters like those you see in Visual Studio projects sometimes? Exclude it from the gulp.src and try again.
I had the same error. So I tried to output an error to the console (thanks to bingo). I realized that the problem is that gulp-uglify doesn't want to work with ES6. I changed my JS code to ES2015 and voila. You can also use gulp-babel.
In my case, it seems it doesn't accept "arrow-syntax" function
(e.g. data=>{ // do something; })
Also you can use gulp-util.
https://www.npmjs.com/package/gulp-util
var gutil = require('gulp-util');
gulp.task('scripts', ['clean'], function () {
return gulp.src('js/*.js')
.pipe(uglify().on('error',gutil.log))
.pipe(gulp.dest('minjs'));
});
I had the same issue and was getting the same error.
The problem was, one of my JS files had #charset "UTF-8"; in the first line. So the syntax was breaking due to # symbol. I removed it and it worked well.
{
SyntaxError: Unexpected character '#' at JS_Parse_Error.get
(eval at <anonymous> (C:\xampp\htdocs\catch\node_moles\uglify-js\tools\node.js:21:1),
<anonymous>:86:23) at formatError (util.js:649:15)
at formatValue (util.js:554:18)
at formatProperty (util.js:795:15)
at util.js:655:12
at Array.map (native)
at formatObject (util.js:654:15)
at formatValue (util.js:593:16)
at inspect (util.js:186:10)
at exports.format (util.js:72:24)
message: 'Unexpected character \'#\'',
filename: 'all.min.css', line: 1, col: 0, pos: 0 },
plugin: 'gulp-uglify',
....
....
}
I had the same issue and it came down to a js file that was giving out issues. The biggest issue was I had 10 js files but after a little digging my issue was not adding ;
since this will minify your code it does not matter you use ES6 you need to add ; at the end of your code or minifying won't work.
use gulp-uglify-es instead gulp-uglify. It works with es6

Resources