gridsome@0.6.8 + source-filesystem@0.5.0 makes hot-reload crash
See original GitHub issueDescription
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:
- Created 4 years ago
- Reactions:5
- Comments:21 (2 by maintainers)
Top GitHub 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
, wherearticles
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. 😃