Nuxt reports an error: render function or template not defined in component: anonymous

problem

stay dev hot reload Development under the mode of , It was good , This error occurred after adding a piece of code .
The detailed error information is as follows ：

This prompt seems to be a system level error , No clue . therefore google And , I found many people who mentioned this mistake issue, However …… I didn't see a solution .

ok , It's better to look at it by yourself .

So cancel the Dafa ...
I'll comment out the added part of the code first , preservation , Sure enough, there is no more wrong report .
Take a look at the code added in this part ～

analysis & solve

browser.js

let browser = {
    };
const ua = navigator.userAgent;

browser = {
    
  weixin: ua.toLowerCase().indexOf('micromessenger') !== -1,
  ios: (/\(i[^;]+;( U;)? CPU.+Mac OS X/).test(ua),
  android: ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1
}

export default browser;

The above is what I added browser.js file , Then I was in a .vue In file import With it .
It's OK to look at this part of the code , So I read the wrong content carefully （PS： Take that. show all frames Check on ）……

This time I found a key point —— yes server render Error of .

Um. ~~ It's easy to understand .
Nuxt Of universal Patterns support isomorphism 【https://zh.nuxtjs.org/api/configuration-mode/#mode-%E5%B1%9E%E6%80%A7】.
PS： See this article for isomorphism （ Talk about the front end 「 isomorphism 」）

And for Nuxt Isomorphism of , Our project code is on the server （Node） And the client （ browser ） Will run , This is the benefit of isomorphism , We can write a set of code , Both ends can execute . But it is precisely because both sides will execute , We need to pay attention to the differences between the two environments . For example, the server is node Environmental Science , So it's not window Object's . And look at what I added browser.js File code , Yes navigator.userAgent, It's actually window Properties of . So I found the cause of the problem .
The way to modify it is very simple , We can judge what the current environment is , The server does not execute , and Nuxt There are also offers process.client and process.server Two properties for us . So modify the code as follows ：

let browser = {
    };

if (process.client) {
    
  const ua = navigator.userAgent;
  browser = {
    
    weixin: ua.toLowerCase().indexOf('micromessenger') !== -1,
    ios: (/\(i[^;]+;( U;)? CPU.+Mac OS X/).test(ua),
    android: ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1
  }
}

export default browser;

Save refresh page , Sure enough, I didn't report any more mistakes ~~

---

【 The following is nonsense 】

Think about it , I still stay at the level of using these frameworks , Sometimes when I see some mistakes at the bottom, I have no clue , Blind google 了 . But in fact, sometimes carefully analyze the error prompt , You may find useful information ……
Like this error report , I'll search directly render function or template not defined in component: anonymous This error prompt found github issue There is no solution yet close the , Because this is not Nuxt Of bug, But because I don't know to consider the pit of homogeneous code , The rendering of the server fails . Therefore, we should analyze and think by ourselves before looking at problems , And for the framework used in my project , You still need to understand its principle , To know what it is, but also to know why ！！