Skip to content

Another "serverRenderer is not a function" question. #83

@phyllisstein

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions