Webpack-dev-server: Webpack builds, but dev-server fails to find it's own modules

[johnBartos]

What is the current behavior?
Our bundle builds, but webpack-dev-server seems to be unable to open a socket.

````
ERROR in (webpack)-dev-server/client/socket.js
Module not found: Error: Can't resolve 'sockjs-client' in '/usr/local/lib/node_modules/webpack-dev-server/client'
@ (webpack)-dev-server/client/socket.js 1:13-37
@ (webpack)-dev-server/client?http://localhost:8888
@ multi (webpack)-dev-server/client?http://localhost:8888 ./src/js/jwplayer.js

ERROR in (webpack)-dev-server/client/overlay.js
Module not found: Error: Can't resolve 'ansi-html' in '/usr/local/lib/node_modules/webpack-dev-server/client'
@ (webpack)-dev-server/client/overlay.js 3:15-35
@ (webpack)-dev-server/client?http://localhost:8888
@ multi (webpack)-dev-server/client?http://localhost:8888 ./src/js/jwplayer.js

ERROR in (webpack)-dev-server/client/overlay.js
Module not found: Error: Can't resolve 'html-entities' in '/usr/local/lib/node_modules/webpack-dev-server/client'
@ (webpack)-dev-server/client/overlay.js 4:15-39
@ (webpack)-dev-server/client?http://localhost:8888
@ multi (webpack)-dev-server/client?http://localhost:8888 ./src/js/jwplayer.js
````

If the current behavior is a bug, please provide the steps to reproduce.
Unfortunately our project is private, but this is the command we use:
webpack-dev-server -w --env.debug --port 8888 --output-public-path /bin-debug/

What is the expected behavior?
webpack-dev-server is able to host our files without errors.

Please mention your webpack and Operating System version.
Any 2 or 3 version (tested with 2.6.1, 2.7.0, 3.0.0, 3.2.0). MacOS Sierra. webpack-dev-server version 2.5.1

[ghost]

Please try like this;

webpack-dev-server --no-inline
Or
Do you use extract-text-webpack-plugin or html-webpack-plugin in your project ?
Please check their version is matched with webpackand webpack-dev-server.

[johnBartos]

@linpingwang NPM's behavior prevented the wrong version of peer deps from being downloaded; closing this out. For anyone else having this error, you need to ensure that other packages relying on the same deps webpack-dev-server relies on are all up to date.

[pmw57]

I had this problem because I had only "src" listed for my modules.

I fixed this problem by adding "node_modules" to it.

module.exports = {
    resolve: {
        modules: ["src", "node_modules"],
        ...
    }
};

[AdamAnSubtractM]

I had this problem because I had only "src" listed for my modules.

I fixed this problem by adding "node_modules" to it.

module.exports = {
    resolve: {
        modules: ["src", "node_modules"],
        ...
    }
};

This was my issue as well. Thanks @pmw57

[cweding]

I´ve had a similar issue in a TypeScript based Webpack project

ERROR in (webpack)-dev-server/client?http://localhost:3100
Module not found: Error: Can't resolve 'strip-ansi' in 'MYPATH/node_modules/webpack-dev-server/client'
@ (webpack)-dev-server/client?http://localhost:3100 6:16-37
@ multi (webpack)-dev-server/client?http://localhost:3100 ./src/index.ts

It was solved by adding the .js extension to the resolved extensions.

javascript module.exports = { resolve: { extensions: [".ts", ".js"], // Added ".js" here ... } };

[yudi704]

Please try like this;

webpack-dev-server --no-inline
Or
Do you use extract-text-webpack-plugin or html-webpack-plugin in your project ?
Please check their version is matched with webpackand webpack-dev-server.

Please can you elaborate why does --no-inline work? It worked in my machine but I am not sure why it works?

[ryan-olejnik]

What worked for me was adding the following extensions to my webpack.config:

```
module.exports = {
resolve: {
extensions: [".ts", ".js", "json"], // Added ".js" and ".json" here
...
}
};