Routing issues in typescript project

Description

Navigation between pages fails when hosting Gridsome site after gridsome build, using gridsome serve, or even using a generic HTTP server.

Steps to reproduce

Create Gridsome project with typescript starter pack.

> gridsome create gridsome-ts https://github.com/cleitonper/gridsome-starter-typescript.git

Install packages, and serve content

> npm install
> gridsome serve

• Open your browser to the link provided.
• Click on About page.
• Click on Home page

Expected result

It should navigate back to the Home page.

Actual result

Nothing happens. An error is thrown in the browser console

Cannot read property '_init' of undefined

If you set Webpack.mode('development') in the chainWebpack api, the exception thrown in the browser console will indicate that the error was thrown by Vue, when instantiating the component.

This error doesn’t occur when running gridsome develop.

It looks like the issue occurs when using Vue classes. This breaks:

// src/pages/Index.vue
<script lang="ts">
	import Vue from 'vue';

	export default class HomePage extends Vue {
	}
</script>

This doesn’t

// src/pages/Index.vue
<script lang="ts">
	export default {
	}
</script>

This could simply be an issue between Typescript and Vue. It’s been a while since I’ve used Typescript+Vue; things have probably changed in the interim. I’ll need to create a repo using just Typescript+Vue, without Gridsome, to see if this has anything to do with Gridsome. Could just be a bug in Vue-Router

Environment

Libs:
- gridsome version: 0.6.6
- @gridsome/cli version: 0.2.1
- Typescript@2.9.2 & Typescript@3.5.3

Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 12.6.0
- Platform: Linux

[hjvedvik]

@kororo It might be that some libraries (including Gridsome) check if a component is a function in order to resolve dynamic imports. Normally a resolved component is an object, but it can also be a function. So the fix was to not execute the function if it has a cid property.

[hjvedvik]

I finally found some time to debug this and found the cause in Gridsome. Will do some more tests and hopefully, publish a fix tomorrow 😃

Thanks for the reproduction repo @yurist38