webpack-dev-middleware: Error webpackDevMiddleware is not a function

Operating System

  • Node Version: v12.17.0
  • NPM Version: 6.14.4
  • webpack Version: 4.43.0
  • webpack-dev-middleware Version: v4.0.0-rc.1

Actual Behavior

I have a Webpack config working very well until I update to v4.0.0-rc.1. To upgrade y code I’ve followed the deprecation info in the release note. For the rest my config is very similar to the doc exemple with express. The only difference is that I use Browsersync instead of express.

Here is the error i get when running my app :

TypeError: devMiddleware is not a function
    at Object.<anonymous> (/Users/jimblue/Repositories/websites/webpacker/modes/development.js:7:20)
at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at webpacker (/Users/jimblue/Repositories/websites/webpacker/index.js:30:3)
    at Object.<anonymous> (/Users/jimblue/Repositories/websites/webpack.config.js:23:1)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 7
npm ERR! @ webpacker:dev: `cross-env NODE_ENV=development node webpack.config.js`
npm ERR! Exit status 7
npm ERR!
npm ERR! Failed at the @ webpacker:dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jim/.npm/_logs/2020-06-01T14_24_05_126Z-debug.log
[nodemon] app crashed - waiting for file changes before starting...

I’ve try to simplify my config to the maximum to be sure the error is not caused by something else than Webpack dev middleware. But even with the really simple code bellow I keep getting the same error

Code

const webpack = require('webpack')
const webpackConfig = require('../webpackconfig')
const devMiddleware = require('webpack-dev-middleware')

const compiler = webpack(webpackConfig)

const middleware = devMiddleware(compiler)

console.log(middleware)

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 16 (5 by maintainers)

Most upvoted comments

Yes, please use const { default: webpackDevMiddleware } = require('webpack-dev-middleware'), we need improve changelog about it

I didn’t forgot about a testing repo @evilebottnawi , just don’t had the time yet. Maybe be this weekend 🤞

@cruzdanilo we know that we have this problem, we don’t need to show the error stack again, better create a test repo and we fix it

Yes sure 😄

I’ve finally move to express using webpack-dev-server because of performance problem with BrowserSync.

@cruzdanilo please don’t spam - create reproducible test repo