Solvedwebpack dashboard Cannot integrate with webpack-dev-server

Please provide a description of the bug / issue, and provide the details below:

I have a problem with starting a dashboard with a webpack-dev-server.
Webpack-dashboard starts webpack-dev-server in a separate process, but the server watches for file changes, so the process never ends. Because of this I see a permanent empty dashboard.


If the issue is visual, please provide screenshots here



Steps to reproduce the problem

npm run dashboard


Please provide a gist of relevant files

  1. package.json (specifically the script you are using to start the dashboard)
  "name": "hd-navbar",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dashboard": "webpack-dashboard -- webpack-dev-server"
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "awesome-typescript-loader": "^3.1.3",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "html-loader": "^0.4.5",
    "node-sass": "^4.5.2",
    "path": "^0.12.7",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.17.0",
    "typescript": "^2.3.2",
    "webpack": "^2.5.1",
    "webpack-dashboard": "^0.4.0",
    "webpack-dev-server": "^2.4.5"
  1. webpack.config.js
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const DashboardPlugin = require("webpack-dashboard/plugin");

module.exports = {
  entry: {
    "hd-navbar": "./src/index.ts"
  watch: true,
  watchOptions: {
    aggregateTimeout: 300,
    ignored: /node_modules/
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    watchContentBase: true
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  devtool: "source-map",
  module: {
    rules: [
        test: /\.ts?$/,
        loader: "awesome-typescript-loader",
        exclude: [/\/node_modules\//]
      }, {
        test: /\.html$/,
        loader: "html-loader"
      }, {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
  plugins: [
    new ExtractTextPlugin("hd-navbar.css"),
    new CleanWebpackPlugin("dist"),
    new DashboardPlugin(() => {})
  resolve: {
    extensions: [".ts", ".js"]


More Details
  • What operating system are you on? - Windows 10 Home
  • What terminal application are you using? - cmd
  • What version of webpack-dashboard are you using? - 0.4.0
  • What is the output of running echo $TERM? - $TERM
26 Answers

✔️Accepted Answer

you should try this

this works for me:

  "scripts": {
    "preview": "webpack-dashboard -- webpack-dev-server --config ./webpack.config.js"
 "devDependencies": {
    "webpack": "^2.6.1",
    "webpack-dashboard": "^0.4.0",
    "webpack-dev-server": "^2.4.5"


const Dashboard = require('webpack-dashboard');
const DashboardPlugin = require('webpack-dashboard/plugin');
const dashboard = new Dashboard();
const myPort = 9001;
const config = {
  plugins: [
    new DashboardPlugin({
      port: myPort,
      handler: dashboard.setData
  config.devServer = {
    contentBase: path.join(__dirname, 'src'),
    compress: true,
    historyApiFallback: true,
    port: myPort,
    host: '',
    inline: true,
    quiet: true,   // important
    hot: true,
    open: true,

module.exports = config;

Image 5.png

Other Answers:

I just tried with webpack-dashboard -- webpack-dev-server and it's working for me?

  "scripts": {
    "start": "webpack-dashboard -- webpack-dev-server",
  "devDependencies": {
    "webpack-dashboard": "^0.4.0"
  "dependencies": {
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5",

I have webpack 4, webpack dev server, same issue, it does not work. Only fills the log window. The rest of the window are empty. Using for an angular 1 project

+1 not working

Related Issues:

webpack dashboard Cannot integrate with webpack-dev-server
you should try this
webpack dashboard Could not load module/asset sizes. after upgrade from 0.4.0 -> 1.0.0-3
@jpduckwo Thanks That error is resolved after upgrading to 1.0.0-7 But getting new error Any leads t...
webpack dashboard Dashboard only shows log
I removed the port from configuration and it worked for me. Please provide a description of the bug ...
svgo no such file or directory .svgo.yml
I noticed this problem with Yarn after someone had run yarn clean Deleting the .yarnclean file delet...
ohmyzsh compinit:503: no such file or directory: /usr/local/share/zsh/site-functions/_brew
Per #9602 (comment) brew cleanup fixed it for me I am using Apple M1 When I added this line: export ...
angular cli Issue: Cannot read property 'thisCompilation' of undefined
Here is the answer from issues #9793 : npm remove webpack npm install webpack@3.11.0 ...
sdk dotnet build error - the project 'Web' must provide a value for Configuration
I had this infuriating issue when migrating a .NET Core 2.2 app to core 3.0 Steps to reproduce I run...
ionic cli cordova build android error spawn EACCES when I update Android Studio 3.0(Gradle 4.1)
After a long and really frustrating night I got mine woking Description: cordova build android ANDRO...
tqdm Jupyterlab and tqdm_notebook
I confirm this problem on my environment but it is upstream so IMHO nothing can be done on tqdm Plea...
angular cli Error | Could not find plugin "proposal-numeric-separator" | Generating ES5 bundles for differential loading
Try to install @babel/compat-data: ~7.8.0 to devDependencies This is the only workaround which helpe...
angular cli Using invalid environment causes error in build (was "ERROR in Cannot read property 'length' of undefined")
Probably not the same cause but we had the same error (Cannot read property 'length' of undefined) w...
angular cli ng serve method ip not open in another machines
The solution is simple Just bind to the correct interface address via ng serve --host= ...
angular cli Incorrect JS paths when ng build -prod is deployed in a subfolder
When you're deploying to non-root path within a domain you'll need to manually update the <base href...
nativescript cli TNS doctor doesn't recognize Xcode (High Sierra)
HI @philipfeldmann Can yhou please run xcodebuild -version and paste the output? May be Xcode is ins...
angular cli Installation error: permission denied for node-sas
sudo npm install -g --unsafe-perm --verbose @angular/cli Installation error (node-sass) with: node v...
angular cli ng build -prod Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'
Instead of use ng build --prod use ng build --env=prod UPDATE As many of us (thx) have mention this ...
psysh Not working after upgrading to PHP 7.3
May I know how do you open this file and drop in the code you mentioned? Thanks ...
expo cli Expo fails to start the project: error Invalid regular expression: /(.*\\__fixtures__
Got this issue today on windows but don't need to downgrade node Description I just initialize a new...
angular cli Property 'controls' does not exist on type 'AbstractControl'.
Got it! Looked at the docs - FormArray The FormArray class contains the controls property ...
angular cli [Bug] cli needs to be reloaded when a lazy loaded module is added in routes (FIXED)
I recomended change { path: 'user-panel' loadChildren: './user-panel/user-panel.module#UserPanelModu...
angular cli AOT build fails
I noticed same problem and after npm i enhanced-resolve@3.3.0 I can build with AOT ...
angular cli Cannot find name 'require'. using relative paths...
Ahhh here we go try adding declare var require: any; To src/typings.d.ts I am using a config with re...
expo cli XDLError: ValidationError: "scheme" is not allowed
can you try removing the .expo directory? rm -rf .expo in your project Description I'm having this e...
ionic cli Error: Cannot find module '@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/utils'
Try npm i @ionic/angular-toolkit@latest This worked in my project. Description: I was trying to star...
angular cli "No NgModule metadata found for 'AppModule'" after Upgrade to Angular 5.1.0 and AngularCli 1.6.0
I got the same error The issue is fixed only when i manually re installed angular/cli The webpack sh...
cli pod install failure with glog
what helped me: sudo xcode-select --switch /Applications/ Ask your Question I have been try...
angular cli ng serve doesn't listen other than localhost
Works with command ng serve --host OS? Windows 7 8 or 10 Linux (which distribution) Mac OSX ...
streamlink urllib3 (1.25.1) or chardet (3.0.4) doesn't match a supported version
Hello there I received this warning on Elementary OS 0.4.1 (based on Ubuntu 16.04.2) after installin...
terragrunt Upgrading to Terraform 0.12: separate configuration file for Terragrunt?
Hi all Hi! I'm one of the engineers at HashiCorp who works on Terraform Core As you might be aware ...
expo cli Could not load expo Network response timed out
The Network response timed out error means your phone can not connect to the Expo CLI running on you...
angular cli ng: command not found
Removing NODE and using NVM instead fixed a lot of issues After installing angular-cli with the help...
angular cli ng build fails with error Cannot find module 'webpack/lib/node/NodeTemplatePlugin' after updating to v1.3.0
I faced this issue many times recently and always the fix worked for me is : Bug Report or Feature R...
angular cli -bash: ng: command not found
This was a pain to figure out Please provide us with the following information: OS? Mac OSX (Seirra)...
angular cli Uncaught TypeError: Cannot read property 'apply' of undefined on new install
Downgraded to zone.js@0.8.5 and the problem disappeared. Bug Report or Feature Request (mark with an...
angular cli I am on Angular 5 and CLI 1.5 and I get an error
I faced this error after updating a non-CLI project to Angular 5 and @ngtools/webpack 1.8.0 ...
amplify cli Many-To-Many
You can implement many to many yourself using two 1-M @connections and a joining @model ...
cli How to skip one stage from multi-stage docker build
Docker 18.06 has been released Description We have Multistage docker build that creates rpm in each ...
angular cli Error in multi styles
Paths in angular-cli.json are relative to the project root (src/ normally) For instance you have the...
ripgrep Add support for replace in files
This is more easily accomplished using sed than I think people realize sed is quite a beast and is n...
angular cli Error loading npm linked custom library with aot
It seems like this is a issue caused by Typescript and not by Angular CLI Typescript has problems re...
sdk dotnet new console, publish, makes a dll not an exe
Can we reduce the confusion somehow? I work on .NET Core and I was confused <OutputType>Exe</OutputT...
expo cli expo build fails inside xdl with "Cannot read property 'forEach' of undefined"
Try changing assetBundlePatterns: [**/*] to assetBundlePatterns: [assets/*] in app.json ...
nest cli Error: Cannot find module '@nestjs/schematics/package.json'
try yarn global add @nestjs/schematics I'm submitting a.. Current behavior I already global add nest...
ohmyzsh how to enable username and hostname in the default theme?
In fact I finally found the solution for the problem I do want to stick with the default theme but I...
angular cli Cannot find module '@angular/compiler-cli' when running ng serve
Remove angular-cli from your package.json and replace it with @angular/cli $ npm uninstall angular-c...
ionic cli Ionic build android, Error: spawn EACCES
@alexharvey assuming you're on mac (or linux): What version of the CLI are you using? Output of ioni...
angular cli is not a function
I have same issue Finally It looks like caused by a scheme changing The item assets now is an array ...
angular cli ng test ends with "Executed 0 of 0 ERROR"
#2125 see @jtsom 's answer: In the karma.conf.js file add: mime: { 'text/x-typescript': ['ts','tsx']...
angular cli Error while installing @angular/cli on AWS Ubuntu 16.04 server
This seems to be a problem with installing which is one of the dep...