`ssr:serve` script doesn't work with Vue 2 & TypeScript

[staszek998]

Description

ssr:serve NPM script doesn't work with Vue 2 & TypeScript app created with Vue CLI.

Reproduction steps

1. Create a new Vue (2.x) app with TS support, using the Vue CLI:
   1. Run the following command: vue create vue2-uvue:
      1. Please pick a preset: Manually select features.
      2. Check the features needed for your project::
         • Choose Vue version
         • Babel
         • TypeScript
      3. Choose a version of Vue.js that you want to start the project with: 2.x.
      4. Use class-style component syntax? Yes.
      5. Use Babel alongside TypeScript? Yes.
      6. Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files.
      7. Save this as a preset for future projects? No.
2. Check if the app has been bootstrapped successfully:
   1. Run the following command: npm run serve.
      1. Expected output:
 DONE Compiled successfully in Xms
 \n No type errors found
 \n Version: typescript 3.9.9
 \n Time: Xms

 \n App running at:
 \n - Local: http://localhost:8080/ 
 \n - Network: http://192.168.X.X:8080/
 \n Note that the development build is not optimized.
 To create a production build, run npm run build.

      2. Expected state of the browser when asked to open http://localhost:8080/:
3. Add Universal Vue to the project
   1. Run the following command: vue add @uvue/ssr:
      1. Install UVue plugins?
         • Async Data method
         • Middleware system
         • Error handler
      2. Install server plugins?
         • GZIP compression
         • Server error page
         • Static files serving
         • Modern build
      3. Do you want to use Docker to deploy your app? No.
   2. Expected output:
 
DONE ssr \n UVue installed, please read this before starting:
 \n https://universal-vue.github.io/docs/guide/post-install.html#post-installation-notes

4. Check if the UVue has been installed successfully:
   1. Run the following command: npm run ssr:serve.

Reproduction repository

Expected behavior

Console should produce following output:

DONE  
Compiled successfully in XXXms

Server is running: http://localhost:8080

Type "rs" to restart server

No type errors found

Version: typescript 3.9.9

Time: XXms

After asked to open the URL http://localhost:8080/, the browser should look exactly the same as it looks after running the command npm run serve.

Actual behavior

The browser can't locate the server/resources/whatever we're asking it for:

• Google Chrome Dev:


• Firefox Developer Edition:

• Sizzy:

Additional thoughts

• The npm run serve command still works fine and produces the correct output.
• There's no problem with UVue when we run the following command: npm run ssr:build && npm run ssr:start.
• If, in the reproduction step 1.i.b (1.1.2) we do NOT select TypeScript, then UVue and ssr:serve script work just fine.

Additional context

Please indicate versions of:

• node: v14.15.1
• npm: 7.5.4
• vue-cli: @vue/cli 4.5.11
• uvue:
  • @uvue/core: 0.1.7
  • @uvue/server: 0.1.7
  • @uvue/vue-cli-plugin-ssr: 0.1.7
  • @uvue/rquery: 0.1.7
• OS: macOS Big Sur 11.2.2 (20D80)
• Browser:
  • Google Chrome Dev: 90.0.4427.5
  • Firefox Developer Edition: 90.0.4427.5
  • Sizzy: 51.0.0

[KluseG]

Strange as heck, but my exhaustive research on this problem showed that running either rm -rf ./node-modules && rm ./package-lock.json && npm install or npm update solves the problem every single time.

More than 4 hours of digging through the source code and I found a solution by accident... Would love to know which exact package causes this problem but the diff log is too long for me, sorry 😃

[yabab-dev]

Seems to be a problem with latest version of Vue CLI and NPM... I've no issue with Yarn actually.

Vue CLI require @vue/compiler-sfc which require Vue 3, but project use Vue 2... bit strange, I'll try to investigate on this!