NPM-Scripts (in package.json) doesn't use the node_modules/.bin directory

Question

I have some scripts in the package.json file:

"scripts": {
    "build": "webpack --config webpack.config.prod.js --progress",
    "dev": "webpack-dev-server --hot --config webpack.config.dev.js",
    "test": "echo \"Error: no test specified\" && exit 1"
    }

I installed the devDependencies in the package.json file (running the package.json in WebStorm) and npm created the ./node_modules/.bin/ directory with the needed binaries successfully.

Issue

The problem is, when I run npm run dev to start the webpack server:

sh: webpack-dev-server: command not found

First Solution

I can solve this problem by giving the exact path to the .bin folder like this:

"dev": "./node_modules/.bin/webpack-dev-server --hot --config webpack.config.dev.js"

Second Solution

I find another solution by adding the .bin to the global environment PATH :

export PATH="$PATH:./node_modules/.bin"

Question

I can't use the first solution, because I don't work alone in this project and they don't have problems. Furthermore I read, that this should be work by itself (npm).

Second solution: I don't want to add the project packages (binaries) to my global PATH environment.

It could be, that npm adds the .bin folder to the environment path automatically, normally.

I want to understand what is happing (why does it works for others automatically and not for me?)

Thanks for reading and helping, I think I'm not alone with this:).

Answer 1

Final solution

I had a ":" at my path to the *./node_modules/.bin, but the ":" is used as a separator for the PATH environment (to separate the different paths to the binary directories). Therefore the shell never reached the ./node_modules/.bin directory, because the path was like this:

/Path/to/the/Project_19:20/node_modules/.bin

Never use a "/" in your file/folder names!

":" occurred cause of a slash in the folder name.