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

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 ))

@sneko @mayase did: https://github.com/Akryum/vue-cli-plugin-ssr/commit/a4ee8e459a953ae996bbfe6ea36b2638341652a0#commitcomment-32247700

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