Koa2 support - next is not a function?

[kristianmandrup]

Hi guys,

I'm trying to tweak this example to work with Koa2

https://github.com/kristianmandrup/vue-hackernews-2.0

However I get a strange error:

According to the call stack, koa-compose ends up calling webpack-dev-middleware which expects a next argument.

Maybe related to this issue ?? or this?

  TypeError: next is not a function
      at goNext (/Users/kristianmandrup/repos/aurelia-projs/ai/vue-hackernews-2.0/node_modules/webpack-dev-middleware/middleware.js:194:41)
      at webpackDevMiddleware (/Users/kristianmandrup/repos/aurelia-projs/ai/vue-hackernews-2.0/node_modules/webpack-dev-middleware/middleware.js:206:33)
      at dispatch (/Users/kristianmandrup/repos/aurelia-projs/ai/vue-hackernews-2.0/node_modules/koa-compose/index.js:43:32)
      at /Users/kristianmandrup/repos/aurelia-projs/ai/vue-hackernews-2.0/node_modules/koa-compose/index.js:36:12
      at Server.<anonymous> (/Users/kristianmandrup/repos/aurelia-projs/ai/vue-hackernews-2.0/node_modules/koa/lib/application.js:136:7)
      at emitTwo (events.js:106:13)
      at Server.emit (events.js:191:7)
      at HTTPParser.parserOnIncoming [as onIncoming] (_http_server.js:546:12)
      at HTTPParser.parserOnHeadersComplete (_http_common.js:99:23)

[kristianmandrup]

Tracked the problem to the async dev renderer...

This looks like an extremely unstable/hacky solution. There must be a better way using promises or async/await!?!?!

let renderer
if (isProd) {
  // create server renderer from real fs
  const bundlePath = resolve('./dist/server-bundle.js')
  renderer = createRenderer(fs.readFileSync(bundlePath, 'utf-8'))
} else {
  require('./build/setup-dev-server')(app, bundle => {
    renderer = createRenderer(bundle)
  })
}

[kristianmandrup]

Trying to refactor this to something more sane... suggestions welcome :)

function prodRenderer(app) {
  console.log('prod renderer...');
  // create server renderer from real fs
  const bundlePath = resolve('../dist/server-bundle.js')
  return createRenderer(fs.readFileSync(bundlePath, 'utf-8'))
}

function devRenderer(app) {
  console.log('dev renderer...');
  const setup = require('../build/setup-dev-server');

  // TODO: somehow await/async here!
  return setup(app, bundle => {
    console.log('create renderer');
    return createRenderer(bundle)
  })  
}

module.exports = (app) => {
  // setup the server renderer, depending on dev/prod environment
  return isProd ? prodRenderer(app) : devRenderer(app);  
}

[kristianmandrup]

Looks like the main problem is the use of "legacy style" webpack middleware. So I likely need to use koa-convert to make it compatible with the middleware style of Koa.

  const promisify = require("promisify-node");
  const convert = require('koa-convert');

  let webpackMw = require('webpack-dev-middleware');
  let hotMw = require('webpack-hot-middleware');

  app.use(convert(webpackMw(clientCompiler, {
    publicPath: clientConfig.output.publicPath,
    stats: {
      colors: true,
      chunks: false
    }
  })))

  app.use(convert(hotMw(clientCompiler)))

Damn, this code base really needs some cleanup

[ydfzgyj]

you can use koa-webpack-dev-middleware and koa-webpack-hot-middleware, and wrap them by convert if you use koa2

[scottconrad]

anyone have an example of this guy running in koa2? If nothing else egoist's example uses it so I don't see upgrading it being horribly difficult.. but if anyone already has it I'd love to see it and contribute it running w/ vue-meta.

[BUPT-HJM]

I have a Server-Side Rendering example of running in koa2. I hope it's not too late:)

Live Demo: http://imhjm.com/ Github Address: https://github.com/BUPT-HJM/vue-blog

A single-user blog built with vue2, koa2 and mongodb which supports Server-Side Rendering.

[kristianmandrup]

I developed these libs for Vue 2 + Koa 2 SSR some time ago...

https://github.com/kristianmandrup/koa-vue-builder https://github.com/kristianmandrup/koa-vue-dev

Both based on similar work by @xpepermint

https://github.com/xpepermint/express-vue-builder

[Paula2001]

you can use koa-webpack-dev-middleware and koa-webpack-hot-middleware, and wrap them by convert if you use koa2

doesn't support webpack 5 unfortunately and this answer is very old but good suggestion at it's time tho