vue-cli-plugin-ssr: Running SSR Server does not work with Typescript

I’m evaluating this plugin to use with a Vue-CLI project created with Typescript.

Repro steps: vue create new-project vue add @vue/typescript vue add @akryum/ssr npm run ssr:serve

Result: When opening localhost:8000, I get an error from the server on initial render: TypeError: runner is not a function.

Expected Result: Example app renders as expected.

Let me know if this is on the radar already? I’m pretty interested in this project so I would be happy to attempt to contribute a solution to this issue.

demo repo: https://github.com/hmillison/vue-ssr-plugin-reproduction.git

About this issue

  • Original URL
  • State: open
  • Created 5 years ago
  • Reactions: 13
  • Comments: 23 (7 by maintainers)

Commits related to this issue

Most upvoted comments

I’ve managed to come up with a solution. This whole Vue CLI + webpack configuration topic could be even better documented than it already is… The thing with the changes in a4ee8e4 is, that the plugin is adopting the “new” chainWebpack API there, which actually makes things a lot easier and at least opens up many possibilities to plugin developers in general.

What’s bad is that by default the chainWebpack hooks from @vue/cli-plugin-typescript run later than the ones from this plugin, given that they are both listed in the same group of dependencies in package.json, while dependencies run after devDependencies. One can change the alphabetical order by hand, which I did and my issue was immediately gone. Under circumstances the Vue’s typescript plugin overrides the critical option entry.app with its default value ./src/main.ts.

–> responsible lines of code here.

Plugin ordering is on our radar for v4

I’ve managed to come up with a solution. This whole Vue CLI + webpack configuration topic could be even better documented than it already is… The thing with the changes in a4ee8e4 is, that the plugin is adopting the “new” chainWebpack API there, which actually makes things a lot easier and at least opens up many possibilities to plugin developers in general.

What’s bad is that by default the chainWebpack hooks from @vue/cli-plugin-typescript run later than the ones from this plugin, given that they are both listed in the same group of dependencies in package.json, while dependencies run after devDependencies. One can change the alphabetical order by hand, which I did and my issue was immediately gone. Under circumstances the Vue’s typescript plugin overrides the critical option entry.app with its default value ./src/main.ts.

–> responsible lines of code here.

For anyone having trouble to understand the “change the alphabetical order” (like me), thinking that is something “complex” and isn’t understanding it correctly… All you have to do is to change the order in the package.json (putting “@akryum/vue-cli-plugin-ssr” after “@vue/cli-plugin-typescript”), and it works as expected.

Thank you so much @nether-cat !!! 👍

Is there a good long term fix for this in latest Vue CLI or something? I’m having this problem and none of the solutions seem super ideal.

Instead of moving the @akryum/vue-cli-plugin-ssr plugin after @vue/cli-plugin-typescript in package.json you can add this config to vue.config.js

module.exports = {
  chainWebpack: (config) => {
    const chainWebpack = require('@akryum/vue-cli-plugin-ssr/lib/webpack').chainWebpack

    chainWebpack(config)
  }
}

But it’s likely to run twice.

Another solution is to add the plugin to the argument --skip-plugins and add it as a local plugin

#package.json
{
  ...
  "scripts": { 
    ...
    "ssr:build": "vue-cli-service ssr:build --skip-plugins=@akryum/vue-cli-plugin-ssr",
    "ssr:serve": "vue-cli-service ssr:serve --skip-plugins=@akryum/vue-cli-plugin-ssr",
    "ssr:start": "cross-env NODE_ENV=production vue-cli-service ssr:serve --mode production --skip-plugins=@akryum/vue-cli-plugin-ssr"
  }
  ...
  "vuePlugins": {
    "service": [
      "node_modules/@akryum/vue-cli-plugin-ssr/index.js"
    ]
  }
}

amazing detective work @nether-cat. Can confirm that this solution worked for me too!

Seems like there should be a way for vue-cli to let you specify the order of plugins when the order matters

@houd1ni awesome, it’s works ))

I can also confirm 0.3.0 works fine but 0.5.0 causes errors.