Webpack not working in my node.js project. fsevents - node.js

I'm currently trying to implement this tutorial:
https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
I'm supposed to install react and react-dom and also webpack + typescript + awesome-typescript-loader + source-map-loader, and that's what I did. I also installed webpack-cli accordingly to instructions that I got from the command line.
I installed all of them locally (the react and react-dom as PROD and the rest as DEV dependencies).Currently I don't have any packages installed globally.
After this, that's my package.json file:
{
"name": "reactandwebpack-tutorial",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"awesome-typescript-loader": "^5.2.0",
"source-map-loader": "^0.2.3",
"typescript": "^2.7.2",
"webpack": "^4.16.4",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"#types/react": "^16.4.7",
"#types/react-dom": "^16.0.6",
"react": "^16.4.2",
"react-dom": "^16.4.2"
}
}
At this point, when I run npm ls I get a bunch of errors, because of some optional dependency of webpack that apparently is missing (all the errors in the tree are inside webpack and below fsevents as following):
webpack#4.16.4
(...)watchpack#1.6.0
(...)chokidar#2.0.4
(...)fsevents#1.2.4 -> UNMET OPTIONAL DEPENDENCY
And everything below fsevents is also marked with UNMET DEPENDENCY
And when I run webpack command, I get a "webpack not recognized error".
Anyone can help? I've been trying to wrap my head around this for a while.
PS:
Npm -v 5.6.0
Node -v 8.11.3 //(that's what I get from the terminal,
//VSCode "About" tells me something different, I don't know why).
Using Visual Code
Version 1.24.0
Date 2018-06-06T17:35:40.560Z
Shell 1.7.12
Renderer 58.0.3029.110
Node 7.9.0
Architecture x64

The reason is because it was not linked to your env. When you install something globally, you have access to it everywhere, hence it works just by doing webpack. Since you installed everything locally, the binaries are located inside node_modules/.bin.
You have two options when you install something locallly.
Use npm scripts (npm run build, watch... whatever).
./node_modules/.bin/moduleName --flags
It is easier to create a npm script and add all the commands there.

