Gridsome: Routing issues in typescript project

[Js-Brecht]

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
- [email protected] & [email protected]

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

[u12206050]

I seem to have the same problem using Gridsome v 0.6.6, however I am not using Typescript.
@hjvedvik you want to double check this.

[u12206050]

@Js-Brecht is this something you also experience? See video: https://www.loom.com/share/bc27ccb43c9d43ff9cc6e254fdb75b93

[Js-Brecht]

Not exactly. I don't even get any URL updates. Do you get these errors in your browser console?

Production mode

Development mode

[u12206050]

Works when changing index.vue script to:

  import { HelloService } from '../services';

  export default {
    data(): any {
      return {
        title: 'Typescript Starter for Gridsome'
      }
    },
    mounted(): void {
      HelloService.sayHello('Gridsome');
    }
  }

Seems to be a problem with the vue-class-component which vue-property-decorator uses. I am guessing it is because it is not using the same Vue instance as the one Gridsome uses and as such is undefined when Gridsome wants to navigate.
Strange that it works from about > home > about and then not back again to home! 😕

[hjvedvik]

@Js-Brecht Vue doesn't support classes natively, so I think you need to use the @Component decorator. The decorator converts the class into an object that Vue understands:

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class MyComponent extends Vue {
  // ...
}

[u12206050]

@hjvedvik This doesn't solve the issue though. Still get

TypeError: Cannot read property '_init' of undefined
    at t (app.0bd59f4c.js:7)
    at app.0bd59f4c.js:22
    at Array.map (<anonymous>)
    at app.0bd59f4c.js:22
    at l (app.0bd59f4c.js:22)
    at r (app.0bd59f4c.js:22)
    at app.0bd59f4c.js:22
    at app.0bd59f4c.js:22
    at e.a (app.0bd59f4c.js:17)
    at l (app.0bd59f4c.js:22)

[Js-Brecht]

Sorry, I do use the decorator. Forgot to put it back after testing it as an object. I do still get the same error, though. Also, if I start at about, it will still break when trying to navigate back: about > home > {{fail}}. After a refresh on the current page, it will work again.

[yurist38]

I've faced the same issue using TypeScript and vue-property-decorator. Have you guys finally fixed this anyhow? I can't find the solution so far...

[Js-Brecht]

I'd like to know as well. This is a show stopper for me. It's important for what I'm trying to use Gridsome for, that I be able to use classes.

[adamJLev]

Same problem here, haven't found any workaround yet :(

[twatanabe]

Same for me, using out of box gridsome with Typescript running on Netlify and getting
Cannot read property '_init' of undefined

[steebchen]

Can also reproduce this issue on a blank project with just the typescript plugin and dependencies installed. cc @hjvedvik

[yurist38]

@hjvedvik @tomtev Guys, really need your assistance here! Do you have any idea about this issue? How can we debug it? Do you know how can I make a not-minified build? It's very difficult to debug the built app now. Please, find a minute to take a look at this issue... Thank you!

[UPDATE]
I've created a repo where the issue is represented:
https://github.com/yurist38/gridsome-routing-issue

[kororo]

@yurist38 i had same issue. I am using gridsome-typescript. turns out, Gridsome may changed the way of tsconfig.json

check out the lastest from here https://gridsome.org/plugins/gridsome-plugin-typescript
copy pasted for convenience.

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "outDir": "./built/",
    "sourceMap": true,
    "strict": true
  },
  "include": [
    "./src/**/*"
  ]
}

if not helping, try to do npm ci and remove package-lock.json, basically flush out all existing version in the package.json

hope helps.

[yurist38]

@kororo Thanks for the input! So how exactly did you fix this issue in your case? Changed your tsconfig.json configuration?

[kororo]

@yurist38, yep i did change the tsconfig.json and it works for me.

1. I did try, change the index.ts previously according to the suggestion above, didnt work.
2. I did try remove package-lock.json and npm ci, didnt work.
3. finally tsconfig.json, works for me

maybe worth to mention, update to the latest gridsome version.

[yurist38]

@kororo No luck here so far... Adding exactly this tsconfig.json file to the test project doesn't change anything. 😞 feeling really hopeless against this problem 😄

[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

[kororo]

@hjvedvik, let us know what is the bug? Thinking to link for other github bug that related. It seems quite fundamental bug between vue, ts and webpack combo

[yurist38]

Such a sweet update, @hjvedvik! Thanks a lot from all of us! :)

[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.

[kororo]

@hjvedvik right thanks! it seems quite specific gridsome implementation. thanks for the fix!!

[yurist38]

I can confirm that after updating gridsome version from 0.7.8 to 0.7.9 the problem has gone! 🎉 Thanks again @hjvedvik !

[smonist]

Hi, I still have this issue. I am using typescript and vue-property-decorator. The dev server is working just fine but when i build the project I can't navigate the website. The content gets loaded but is not display and sometimes 'Cannot read property '_init' of undefined' pops up in the console. Switching back to gridsome 0.7.9 from 0.7.11 did not change things either.
Is there anything left I can try to fix this?

[scalingapps]

Anyone was able to ever find a work around for this?

[smonist]

Anyone was able to ever find a work around for this?

Hi, in my case it was my fault - i wrote some bad html which usually does not bother the browser but for client-side-hydration you need to have correct html. In my case i had an anchor inside another anchor which is invalid html and caused my page to load initially but I could not load another sub-site because the client-side-hydration failed.

Make sure you write valid html. It will most likely fix your errrors.

https://ssr.vuejs.org/guide/hydration.html
https://gridsome.org/docs/troubleshooting/