gridsome: gridsome@0.6.8 + source-filesystem@0.5.0 makes hot-reload crash

Description

Hot-Reload makes the app crash from time to time. The cause of the crash is due to graphQL query returning undefined but it is still not clear how to exactly reproduce it. In fact every few changes made to the code, Hot-Reload comes into play and arbitrarily crashes. Only another hot-reload cycle is able to refresh the page (developer has to change something in the code to trigger a new hot-reload and hopefully refresh the app).

Steps to reproduce

Following is a bash code for the setup.

# Bootstrap
gridsome create reproduce-bug
cd reproduce-bug
npm i --save @gridsome/source-filesystem @gridsome/transformer-remark
mkdir content && touch content/index.md

# Create a markdown file
echo -e "---\ntitle: Homepage\ndate: 2019-09-27 20:25:34\n---" > content/index.md

# Create a graphQL source
echo -e "module.exports = {\n \
  siteName: 'reproduce-bug',\n \
  plugins: [\n \
  {\n \
    use: '@gridsome/source-filesystem',\n \
    options: {\n \
      path: 'index.md',\n \
      baseDir: './content',\n \
      typeName: 'HomePage',\n \
      route: '/'\n \
    }\n \
  }]\n \
}" > gridsome.config.js

# Add query to pages/index.vue 
echo -e "<template>\n \
  <Layout>\n \
    {{\$page.content.title}}\n \
  </Layout>\n \
</template>\n \
\n \
<page-query>\n \
query Homepage {\n \
  content: homePage(path: \"/\") {\n \
    title\n \
  }\n \
}\n \
</page-query>" > src/pages/Index.vue

then the crash occurs when tweaking src/pages/Index.vue in and out while saving each changes to trigger Hot-Reload on purpose.

Expected result

After making changes to the code, the app should refresh itself in the browser without error.

Actual result

After adding some html nodes, css classes etc… app crashes, with the output:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'content' of null"

found in

---> <Index> at src/pages/Index.vue
       <Root>

as well as

TypeError: Cannot read property 'content' of null
    at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/gridsome","cacheIdentifier":"516f046c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/pages/Index.vue?vue&type=template&id=4bc9d7de& (page--src--pages--index-vue.js:34), <anonymous>:29:42)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
    at Watcher.get (vue.runtime.esm.js?2b0e:4473)
    at new Watcher (vue.runtime.esm.js?2b0e:4462)
    at mountComponent (vue.runtime.esm.js?2b0e:4067)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8409)
    at init (vue.runtime.esm.js?2b0e:3118)
    at merged (vue.runtime.esm.js?2b0e:3301)
    at createComponent (vue.runtime.esm.js?2b0e:5972)

where content is the query alias defined in src/pages/Index.vue.

Environment


Libs:
- gridsome version: 0.6.8
- @gridsome/source-filesystem: 0.5.0
- @gridsome/transformer-remark: 0.3.2
- @gridsome/cli version: 0.2.1
- Node.js: 10.15.1


Browser:
- [X] Chrome (desktop) version 71
- [ ] 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

After reverting gridsome back to “0.6.7” strictly, the bug seems to disappear. Got a crash after a few minutes of work even using 0.6.7

About this issue

  • Original URL
  • State: open
  • Created 5 years ago
  • Reactions: 5
  • Comments: 21 (2 by maintainers)

Most upvoted comments

It is such an issue that actually causes a hard time during development. I really wish it could get more attention @igk1972 @hjvedvik 😃

I think I am having the same issue on the latest v0.7.8. I am using SanityCMS as the source for data. Not sure if that matters thou.

I have observed that everytime I prototype/edit anything relating to the query data (f. ex. editing class name on v-for element or any child), it just crashes with this error TypeError: Cannot read property 'articles' of null, where articles is the GraphQL query.

I hope this can be addressed fast. I tried multiple major Node versions and clean install, this just drives development nuts. Will try disabling HMR. 😃

@Jonarod By any chance are you running Ubuntu?

I’m facing the same issue 😦