SOLVED
Not sure the reason but it had something to do with the ./bin folder with the webpack-cli "ambient variable" not being available (I don't know it that would be the most accurate description).
When I try to run webpack, I get "not recognized error".
But when I run nodemodules\.bin\webpack-cli it works normally.
Everything is installed locally.
I can also run it with options, like nodemodules\.bin\webpack-cli --help

If you run "webpack", The CLI will find global webpack with is installed by (npm install webpack -g). To use webpack from local project. you should it to npm script.
package.json
{
"script": {
"start": "webpack"
}
}
By doing this, you can run npm start to run webpack.

Related

node: how to avoid installing global packages

I'm looking for a pattern to avoid the need of global packages when working with node, I'd like to install everything I need with npm install and then just running every command with npm run xxx, without any global package installed.
For example, I have jest configured to run my tests.
These are the dependencies in my package.json:
[...]
},
"author": "",
"license": "ISC",
"dependencies": {
"#types/express": "^4.16.1",
"#types/node": "^11.10.5",
"express": "^4.16.4",
"ts-node-dev": "^1.0.0-pre.32",
"typescript": "^3.3.3333"
},
"devDependencies": {
"#types/jest": "^24.0.9",
"#types/supertest": "^2.0.7",
"jest": "^24.3.1",
"nodemon": "^1.18.10",
"supertest": "^4.0.0",
"ts-jest": "^24.0.0"
}
[...]
and these are some scripts I have configured:
[...]
"scripts": {
"test": "jest --coverage",
"tsc": "tsc",
"watch": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/server.ts"
},
[...]
But when I issue npm run test I get this error:
$ npm run test
> ci-test#0.0.1 test /home/sas/devel/apps/vue/ci-test
> jest --coverage
sh: 1: jest: not found
npm ERR! file sh
[...]
If I install jest globally with npm install -g jest everything runs fine, but that's precisely what I'm trying to avoid.
A few assumptions I made that might be wrong:
when running scripts node first looks for commands in node_modules/.bin (in order to use locally installed packages)
when I issue npm install every command line command is installed to node_modules/.bin
This last one is not working, because even though I have jest in my devDependencies there's no node_modules/.bin/jest file in my project
$ ls node_modules/.bin/
acorn cdl esgenerate esvalidate is-ci json5 loose-envify mime nodetouch parser semver sshpk-sign strip-indent watch
atob escodegen esparse import-local-fixture jsesc js-yaml marked mkdirp nopt rc sshpk-conv sshpk-verify uglifyjs
On the other hand, as a workaround, the following seems to work:
"scripts": {
"test": "npx jest --coverage",
But it takes more than 10 seconds for npx to install jest everytime I run npm run test
So, what would be the correct way to achieve it? O how can I tell npm to install jest to node_modules/.bin and use it whe I reference it in my scripts?
It seems like it was easier than expected, I just had to issue:
npm install --only=dev
seems like by default npm won't install dev dependencies
I did a couple more tests, playing with the NODE_ENV var, and after unsetting it npm install seems to install also devDependencies, along with jest in node_modules/.bin/jest. It seems like somehow it was assuming I was in production mode.
Another trick I learned to avoid installing global dependencies is to install it with --save-dev, and then adding a script to run it with npm run. For example, to avoid installing jest globally but still be able to use it from the command line you should:
npm install jest --save-dev
Then add the following to your package.json
scripts: {
"jest": "jest"
}
And then you can run it from the command line with npm run jest. To pass params from the command line you have to add a '--' before the params, like this: npm run jest -- --coverage. Or you could just issue npx jest --coverage, if installed, npx will use jest from node_modules/.bin. (check this for more info)
BTW, this answer to a similar question might be useful

Nodemon installed but not working in Node.js

I am using Node.js with express.js and I also installed Nodemon ( exist in node_modules folder) but it's not working.
Here is my package.json code. How can I solve this ?
// package.json
{
"name": "node-api",
"main": "server.js",
"dependencies": {
"express": "~4.0.0",
"mongoose": "~3.6.13",
"body-parser": "~1.0.1"
}
}
add nodemon as a dev dependency
npm i -D nodemon
Or install globally
npm i -g nodemon
But , in second method it will not show in package.json file
There is no need to use --save or -S as it is not used in your main code
EDIT: Jan 6, 2019
Use nodemon in script tag in package.json file. Like
"scripts" : {
...
"start" : "nodemon index.js"
}
Then use npm start in terminal
hit npm install --save nodemon -g in terminal or
install in your project via npm install --save nodemon
and it should display your package.json like
{
"name": "node-api",
"main": "server.js",
"dependencies": {
"express": "~4.0.0",
"mongoose": "~3.6.13",
"body-parser": "~1.0.1",
"nodemon": "^1.18.6"
}
}
and run nodemon server.js
check if nodemon is installed nodemon -v
This issue is very much common. It showed 'found 0 vulnerabilities' while installing but never showed in dev dependencies.
I tried restarting my text editor and run the command again
npm i --save-dev nodemon
it started working.
In my case i able to solve this issue by update the node.
now for update you have to download node from https://nodejs.org/en/
it worked for me
hope will work for you as well

webpack error on build run. 'Error: Cannot find module '#webassemblyjs/ast''

I' am currently working in React, and I'm trying to setup webpack and webpack-cli. I am currently following the tutorial on webpack 4 tutorial site https://www.valentinog.com/blog/webpack-4-tutorial/ using my command line I've been trying to install webpack and webpack-cli as my dependencies using nodejs.
I've been entering npm i webpack --save-dev and npm i webpack-cli --save-dev
Both these modules install correctly and are added to my package.json as dependencies.
{
"name": "webpack-4-quickstart",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.10.1",
"webpack-cli": "^2.1.4"
}
}
I also have a scripts section that has a "build": "webpack" which should initialize my webpack. But when I type npm run build i get this error. Error: Cannot find module '#webassemblyjs/ast'. I've checked my node_modules and #webassemblyjs is there.
I've tried uninstalling my node_modules, reinstalling webpack and webpack-cli and even moved to a different directory and repository to see if I could change my outcome that way. However, I'm still getting this cannot find module #webassemblyjs/ast. I'm currently running MacOs High Sierra, and am not sure if maybe it's just not agreeing with my operating system. If anything I haven't noticed any other Stackoverflow posts dealing with this specific error, so I thought I'd make a post asking for help.
Thankyou for your time!
I had the same problem. After trying many variations of version, deleting node modules a couple times, trying to manually install the library, I finally solved it by running
npm ci
~1 day hours of debugging, 6 letter command. Computers are so fun sometimes
try this
update "webpack": "^4.10.1" to "webpack": "^3.11.0"
No issues on macOS High Sierra with:
"devDependencies": {
"webpack": "^4.12.0",
"webpack-cli": "^3.0.8"
}
Try first upgrading to those versions and see if that resolves the issue.
Also, are you using a private registry? If so, you might be getting something like this if #webassemblyjs can't be found in it:
npm ERR! code E404
npm ERR! 404 Not Found: #webassemblyjs/ast#1.5.12
You could quickly fix this by adding #webassemblyjs:registry=https://registry.npmjs.org in your .npmrc file.
Otherwise, you could try running webpack --display-error-detail and see if you get additional details about the error.

How to ignore scoped packages' node_modules/ directory during npm install?

