Running SSR Server does not work with Typescript

[hmillison]

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

[p1n5u]

Can you provide a demo repo or a sandbox with your code in it so that I can get a closer look at the issue you have? I already have an SSR app with this plugin and TS and it works like charm.

Thanks

[houd1ni]

@p1n5u please, check, is your version exactly 0.5.0 or older indeed? I've met the same weird stuff, and all's charm without TS after upgrade.

[p1n5u]

@houd1ni It was running on 0.3.0 but I've just updated to the latest version (0.5.0) and it stopped working indeed 😭 I will compare the two versions as soon as I have time and propose a solution 😄

[yekver]

I have a similar situation - plugin is broken after 0.4.0 😭

[hmillison]

Thanks for the help narrowing down the issue. I'll try to use an older version in the mean time.

[yekver]

In my case I see the following:

✔ success Client compiled in 987ms
Type checking in progress...
Client errors
multi webpack-hot-middleware/client ./src/main.ts
Module not found: Error: Can't resolve './src/main.ts' in '/Users/yekver/app'

this is because my entry point is main.js not main.ts. Trying to fix this issue I change this file extension to ts but then got Internal server error page error with message: Error: bundle export should be a function when using { runInNewContext: false }.

[ilajosmanov]

I have same problem and downgrade don't fix it

[houd1ni]

@ilajosmanov Should be ok if clearly downgrade to 0.3.0

[ilajosmanov]

@houd1ni awesome, it's works ))

[alexey-yunoshev]

@houd1ni I tried installing it with vue add @akryum/ssr@0.3.0, but it says "Plugin @akryum/vue-cli-plugin-ssr@0.3.0 does not have a generator to invoke". So no files were added or updated. What did i do wrong? Please

[houd1ni]

@alexey-yunoshev Looks like off-topic, but I afraid, you just mistyped "vue add @akryum/vue-cli-plugin-ssr@0.3.0".

[alexey-yunoshev]

@houd1ni I tried it with vue add @akryum/vue-cli-plugin-ssr@0.3.0. Same thing - "does not have a generator to invoke"

Update: To make it work I had to do this:
vue add @akryum/vue-cli-plugin-ssr@0.3.0
vue invoke @akryum/vue-cli-plugin-ssr

Also, when starting a server with npm run ssr:serve and opening the site in a browser I got this error:

export function register (swUrl, hooks) {
^^^^^^

In order to fix this I changed import "./registerServiceWorker';" to "if (process.client) require("./registerServiceWorker");" in main.ts. Got the idea from here

[sneko]

Did someone find the difference responsible of this?

I will give a try to downgrading 🤔

[Alik2015]

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

[houd1ni]

@sneko @mayase did: a4ee8e4#commitcomment-32247700

[sknightq]

@houd1ni Does v0.3.0 has a hook to add or update files such as entry-client, entry-server and so on? I added v0.3.0 but there were no files added or updated.

[nether-cat]

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.

[hmillison]

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

[Akryum]

Plugin ordering is on our radar for v4

[uriannrima]

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 !!! 👍

[tarasbilohan]

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"
    ]
  }
}

[srcrip]

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.

[sneko]

Also interested by a proper fix to benefit from latest versions features 😄