I am currently in the process of transferring a Nuxt.js project from
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7739020f0337465943">[email protected]</a>2.7. After updating the Webpack configuration as required, I have encountered the following issue.
Whenever I attempt to navigate to any page on the website, I am met with the default Nuxt loading screen displaying bundling progress, which then continuously refreshes without making any progress. The application remains stuck at this loading screen and the tab title continuously displays Nuxt.js: Loading app....
There are no visible errors in the console or during compilation, but upon inspecting the Network tab in devtools, I notice a failed (HTTP 500) request to localhost:3000. The response payload for this error reads:
NuxtServerError
render function or template not defined in component: NuxtLoading
Upon investigating NuxtLoading, I found a file named nuxt-loading.vue within the .nuxt folder. This file appears to be a fully functional component with a render() method implemented as follows:
render(h) {
let el = h(false)
if (this.show) {
el = h('div', {
staticClass: 'nuxt-progress',
class: {
'nuxt-progress-notransition': this.skipTimerCount > 0,
'nuxt-progress-failed': !this.canSucceed
},
style: {
'width': this.percent + '%',
'left': this.left
}
})
}
return el
}
Actions Taken:
- Reinstallation of
node_modules; rm -rf .nuxt && yarn dev(EDIT: along withyarn.lock);- Upgrade of
element-uito the latest version.
Thank you in advance for any assistance provided. Feel free to ask for any additional information if needed.