Webpack not working in my node.js project. fsevents

Question

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

I kept researching this subject. I don't think that the `fsevents UNMET OPTIONAL DEPENDENCY` error and the fact that webpack is not being recognized are related. `fsevents`is for MAC OS and I'm using Windows 10. — cbdeveloper, Aug 04 '18 at 10:45

score 0 · Answer 1 · answered Aug 04 '18 at 11:08

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

score 0 · Accepted Answer · answered Aug 04 '18 at 12:49

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.

score 0 · Answer 3 · answered Aug 04 '18 at 13:04

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.

Webpack not working in my node.js project. fsevents

3 Answers3