context.compiler.hooks.invalid.tap('WebpackDevMiddleware', invalid);

[unixc3t]

/home/rudy/projects/webpack/node_modules/webpack-dev-middleware/lib/context.js:95
  context.compiler.hooks.invalid.tap('WebpackDevMiddleware', invalid);
                         ^

TypeError: Cannot read property 'invalid' of undefined
    at ctx (/home/rudy/projects/webpack/node_modules/webpack-dev-middleware/lib/context.js:95:26)
    at wdm (/home/rudy/projects/webpack/node_modules/webpack-dev-middleware/index.js:44:19)
    at Object. (/home/rudy/projects/webpack/build/server.js:25:9)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Function.Module.runMain (module.js:701:10)
    at startup (bootstrap_node.js:190:16)

context.compiler.hooks.invalid.tap('WebpackDevMiddleware', invalid);

context.compiler.hooks is undefined , I can't find the hooks, I must define the hooks?

this is my server.js

const express = require('express');
const webpack = require('webpack');
const opn = require('opn');
const app = express();
const port = 3000;


const middleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const proxyMidddleware = require('http-proxy-middleware');
const historyApiFallback = require('connect-history-api-fallback');

const config = require('./webpack.common.conf')('development');

const compiler = webpack(config);


const proxyTable = require('./proxy');

for (let context in proxyTable) {
  app.use(proxyMidddleware(context, proxyTable[context]));
};


app.use(middleware(compiler, {
  publicPath: config.output.publicPath
}));

app.use(webpackHotMiddleware(compiler));

app.listen(port, () => {
  console.log('success listen to ' + port);
  opn('http://localhost:' + port);
})

[unixc3t]

this is my webpack.common.conf.js

const productionConfig = require('./webpack.prod.conf');
const webpack = require('webpack');
const developmentConfig = require('./webpack.dev.conf');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
const htmlwebpackplugin = require('html-webpack-plugin');
const cleanwebpackplugin = require('clean-webpack-plugin');
const merge = require('webpack-merge');
const path = require('path');

const generateConfig = env => {
  const extractScss = new ExtractTextWebpackPlugin({
    filename: 'css/[name]-bundle-[hash:5].css'
  });
  const scriptLoader = ['babel-loader']
      .concat(env === 'production'
          ? []
          : [
            {
              loader: 'eslint-loader',
              options: {
                formatter: require('eslint-friendly-formatter')
              }
            }
          ]);

  const cssLoaders = [
    {
      loader: "css-loader",
      options: {
        sourceMap: env === 'development'
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        sourceMap: env === 'development',
        plugins: [
          require('postcss-cssnext')()
        ].concat(
            env === 'production'
                ? require('postcss-sprites')({
                  spritePath: 'dist/assets/imgs/sprites'
                })
                : []
        )
      }
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: env === 'development',
      }

    }
  ];
  const styleLoader = env === 'production'
      ? extractScss.extract({
        fallback: 'style-loader',
        use: cssLoaders
      })
      : [{
        loader: 'style-loader'
      }].concat(cssLoaders);


  const fileLoader = env === 'development'
      ? [{
        loader: 'file-loader',
        options: {
          name: '[name]-[hash:5].[ext]',
          outputPath: 'assets/imgs/',
        }
      }]
      : [{
        loader: 'url-loader',
        options: {
          name: '[name]-[hash:5].[ext]',
          outputPath: 'assets/imgs/',
          limit: 1000
        }
      }
      ];
  return {
    entry:
        {
          app: './src/app.js'
        },
    output:
        {
          path: path.resolve(__dirname, '../dist'),
          publicPath: "/",
          filename: "js/[name].bundle-[hash:5].js"
        },
    module:
        {
          rules: [
            {
              test: /\.js$/,
              exclude: /(node_modules|bower_components)/,
              use: scriptLoader
            },
            {
              test: /\.scss$/,
              use: styleLoader
            },
            {
              test: /\.(png|jpg|jpeg|gif)$/,
              use: fileLoader.concat(
                  env === 'production'
                      ? {
                        loader: 'img-loader',
                        options: {
                          pngquant: {
                            quality: 80
                          }
                        }
                      } : []
              )
            },
            {
              test: /\.(eot|woff2|woff|ttf|svg)$/,
              use: fileLoader
            },
            {
              test: /\.html$/,
              use: [{
                loader: 'html-loader',
                options: {
                  attrs: ['img:src']

                }

              },]
            }
          ]
        },
    plugins: [
      extractScss,
      new htmlwebpackplugin({
        filename: 'index.html',
        template: './index.html',
      }),
      new webpack.ProvidePlugin({
        $: 'jquery'
      }),
    ]
  }
};