I have a repository containing a package.json which contains scoped dependencies. I also have an .npmignore file intended to whitelist all files and subdirectories in dist/. The problem is all of the scoped dependencies are included when running npm install #private/a another repository. This includes both private npm packages and public packages such as #uirouter.
package.json:
{
"name": "#private/a",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+ssh://git#bitbucket.org/private/a.git"
},
"author": "",
"license": "ISC",
"homepage": "https://bitbucket.org/private/a#readme",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-angular-embed-templates": "^2.3.0",
"gulp-concat": "^2.6.1",
"gulp-jshint": "^2.0.4",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.0.0",
"gulp-uglify": "^2.0.0",
"jshint": "^2.9.4"
},
"dependencies": {
"#private/b": "^1.0.0",
"#private/c": "^1.0.0"
}
}
.npmignore
**
!dist/**
Despite these two files when I run npm install #private/a --save within another repository it is installing the dependency along with all it's scoped dependencies:
/node_modules/#private/a/dist/index.js
/node_modules/dist/css/styles.css
/node_modules/#private/a/node_modules/#private/b
/node_modules/#private/a/node_modules/#private/c
package.json
It should only be this:
/node_modules/#private/a/dist/index.js
/node_modules/dist/css/styles.css
package.json
How can I achieve this? I have tried different variations of the .npmignore but have not had any luck.
.npmignore is irrelevant to what you are trying to do. This file only decides which parts of your npm package code ends up in npm registry. So it is working as advertised.
Your problem must be in your npmconfig or because of using an older version of npm. The latest version installs stuff as so:
/node_modules/#private/a/dist/index.js
/node_modules/#private/b/...
/node_modules/#private/c/...
package.json
I have verified that this is happening with latest npm. But there used to be a time when npm installed dependencies into a nested structure. See this for example. So I suggest:
Making sure you have latest node and npm.
Making sure your npm config is not forcing legacy bundling. Run npm get legacy-bundling. Make sure this is false.
There are few cases where the nesting of dependencies happens legitimately even with the latest npm. See this. But I am guessing your problem is not due to this. You can test by simply doing npm install #private/a in an empty folder.
Node will install your package files along with all the dependencies declared under dependencies field.
How the dependencies tree is build, depends on which version of npm do you use.
If your package doesn't need those dependencies to run, it means they are just dev dependencies and you can safely list them under devDependencies field.
Dev dependencies are only installed when you run an npm install inside the plugin directory.
You need to lock your dependency. You might want to check out npm shrinkwrap.

TypeError: Invalid Version: undefined using Gulp in Visual Studio

I'm new to all of this Node.js, npm, Bower and Gulp stuff so I'm trying to start get familiar with it. I started by installing Node.js which seemed to go smoothly. I then installed gulp both globally and locally according to what I've found online:
> npm install --global gulp
> npm install --save-dev gulp
The second one was of course done in the directory of my project and it did indeed update my package.json file.
So I now have a package.json file that looks like this:
{
"name": "typescripttestapp",
"version": "1.0.0",
"description": "",
"main": "index.html",
"dependencies": {
},
"devDependencies": {
"del": "^1.2.0",
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"gulp-copy": "0.0.2",
"gulp-typescript": "^2.7.8"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
I've also installed Task Runner Explorer in Visual Studio. I have the following gulpfile.js:
var gulp = require('gulp');
gulp.task("default",function(){});
However, any time I try to refresh the Task Runner Explorer, I get the following error in the Output Window:
Failed to load
"F:\Business\Development\TestSandBoxes\TypeScriptTestApp\TypeScriptTestApp\gulpfile.js"...
C:\Users\rodd_harris\AppData\Roaming\npm\node_modules\gulp\node_modules\semver\semver.js:281
throw new TypeError('Invalid Version: ' + version);
^ TypeError: Invalid Version: undefined
at new SemVer (C:\Users\rodd_harris\AppData\Roaming\npm\node_modules\gulp\node_modules\semver\semver.js:281:11)
at SemVer.compare (C:\Users\rodd_harris\AppData\Roaming\npm\node_modules\gulp\node_modules\semver\semver.js:348:13)
at compare (C:\Users\rodd_harris\AppData\Roaming\npm\node_modules\gulp\node_modules\semver\semver.js:571:31)
at Function.gt (C:\Users\rodd_harris\AppData\Roaming\npm\node_modules\gulp\node_modules\semver\semver.js:600:10)
at Liftoff.handleArguments (C:\Users\rodd_harris\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:99:14)
at Liftoff. (C:\Users\rodd_harris\AppData\Roaming\npm\node_modules\gulp\node_modules\liftoff\index.js:192:16)
at module.exports (C:\Users\rodd_harris\AppData\Roaming\npm\node_modules\gulp\node_modules\liftoff\node_modules\flagged-respawn\index.js:17:3)
at Liftoff. (C:\Users\rodd_harris\AppData\Roaming\npm\node_modules\gulp\node_modules\liftoff\index.js:185:9)
at C:\Users\rodd_harris\AppData\Roaming\npm\node_modules\gulp\node_modules\liftoff\index.js:159:9
at C:\Users\rodd_harris\AppData\Roaming\npm\node_modules\gulp\node_modules\v8flags\index.js:91:14
What am I doing wrong?
Edit
By some experimenting, I found that gulp will run if I do gulp -v first. If I open a command prompt and go to my project directory and just run gulp I get the same error as I do from Task Runner. However, if, as I said, I do the gulp -v first, then run gulp it works.
It would still be nice to know if I've got something configured wrong because at present, I'm still unable to set this up with Task Runner Explorer.
I found a solution to this issue, make sure you have run npm init in the base directory of your gulp file and then install gulp locally npm install gulp --save-dev. This seems to resolve it for me when running gulp in Visual Studio Code.

Resources