Webpack-dev-server: Missing some required dependencies in very simple setup

[megaboich]

I have created very simple project as to show very simple setup of typescript, webpack and webpack-dev-server.
But unfortunately it doesn't work with minimal dependencies configured.

What is the current behavior?
I have errors when executing webpack-dev-server

ERROR in (webpack)-dev-server/client?http://localhost:8080                                                                              
Module not found: Error: Can't resolve './socket' in 'C:\Work\Projects\sample-app-step1\node_modules\webpack-dev-server\client'         
 @ (webpack)-dev-server/client?http://localhost:8080 4:13-32                                                                            
 @ multi app                                                                                                                            

ERROR in (webpack)-dev-server/client?http://localhost:8080                                                                              
Module not found: Error: Can't resolve 'strip-ansi' in 'C:\Work\Projects\sample-app-step1\node_modules\webpack-dev-server\client'       
 @ (webpack)-dev-server/client?http://localhost:8080 3:16-37                                                                            
 @ multi app                                                                                                                            

ERROR in (webpack)-dev-server/client?http://localhost:8080                                                                              
Module not found: Error: Can't resolve 'webpack/hot/emitter' in 'C:\Work\Projects\sample-app-step1\node_modules\webpack-dev-server\clien
t'                                                                                                                                      
 @ (webpack)-dev-server/client?http://localhost:8080 144:19-49                                                                          
 @ multi app                                                                                                                            

ERROR in ./~/url/url.js                                                                                                                 
Module not found: Error: Can't resolve './util' in 'C:\Work\Projects\sample-app-step1\node_modules\url'                                 
 @ ./~/url/url.js 25:11-28                                                                                                              
 @ (webpack)-dev-server/client?http://localhost:8080                                                                                    
 @ multi app                                                                                                                            

ERROR in ./~/querystring-es3/index.js                                                                                                   
Module not found: Error: Can't resolve './decode' in 'C:\Work\Projects\sample-app-step1\node_modules\querystring-es3'                   
 @ ./~/querystring-es3/index.js 3:33-52                                                                                                 
 @ ./~/url/url.js                                                                                                                       
 @ (webpack)-dev-server/client?http://localhost:8080                                                                                    
 @ multi app                                                                                                                            

ERROR in ./~/querystring-es3/index.js                                                                                                   
Module not found: Error: Can't resolve './encode' in 'C:\Work\Projects\sample-app-step1\node_modules\querystring-es3'                   
 @ ./~/querystring-es3/index.js 4:37-56                                                                                                 
 @ ./~/url/url.js                                                                                                                       
 @ (webpack)-dev-server/client?http://localhost:8080                                                                                    
 @ multi app                                                                                                                            

If the current behavior is a bug, please provide the steps to reproduce.
Repository:
https://github.com/megaboich/sample-app-step1

What is the expected behavior?
Just work without errors

Please mention your webpack and Operating System version.
Windows 10

{
  "name": "sample-app-step1",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "html-webpack-plugin": "2.24.1",
    "ts-loader": "1.3.3",
    "typescript": "2.1.4",
    "webpack": "2.2.0-rc.1",
    "webpack-dev-server": "2.2.0-rc.0"
  }
}

[megaboich]

Ok, I found what caused the issue. It was webpack configuration.
It was:

    resolve: {
        extensions: ['.ts'],
    },

Missing .js is critical
So, correct one is:

    resolve: {
        extensions: ['.ts', '.js'],
    },

[johanroug]

Thanks megaboich. Exactly what I needed

[abmohan]

I'm experiencing this bug as well. This is my webpack.config.js file:

const path = require('path');
const webpack = require('webpack');

const BowerResolvePlugin = require("bower-resolve-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UnminifiedWebpackPlugin = require('unminified-webpack-plugin');

const extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});


const config = {
  entry: {
    app: './src/app.ts'
  },
  output: {
    filename: '[name].min.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      },
      {
        enforce: 'pre',
        test: /\.tsx?$/,
        use: 'source-map-loader'
      },
      {
        test: /\.scss$/,
        use: extractSass.extract({
          use: [
            {
              loader: 'css-loader',
              options: { sourceMap: true }
            },
            {
              loader: 'sass-loader',
              options: { sourceMap: true }
            }
          ],
          fallback: 'style-loader'
        })
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new UnminifiedWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    extractSass
  ],
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    plugins: [new BowerResolvePlugin()],
    modules: [
      'bower_components'
    ],
    descriptionFiles: ['package.json', 'bower.json'],
    mainFields: ['main', 'browser']
  },
  devtool: 'inline-source-map'
};

module.exports = config;

[asinoai]

I had the same issue and I managed to resolve it, by reading the installation steps until the end :) and installing globally the mentioned packages from the terminal. Also a npm run clean was needed followed by npm install and then finally the npm start.

[ericwgreene]

Another potential cause of this problem is when the modules option does not contain the project's 'node_modules' folder.

resolve: {
extensions: [ '.js', '.json' ],
modules: [ jsFolderPath, path.join(__dirname, 'node_modules') ],
}

if this piece of code "path.join(__dirname, 'node_modules')" is missing from the "modules" array or the path is incorrect you will get the same error.

Please do not install the above mentioned packages (the ones listed in the terminal output) globally. Installing packages globally is almost never the solution to any problem. Global packages should almost always be avoided. The only global packages which are appropriate are packages used to initially create a project/package (ex: Yeoman, NPM, Bower), otherwise the package should be installed within the project/package, and referenced locally from "./node_modules/.bin". This is always better as you ensure other developers will not have conflicts between versions of global packages. Also, when the package's dependencies are installed with 'npm i', there is no need to do additional installation steps with global packages. Finally, many new Node.js developers on Mac/Linux run into issues with file system permissions and global packages. We do not want them using sudo to run code downloaded from the Internet.

[prashntsingh]

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js
Module not found: Error: Can't resolve './index.js' in 'C:ReactJs'
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js
webpack: Failed to compile.

help me

[oliverbenns]

Kinda sucks you have to resolve js extensions when your app contains no Javascript 🤷‍♂️

[athergeek]

I had the same issue, just a little typo was giving me headaches. I wrote 'js' instead of '.js'

Wrong
resolve: {
extensions: ['.ts', 'js'] // Missing dot
},

Correct
resolve: {
extensions: ['.ts', '.js']
},

[aamirkhan-91]

I am creating a typescript-webpack-react setup. Can someone explain to me why I need to manually resolve .js files as well when I am only using .tsx files? I managed to pinpoint the issue myself but it's really nagging me why I have to add a resolve for .js files as well even though I am not using them in my app.

[DrMeers]

I got the same issue when using a symlink for node_modules. When I replaced this with a local directory, the errors resolved.

[hof]

@aamirkhan-91 webpack-dev-server injects some stuff into your site to implement the auto-reloading. This is in .js files.

[deleamefo]

Hi, I used "npm install --save-dev babel-loader" and it worked for me. Give a try.

[jcrommar]

Literally same issue! Thanks

[Ajmdag]

Thank you @athergeek !