My home title is automatically replaced by "An unexpected error has occured"

thekidchad commented 6 years ago

Hi, Hope everyone is ok

Describe the bug

In Chrome V68, everything is ok but the problem is with the Chrome used by Google Bot. In fact, in my home page, after building the home page, the title is automatically replaced by ": An unexpected error has occured". You definetely need to go over "to reproduce and dem section"

To Reproduce & Dem

You need to go to https://www.browserling.com/browse/win/7/chrome/41/https://en.vetolib.vet and observe the title. The other page are totally OK.

System information

NextJs 6.1.1
- Node.JS 8.11.1
- Nginx AWS Server

My Code

document.js :

     `<html lang={process.env.LANGUAGECODE}>
      <Head>
      {/*Meta tag for every page*/}
      {/* <meta charSet="utf-8" /> */}

      {/* Use minimum-scale=1 to enable GPU rasterization */}
      <meta name="viewport" content={'user-scalable=0, initial-scale=1, ' + 'minimum-scale=1, width=device-width, height=device-height'}/>

      {/* PWA primary color */}
      <meta name="theme-color" content={pageContext.theme.palette.primary.main} />

      {/* Links*/}
        <link rel="stylesheet" href="/_next/static/style.css" />
        <link rel="shortcut icon" href="/static/favicon.ico" />
        <link rel="stylesheet" href="https://cdn.rawgit.com/h-ibaldo/Raleway_Fixed_Numerals/master/css/rawline.css" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
      {/* Comfortaa Logo Font */}  
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Comfortaa" />
      {/* GOOGLE SEARCH CONSOLE */}
        <meta name="google-site-verification" content={process.env.GOOGLESEARCHCONSOLE} />

    </Head>
    <body>
      <Main />
      <NextScript />
    </body>
  </html>`

landing.js (actually it's the home page)

import LandingMeta from 'landing/landingMeta';
  return (
    <I18nextProvider i18n={Local(props.translations,props.language)}>
      <div>
        <LandingMeta/>
        <CookiesStateConnector/>
        <GlobalSnackbar/>
        <NavBar fixed/>
        <Opener/>
        <HowTo />
        <Footer />
      </div>
    </I18nextProvider>
  );

And the famous LandingMeta.js

    return (
    <Head>
        {/*Meta tag That  can change on some pages (use a key to avoid duplication)*/}
        <title key="title" >Vetolib : Make An online appointment</title>
          {/*A brief description of the page.*/}
          <meta key="description" name="description" content={`${t('meta:metaOgTitle')} ${t('meta:metaOgDescription')}`}  />
          {/*A series of keywords you deem relevant to the page in question.*/}
          <meta key="keywords" name="keywords" content={t('meta:metaKeyWords')} />
          {/*An indication to search engine crawlers (robots or "bots") as to what they should do with the page.*/}
          <meta key="robots" name="robots" content="index,follow" />
</Head>
);

Thank you so much for your help

JoaoBGusmao commented 6 years ago

duplicate of #4996

solution: https://github.com/zeit/next.js/issues/4996#issuecomment-417991907

if you open the Google chrome console in your website, you will see the error: "undefined is not a function"

timneutkens commented 6 years ago

Exactly, Next.js by itself works in Chrome 41, so you’re using a npm package that was not transpiled before publishing.

JoaoBGusmao commented 6 years ago

@timneutkens would be nice to have somewhere in the documentation a warning to the possibility of this error, since we're 100% blind until see the website indexed with this title

timneutkens commented 6 years ago

I don't know where that would fit as no one reads all of the docs at once most of the time and it's not really an issue Next.js causes. If you use another framework you'll get into the same issue except if that framework compiles all node_modules.

I guess the best thing we could do is try and detect it on a bundle level. Which sounds like an interesting case for a webpack plugin. This would be very complex though, and possibly slowing down the build a bit.

DovydasNavickas commented 5 years ago

What's the point of throwing an error into title in the production environment in the first place? Why on earth would you do that if (as we see) it affects how search engines see it? 'Cause just before the error, the title is exactly how is should be.

What is more, an excuse that:

no one reads all of the docs at once

makes no sense. If it's not in the docs, there's only issues to be found 😄 So, it's better to find it in the docs than to not have it at all.

NextJS is usually used because of SSR and that usually is requirement because of SEO. This hurts SEO. That's why it's worth having this case described in the docs.

And it's quite hard to debug too. For example, our project works in Chrome 41 while in dev build. It doesn't while built for production. And in production build, you see only two letter variables and errors such as:

TypeError: undefined is not a function

Which says nothing.

Gonna try to make it spit the source-maps or just not minify things... Or sth...

Maybe you have better tips how to debug production build?

timneutkens commented 5 years ago

Like I said before it's not a Next.js issue:

Exactly, Next.js by itself works in Chrome 41, so you’re using a npm package that was not transpiled before publishing.

It's something you're adding to your application that is incorrectly published to npm or is not meant to be used in older browsers / in a browser environment.

Feel free to write up a RFC to solve the issue / add warnings or another solution, like I said before it's a little more complex than documenting this. There needs to be a way to transpile specific modules. That's tracked here: https://github.com/zeit/next.js/issues/706

vercel / next.js