New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
phyllisstein opened this Issue Nov 1, 2018 · 3 comments

Comments

Projects
None yet
3 participants
@phyllisstein

phyllisstein commented Nov 1, 2018

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

This comment has been minimized.

smashercosmo commented Nov 13, 2018

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

@richardscarrott

This comment has been minimized.

Member

richardscarrott commented Nov 15, 2018

@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

This comment has been minimized.

smashercosmo commented Nov 15, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment