serverRenderer is not a function about webpack-hot-server-middleware

[threehams]

Both react-universal-component and webpack-hot-server-middleware can work with Webpack 4. However, this issue can get in the way:
webpack/webpack#7516

The "serverRenderer is not a function" error happens most often because the real error is swallowed on one of these two lines:
https://github.com/60frames/webpack-hot-server-middleware/blob/master/src/index.js#L152-L153

In the case of async code splitting - any code splitting, not just react-universal-component - that Webpack issue can leave you with a chunk name based off an async chunk rather than your entry point. So, with an entry name of "server" and an import() of "Home" will sometimes cause LimitChunkCountPlugin to use the output + chunk name "Home" instead of "server," which leaves webapck-hot-server-middleware unable to find the default/configured chunk name + file of "server."

I'm attempting to put together a PR to provide friendly error reporting when something fails on these two lines. Took me the better part of an hour to figure out what was going on here.

[richardscarrott]

@jinxin479 you're going to have to provide a bit more information than that -- it's likely an issue with your configuration, see https://github.com/60frames/webpack-hot-server-middleware/search?q=serverRenderer+is+not+a+function&type=Issues

[xiaoxiaosaohuo]

sorry I found this error maybe caused by react-universal-component. this repo does not support webpack 4 so far.

[xiaoxiaosaohuo]

thank you ! I think I got it..

[nemixe]

i got the same issues

Environment

- node : "v10.9.0"
- webpack: "^4.16.5"
- webpack-hot-server-middleware: "^0.5.0"

My Repository

https://github.com/nemixe/universal-training

The code that i think caused this problem

server/index.js

const webpack = require('webpack')
const express = require('express')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const webpackHotServerMiddleware = require('webpack-hot-server-middleware')
const clientConfigDev = require('../webpack/client.dev')
const serverConfigDev = require('../webpack/server.dev')
const clientConfigProd = require('../webpack/client.prod')
const serverConfigProd = require('../webpack/server.prod')

const { publicPath } = clientConfigDev.output
const outputPath = clientConfigDev.output.path
const DEV = process.env.NODE_ENV === 'development'
const app = express()

let isBuilt = false

const done = () =>
  !isBuilt &&
  app.listen(3000, () => {
    isBuilt = true
    console.log('Build Complete')
  })

if (DEV) {
  const compiler = webpack([clientConfigDev, serverConfigDev])
  const clientCompiler = compiler.compilers[0]
  const options = { publicPath, stats: { color: true } }
  const devMiddleware = webpackDevMiddleware(compiler, options)

  app.use(devMiddleware)
  app.use(webpackHotMiddleware(clientCompiler))
  app.use(webpackHotServerMiddleware(compiler))

  devMiddleware.waitUntilValid(done)
} else {
  webpack([clientConfigProd, serverConfigProd]).run((err, stats) => {
    const clientStats = stats.toJson().children[0]
    const serverRender = require('../build/server.js').default

    app.use(publicPath, express.static(outputPath))
    app.use(serverRender({ clientStats }))

    done()
  })
}

i have an issue with the development mode when i open my app in browser, it said serverRenderer is not a function, everything is okay with production mode

[switz]

I had to set output: { libraryTarget: 'commonjs2' } in my server webpack config.

[smashercosmo]

Started having the same error after upgrade to webpack 4. And I don't even have async chunks.
Update: solved it by using { serverSideRender: true } option for webpack-dev-middleware

[richardscarrott]

@nemixe did you solve your issue?

[yyynnn]

None of the above solved this error when dealing with router AFTER whsm and BEFORE app listen (express).

webpack-contrib/webpack-hot-middleware#26 (comment)

this is where you can get error. changed order to router -> wdm config -> app listen and got this:
localhost/:1 EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.

so now the flow has to be wdm -> whm -> router -> whsm -> app listen

but event then its kinda working but it is not.
SSR works client renders but the error still present
serverRenderer is not a function

[yilmazbingo]

in the webpack config for the server your entry point should be string:

entry: "./src/server/render.js",

You should change output.filename if your are using [name] computed property.