Project scaffolded with create vue / typescript / vue-router does not render page correctly

[Dan-Y-Ko]

Describe the bug

When I scaffold a new project using create vue with typescript and vue-router, I get a blank screen with some errors in the console.

Expected behavior

However, I'm getting blank white screen

I also get these errors in console

How to reproduce

https://github.com/Dan-Y-Ko/vue-bugs <- It's just an empty project scaffolded with create vue, nothing added.

Here is the options I selected:

Just start the server with pnpm dev and open in browser. I am experiencing this issue with Edge browser. It seems to be having issues there but works in Chrome. Another odd thing is, it works fine in Edge if I scaffold a project without Typescript.

[cexbrayat]

Hi @Dan-Y-Ko

If I open the repo on stackblitz, everything looks fine https://stackblitz.com/edit/dan-y-ko-vue-bugs-bxsosg

I see you have a mention of vite-plugin-pwa in the errors. Did you add this after creating the project?

[Dan-Y-Ko]

Hi @Dan-Y-Ko

If I open the repo on stackblitz, everything looks fine https://stackblitz.com/edit/dan-y-ko-vue-bugs-bxsosg

I see you have a mention of vite-plugin-pwa in the errors. Did you add this after creating the project?

I can confirm, it works for me in stackblitz as well...strange. It doesn't work when I open the project itself that was served from a local environment though (so like through my vscode and running pnpm dev).

Also to answer your question, nothing was added.

[cexbrayat]

Have you tried to clear the cache of your browser? Maybe you had another project that used the pwa plugin.

[Yordan-Ramchev]

I've pulled your repository and I see no errors using this configuration: Microsoft Edge for Business - [Version 124.0.2478.105 (Official build) (arm64)] pnpm - v9.0.6

[Dan-Y-Ko]

Have you tried to clear the cache of your browser? Maybe you had another project that used the pwa plugin.

Just tried that, still persists.

[Dan-Y-Ko]

I've pulled your repository and I see no errors using this configuration: Microsoft Edge for Business - [Version 124.0.2478.105 (Official build) (arm64)] pnpm - v9.0.6

I am using this: Microsoft Edge Version 124.0.2478.105 (Official build) (64-bit) pnpm - v9.1.0

[Yordan-Ramchev]

I've tried with pnpm v9.1.0 - it still works as expected. Do you have any plugins installed in edge? Can you test it in incognito mode?

[Dan-Y-Ko]

I've tried with pnpm v9.1.0 - it still works as expected. Do you have any plugins installed in edge? Can you test it in incognito mode?

Nice, it does work in incognito. I also found out when I do hard refresh it works but normal refresh doesnt (not icognito). That being said, it seems like this is a me issue and not an issue with create-vue. I'd be happy to try to debug it here or would you like me to get support in the vue discord? Thanks

[cexbrayat]

Happy to hear that fixes it. I don't think this is an issue, this is the expected behavior if you have a pwa. As the app is running on the same port as your previous one, you had to empty your browser cache.