Routing issues in typescript project #552

Js-Brecht · 2019-07-14T10:11:56Z

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

The text was updated successfully, but these errors were encountered:

u12206050 · 2019-07-14T11:43:35Z

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 · 2019-07-15T07:21:10Z

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

Js-Brecht · 2019-07-15T16:24:55Z

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

Production mode

Development mode

u12206050 · 2019-07-16T08:36:55Z

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 · 2019-07-16T10:12:01Z

@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 · 2019-07-16T10:28:09Z

@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 · 2019-07-16T18:19:03Z

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 · 2019-08-17T18:07:38Z

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 · 2019-08-18T01:22:47Z

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 · 2019-09-09T21:29:11Z

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

twatanabe · 2019-09-22T01:54:22Z

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

steebchen · 2019-09-23T20:51:22Z

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

yurist38 · 2019-10-19T20:03:41Z

@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 · 2019-10-20T02:14:12Z

@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 · 2019-10-20T13:38:28Z

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

kororo · 2019-10-21T00:29:25Z

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

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

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

yurist38 · 2019-10-21T20:49:10Z

@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 · 2019-10-21T23:40:04Z

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 · 2019-10-22T04:20:08Z

@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 · 2019-10-22T07:15:28Z

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

hjvedvik · 2019-10-22T11:58:58Z

@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 · 2019-10-22T12:02:04Z

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

yurist38 · 2019-10-25T12:06:13Z

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

smonist · 2019-12-04T21:26:43Z

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 · 2020-10-20T13:32:30Z

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

smonist · 2020-10-20T13:46:20Z

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/

u12206050 mentioned this issue Jul 16, 2019

Navigation not working. xerebede/gridsome-starter-typescript#4

Open

hjvedvik added a commit that referenced this issue Oct 22, 2019

fix(app): don’t resolve constructor components (#552)

a4e22d6

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Routing issues in typescript project #552

Routing issues in typescript project #552

Js-Brecht commented Jul 14, 2019

u12206050 commented Jul 14, 2019

u12206050 commented Jul 15, 2019

Js-Brecht commented Jul 15, 2019

u12206050 commented Jul 16, 2019 •

edited

Loading

hjvedvik commented Jul 16, 2019

u12206050 commented Jul 16, 2019 •

edited

Loading

Js-Brecht commented Jul 16, 2019

yurist38 commented Aug 17, 2019

Js-Brecht commented Aug 18, 2019

adamJLev commented Sep 9, 2019

twatanabe commented Sep 22, 2019 •

edited

Loading

steebchen commented Sep 23, 2019

yurist38 commented Oct 19, 2019 •

edited

Loading

kororo commented Oct 20, 2019 •

edited

Loading

yurist38 commented Oct 20, 2019

kororo commented Oct 21, 2019

yurist38 commented Oct 21, 2019

hjvedvik commented Oct 21, 2019

kororo commented Oct 22, 2019

yurist38 commented Oct 22, 2019

hjvedvik commented Oct 22, 2019

kororo commented Oct 22, 2019

yurist38 commented Oct 25, 2019

smonist commented Dec 4, 2019

scalingapps commented Oct 20, 2020

smonist commented Oct 20, 2020

Routing issues in typescript project #552

Routing issues in typescript project #552

Comments

Js-Brecht commented Jul 14, 2019

Description

Steps to reproduce

Expected result

Actual result

Environment

u12206050 commented Jul 14, 2019

u12206050 commented Jul 15, 2019

Js-Brecht commented Jul 15, 2019

u12206050 commented Jul 16, 2019 • edited Loading

hjvedvik commented Jul 16, 2019

u12206050 commented Jul 16, 2019 • edited Loading

Js-Brecht commented Jul 16, 2019

yurist38 commented Aug 17, 2019

Js-Brecht commented Aug 18, 2019

adamJLev commented Sep 9, 2019

twatanabe commented Sep 22, 2019 • edited Loading

steebchen commented Sep 23, 2019

yurist38 commented Oct 19, 2019 • edited Loading

kororo commented Oct 20, 2019 • edited Loading

yurist38 commented Oct 20, 2019

kororo commented Oct 21, 2019

yurist38 commented Oct 21, 2019

hjvedvik commented Oct 21, 2019

kororo commented Oct 22, 2019

yurist38 commented Oct 22, 2019

hjvedvik commented Oct 22, 2019

kororo commented Oct 22, 2019

yurist38 commented Oct 25, 2019

smonist commented Dec 4, 2019

scalingapps commented Oct 20, 2020

smonist commented Oct 20, 2020

u12206050 commented Jul 16, 2019 •

edited

Loading

u12206050 commented Jul 16, 2019 •

edited

Loading

twatanabe commented Sep 22, 2019 •

edited

Loading

yurist38 commented Oct 19, 2019 •

edited

Loading

kororo commented Oct 20, 2019 •

edited

Loading