module.exports = env => {
  let config = (env === 'production' ? productionConfig : developmentConfig);

  return merge(generateConfig(env), config);
};

this my proxy.js

module.exports = {
  '/api': {
    target: 'https://m.weibo.cn',
    changeOrigin: true
  }
}

this is my package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "node build/server.js",
    "dev": "webpack-dev-server --env development --open --config build/webpack.common.conf.js",
    "build": "webpack --env production --config build/webpack.common.conf.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.0.0-beta.40",
    "@babel/plugin-transform-runtime": "^7.0.0-beta.40",
    "@babel/preset-env": "^7.0.0-beta.40",
    "@babel/runtime": "^7.0.0-beta.40",
    "babel-loader": "^8.0.0-beta.0",
    "babel-polyfill": "^6.26.0",
    "jquery": "^3.3.1",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1",
    "webpack-hot-middleware": "^2.21.2"
  },
  "devDependencies": {
    "autoprefixer": "^8.0.0",
    "awesome-typescript-loader": "^3.5.0",
    "babel-plugin-lodash": "^3.3.2",
    "clean-webpack-plugin": "^0.1.18",
    "connect-history-api-fallback": "^1.5.0",
    "css-loader": "^0.28.10",
    "cssnano": "^3.10.0",
    "eslint": "^4.18.2",
    "eslint-config-standard": "^11.0.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-html": "^4.0.2",
    "eslint-plugin-import": "^2.9.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-standard": "^3.0.1",
    "express": "^4.16.2",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.10",
    "glob-all": "^3.1.0",
    "html-loader": "^0.5.5",
    "html-webpack-inline-chunk-plugin": "^1.1.1",
    "html-webpack-plugin": "^3.0.4",
    "http-proxy-middleware": "^0.17.4",
    "img-loader": "^2.0.1",
    "lodash": "^4.17.5",
    "lodash-es": "^4.17.5",
    "node-sass": "^4.7.2",
    "opn": "^5.2.0",
    "postcss": "^6.0.19",
    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "^2.1.1",
    "postcss-sprites": "^4.2.1",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.2",
    "ts-loader": "^4.0.0",
    "typescript": "^2.7.2",
    "url-loader": "^0.6.2",
    "webpack-dev-middleware": "^3.0.0",
    "webpack-merge": "^4.1.2"
  },
  "browserslist": [
    ">= 1%",
    "last  2 versions"
  ]
}

[unixc3t]

this is my webpack.prod.conf.js

const webpack = require('webpack');
const cleanwebpackplugin = require('clean-webpack-plugin');
const purifycss = require('purifycss-webpack');
const htmlwebpackinlineplugin = require('html-webpack-inline-chunk-plugin');
const glob = require('glob-all');
const path = require('path');
module.exports = {
  plugins: [

    new purifycss({
      paths: glob.sync([
        path.resolve(__dirname, './*.html'),
        path.resolve(__dirname, './src/*.js')
      ])
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'mainfest'
    }),
    new htmlwebpackinlineplugin({
      inlineChunks: ['mainfest']
    }),
    new webpack.optimize.UglifyJsPlugin(), new cleanwebpackplugin(['dist']),]
};

this is my webpack.dev.conf.js

const webpack = require('webpack');
const proxy = require('./proxy');
module.exports = {
  devtool: "cheap-module-source-map",
  devServer: {
    port: 9001,
    overlay: true,
    historyApiFallback: true,
    hot: true,
    proxy:proxy
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  ]
};

[unixc3t]

I slove it use "webpack-dev-middleware": "^2.0.6",

[shellscape]

@unixc3t please do not remove the issue template when creating your next issue.

[freddyamsterdam]

+1 having this issue, too. will solve by using 2.0.6 for now.

[shellscape]

@freddyamsterdam it's generally frowned upon to post "+1" replies on an issue. instead, please use the reaction buttons on a prior post. if you feel your reply warrants a new issue, please create a new issue and fill in the template completely (which the OP did not do, so we could not help them).

FWIW, if you're getting that error, you're probably not using webpack v4, which webpack-dev-middleware v3.x requires now (which is also in the release notes)