Develop Reference

Cannot run Parcel in my project (Parcel does not create dist with compiled file)

Please help me figure out the problem. I can not understand the essence of the error and how to fix it.
I initialize the project: npm init -y
Install Parcel: npm install --save-dev parcel
I create src directory with an index.html file.
When I run the npx parcel src/index.html command, I get an error:
Error: The filename, directory name, or volume label syntax is incorrect.
at Object.open (C:\Users\dell\OneDrive\Документи\Projects\Test\node_modules\lmdb\dist\index.cjs:1936:3)
at new LMDBCache (C:\Users\dell\OneDrive\Документи\Projects\Test\node_modules#parcel\cache\lib\LMDBCache.js:69:34)
at resolveOptions (C:\Users\dell\OneDrive\Документи\Projects\Test\node_modules#parcel\core\lib\resolveOptions.js:112:168)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async Parcel._init (C:\Users\dell\OneDrive\Документи\Projects\Test\node_modules#parcel\core\lib\Parcel.js:218:27)
at async Parcel.watch (C:\Users\dell\OneDrive\Документи\Projects\Test\node_modules#parcel\core\lib\Parcel.js:315:7)
at async run (C:\Users\dell\OneDrive\Документи\Projects\Test\node_modules\parcel\lib\cli.js:349:9) {
code: 123 }

I had the same issue. I resolved it by changing the line at node_modules#parcel\core\lib\resolveOptions.js:112:168 to
let cache = (_initialOptions$cache = initialOptions.cache) !== null && _initialOptions$cache !== void 0 ? _initialOptions$cache : new (_cache().FSCache)(outputFS, cacheDir);
Basically, I removed the
outputFS instanceof _fs().NodeFS ? new (_cache().LMDBCache)(cacheDir) : part of that line. For some unknown reason, there seems to be a problem with LMDBCache and Parcel.

You're missing the build command from npx parcel src/index.html:
Update to:
npx parcel build src/index.html.

Cannot find module 'gulp-watch' error throws

Error Cannot find module 'gulp-watch' throws when I run gulp. What is wrong???
I installed gulp properly
npm rm --global gulp
npm install --global gulp-cli
npm init
npm install --save-dev gulp
I created this gulpfile.js
var gulp = require('gulp'), watch = require('gulp-watch');
var cssnano = require('gulp-cssnano');
var pump = require('pump');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
// var htmlmin = require('gulp-htmlmin');
//Watch
gulp.task('stream', function () {
// Endless stream mode
// gulp.watch('./css/*.scss', ['minifyHTML']);
gulp.watch( 'assets/css/*.scss', ['styles']);
gulp.watch( 'assets/js/*.js', ['scripts']);
return watch('./css', { ignoreInitial: false })
.pipe(gulp.dest('.'));
});
//bla bla (the rest)

watch = require('gulp-watch'); Requires this module...
You need to install it: npm install --save-dev gulp-watch

Simply run this command-
npm install --save-dev gulp-watch

Uglify SyntaxError: Unexpected token: punc ())

I am trying to use gulp in order to minify a folder containing JS files. However, one of the files has the above error, preventing it from being minified.
I managed to catch and print the error, which I've partially printed here:
JS_Parse_Error {
message: 'SyntaxError: Unexpected token: punc ())',
filename: 'ex.js',
line: 189,
col: 25,
pos: 6482,
stack: Error\n at new JS_Parse_Error (eval at <anonymous> ... )
plugin: 'gulp-uglify',
fileName: '.../js/ex.js',
showStack: false
}
The file in question contains the following, shortened:
function() {
...
$.confirm({
buttons: {
confirm: function() {
$.post('/ajax-handler', {
...
})
.done( function(response) {
var data = filterResponse(response);
if (data['status'] == 'success') {
sleep(1000).then(() => {
* ...
});
sleep(5000).then(() => {
...
});
} else {
console.log('Oops!');
}
})
.fail( function(err, status, response) {
...
});
},
cancel: function() {}
}
});
...
}
I added the "*" above in order to indicate the exact position listed by JS_Parse_Error.

// Update
From the comments ~ #imolit
 v2.0.0 (2018-09-14) - BREAKING CHANGES (link)
Switch back to uglify-js (uglify-es is abandoned, if you need uglify ES6 code please use terser-webpack-plugin).
Original answer before the update...
I hope you can get inspired by this solution which works with webpack. (link below)
Simply teach UglifyJS ES6
There are two versions of UglifyJS - ES5 and ES6 (Harmony), see on git
ES5 version comes by default with all the plugins, but if you install a Harmony version explicitly, those plugins will use it instead.
package.json
"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony"
or
npm install --save uglify-js#github:mishoo/UglifyJS2#harmony
yarn add git://github.com/mishoo/UglifyJS2#harmony --dev
Webpack
To use it with webpack install also the webpack plugin
npm install uglifyjs-webpack-plugin --save-dev
yarn add uglifyjs-webpack-plugin --dev
then import the manually installed plugin
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
and replace it in code
- new webpack.optimize.UglifyJsPlugin({ ... })
+ new UglifyJSPlugin({ ... })
For more webpack info (Installation/Usage) see https://github.com/webpack-contrib/uglifyjs-webpack-plugin#install

npm install uglifyjs-webpack-plugin --save-dev is not enough
The main problem is "uglifyjs-webpack-plugin": "^0.4.6" in webpack's package.json
According to semver, ^0.4.6 := >=0.4.6 <0.5.0. Because of the leading zero, webpack will never use the 1.0.0-beta.2.
So after running npm i -D uglifyjs-webpack-plugin#beta, you need to do one more step which is rm -rf node_modules/webpack/node_modules/uglifyjs-webpack-plugin. Then webpack will pick up the version from node_modules/uglifyjs-webpack-plugin instead of node_modules/webpack/node_modules/uglifyjs-webpack-plugin
Update on 2018-04-18: webpack v4 does not have this issue

Add the babel-preset-es2015 dependency to fix this.
And also add 'es2015' in .babelrc file.
json
{
"presets": ["es2015"]
}

I am having the same issue, i found a great answers here that helped me to reach the the file that was causing the error.
Go to Rails Console and Paste:
JS_PATH = "app/assets/javascripts/**/*.js";
Dir[JS_PATH].each do |file_name|
puts "\n#{file_name}"
puts Uglifier.compile(File.read(file_name))
end
Hope it helps someone!

If you got this error using Grunt (grunt-contrib-uglify) the solution is to install ES6 version of the plugin:
npm install grunt-contrib-uglify-es --save-dev

For me it had nothing to do with Uglify not working correctly, but rather a dependency (in this case empty-promise) that has not been compiled to ES5 yet. As we just imported the raw source file, but babel is only transpiling files outside of node_modules, uglify got confused by the ES6 syntax.
Simply check if any dependency you've recently added might not have a "dist" build.

Add stage-3 to presets in .babelrc file.
{
"presets": [
"stage-3"
]
}

Gulp Browserify ReferenceError: source is not defined

I'm getting this odd error as the title.
The full message looks like this
$ gulp browserify [01:21:03] Using gulpfile F:\CSC
Assignments\FinalProject\HotelProject\gulpfile.js [01:21:03] Starting
'browserify'... [01:21:03] 'browserify' errored after 15 ms [01:21:03]
ReferenceError: source is not defined
at Gulp. (F:\CSC Assignments\FinalProject\HotelProject\gulpfile.js:109:15)
at module.exports (F:\CSC Assignments\FinalProject\HotelProject\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (F:\CSC Assignments\FinalProject\HotelProject\node_modules\gulp\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (F:\CSC Assignments\FinalProject\HotelProject\node_modules\gulp\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (F:\CSC Assignments\FinalProject\HotelProject\node_modules\gulp\node_modules\orchestrator\index.js:134:8)
at C:\Users\LUCKYLAM\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
at startup (node.js:129:16)
at node.js:814:3
I'm new to this and after having spent a couple of hours figuring out what's causing the problem I have no idea what is wrong around here. Please help.
Here is my /app/js/script.js
require('angular');
var app = angular.module('app', []);
gulpfile.js:
gulp.task('browserify', function() {
return browserify('./app/js/script.js')
.bundle()
.pipe(source('main.js'))
// saves it the public/js/ directory
.pipe(gulp.dest('./dist/js/kk/'));
});
My folder structure

I guess you are missing one npm package: vinyl-source-stream.
Try to install it with npm install vinyl-source-stream --save-dev and require in your gulpfile.js like so:
var source = require('vinyl-source-stream');

Typescript module, require external node_modules

I need to use a simple node_module inside a simple typescript file, but it seems that the compiler doesn't want to get it.
Here's my simple ts file :
import glob = require('glob');
console.log(glob);
And I've got this error :
[13:51:11] Compiling TypeScript files using tsc version 1.5.0
[13:51:12] [tsc] > F:/SkeletonProject/boot/ts/Boot.ts(4,23): error TS2307: Cannot find external module 'glob'.
[13:51:12] Failed to compile TypeScript: Error: tsc command has exited with code:2
events.js:72
throw er; // Unhandled 'error' event
^
Error: Failed to compile: tsc command has exited with code:2
npm ERR! skeleton-typescript-name#0.0.1 start: `node compile && node ./boot/js/Boot.js`
npm ERR! Exit status 8
npm ERR!
npm ERR! Failed at the skeleton-typescript-name#0.0.1 start script.
However, when I use a simple declaration in this same script, it works :
var x = 0;
console.log(x); // prints 0 after typescript compilation
What am I doing wrong in this case ?
EDIT:
Here's my gulp file :
var gulp = require('gulp');
var typescript = require('gulp-tsc');
gulp.task('compileApp', ['compileBoot'], function () {
return gulp.src(['app/src/**/*.ts'])
.pipe(typescript())
.pipe(gulp.dest('app/dist/'))
});
gulp.task('compileBoot', function () {
return gulp.src(['boot/ts/*.ts'])
.pipe(typescript({
module:'commonjs'
}))
.pipe(gulp.dest('boot/js/'))
});
gulp.start('compileApp');
Thanks for advance
Thanks for advance

You are using the correct syntax:
import glob = require('glob');
But the error: Cannot find external module 'glob' is pointing out that you are using a special case.
By default, the compiler is looking for glob.ts, but in your case you are using a node module, not a module that you have written. For this reason, the glob module will need special treatment...
If glob is a plain JavaScript module, you can add a file named glob.d.ts with type information that described the module.
glob.d.ts
declare module "glob" {
export class Example {
doIt(): string;
}
}
app.ts
import glob = require('glob');
var x = new glob.Example();
Some Node modules already include the .d.ts in the package, in other cases you can grab it from Definitely Typed.

Here is the error with your code
import glob = require('glob');
Because in node.js import is not a reserved keyword. If you require any module in your application, you simply require it using the statement
var glob = require('glob');
Once done you can then use
console.log(glob);
To print the value of glob.Replacing import will hopefully do the job for you.