question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

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

github_iconTop GitHub Comments

7reactions
flexcharcommented, Dec 3, 2019

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

1reaction
flexcharcommented, Oct 20, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

why is hot-reloading is not working on Gridsome
Turns out this was an issue with WSL and Webpack not working when the repo is outside the WSL file system. It kind'a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found