Another "serverRenderer is not a function" question.

[phyllisstein]

Hi there! I hate to pile on with this particular issue, but after reading through the other tickets dealing with it I'm still having some trouble with "serverRenderer is not a function" errors.

As far as I can tell from dropping in some naïve console.log statements, the middleware's doneHandler is never being called. But I'm fairly certain that I'm passing the same compiler instance into both the dev middleware and the server middleware. Even adding extra padding with webpack-dev-middleware's waitUntilValid method doesn't seem to help.

My server currently looks like this:

const c2k = require('koa-connect')
const config = require('./config/webpack/middleware')
const { createServer } = require('unit-http')
const devMiddleware = require('webpack-dev-middleware')
const hotMiddleware = require('webpack-hot-middleware')
const hotServerMiddleware = require('webpack-hot-server-middleware')
const Koa = require('koa')
const webpack = require('webpack')

const app = new Koa()

app.use(async (ctx, next) => {
  ctx.state.compiler = webpack(config)
  await next()
})

app.use(async (ctx, next) => {
  const { compiler } = ctx.state
  const middleware = devMiddleware(compiler, {
    logLevel: 'error',
    logTime: true,
    noInfo: true,
    publicPath: '/',
    serverSideRender: true,
    watchOptions: {
      ignored: [
        'node_modules',
      ],
    },
  })

  try {
    await new Promise(resolve => middleware.waitUntilValid(resolve))
    await c2k(middleware)(ctx, next)
  } catch (err) {
    throw err
  }
})

app.use(async (ctx, next) => {
  const { compiler } = ctx.state
  const middleware = c2k(
    hotMiddleware(
      compiler.compilers.find(c => c.name === 'client'),
    ),
  )

  try {
    await middleware(ctx, next)
  } catch (err) {
    throw err
  }
})

app.use(async (ctx, next) => {
  const { compiler } = ctx.state

  const middleware = hotServerMiddleware(compiler, {
    createHandler: hotServerMiddleware.createKoaHandler,
  })

  try {
    await middleware(ctx, next)
  } catch (err) {
    throw err
  }
})

createServer(app.callback()).listen()

It's a little unorthodox because I'm creating the compiler in another middleware---a bug in the application server is currently making it impossible to call webpack in the outer scope---but I've confirmed that mutations to the object in one middleware persist in the subsequent ones. And I'm fairly certain that the await middleware() calls are working the way I expect, because requests to the server don't error out until the Webpack build is nominally finished and because switching to html-wepback-plugin sans server integration works fine. Finally, the application server probably isn't at fault, since swapping out its createServer for the standard http function yields the same result.

It's a shot in the dark, but if the maintainers can spot anything deeply wrong that I've neglected I'd be only too eager to hear it. Thanks in advance for your thoughts, and thanks for your work on this package.

[smashercosmo]

I started getting this error again after upgrade to webpack 4. Very annoying (

[richardscarrott]

@phyllisstein it looks like you're actually creating a brand new instance of the webpack compiler for each request which comes in so even if you did get it working it'd be incredibly slow?

I don't think the doneHandler is being called because the compiler is given to webpackHotServerMiddleware after it's 'done' -- I'd attempt to resolve the outer scope issue first tbh.

@smashercosmo I just added this to a new project using webpack 4 and all us fine -- chances are your webpack config is incorrectly setup -- I'd recommend checking that the server config is correctly outputting a libraryTarget of 'commonjs2'

[smashercosmo]

@richardscarrott Yes, libraryTarget for node bundle is commonjs2. I solved the issue by using { serverSideRender: true } option for webpack-dev-middleware, but strange thing is that with webpack3 it was working without this option.

[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.