Fix hydration error

oliviertassinari · oliviertassinari · commit 8c366fec7438 · 2020-03-15T13:34:35.000+01:00
Likely related to vercel/next.js#10355
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -44,7 +44,7 @@ module.exports = {
     // we have to be disciplined about the usage and ensure the Number type for its
     // arguments
     'no-restricted-globals': ['error'].concat(confusingBrowserGlobals),
-    'no-underscore-dangle': ['error', { allow: ['_rewriteUrlForNextExport'] }],
+    'no-underscore-dangle': 'error',
     'prefer-arrow-callback': ['error', { allowNamedFunctions: true }],
     'prefer-destructuring': 'off', // Destructuring harm grep potential.
 
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -11,7 +11,8 @@ import PropTypes from 'prop-types';
 import acceptLanguage from 'accept-language';
 import { create } from 'jss';
 import rtl from 'jss-rtl';
-import { Router as Router2, useRouter } from 'next/router';
+import { useRouter } from 'next/router';
+import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
 import { StylesProvider, jssPreset } from '@material-ui/styles';
 import pages from 'docs/src/pages';
 import initRedux from 'docs/src/modules/redux/initRedux';
@@ -58,7 +59,7 @@ function LanguageNegotiation() {
 
   React.useEffect(() => {
     const { userLanguage: userLanguageUrl, canonical } = pathnameToLanguage(
-      Router2._rewriteUrlForNextExport(router.asPath),
+      rewriteUrlForNextExport(router.asPath),
     );
     const preferedLanguage =
       getCookie('userLanguage') !== 'noDefault' && userLanguage === 'en'
@@ -289,7 +290,7 @@ function AppWrapper(props) {
   if (pathname !== '/') {
     // The leading / is only added to support static hosting (resolve /index.html).
     // We remove it to normalize the pathname.
-    // See `_rewriteUrlForNextExport` on Next.js side.
+    // See `rewriteUrlForNextExport` on Next.js side.
     pathname = pathname.replace(/\/$/, '');
   }
   const activePage = findActivePage(pages, pathname);
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { ServerStyleSheets } from '@material-ui/styles';
 import Document, { Head, Main, NextScript } from 'next/document';
-import { Router as Router2 } from 'next/router';
+import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
 import { LANGUAGES_SSR } from 'docs/src/modules/constants';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import { themeColor } from 'docs/src/modules/components/ThemeContext';
@@ -48,20 +48,20 @@ export default class MyDocument extends Document {
           {/* SEO */}
           <link
             rel="canonical"
-            href={`https://material-ui.com${Router2._rewriteUrlForNextExport(
+            href={`https://material-ui.com${rewriteUrlForNextExport(
               `${userLanguage === 'en' ? '' : `/${userLanguage}`}${canonical}`,
             )}`}
           />
           <link
             rel="alternate"
-            href={`https://material-ui.com${Router2._rewriteUrlForNextExport(canonical)}`}
+            href={`https://material-ui.com${rewriteUrlForNextExport(canonical)}`}
             hrefLang="x-default"
           />
           {LANGUAGES_SSR.map(userLanguage2 => (
             <link
               key={userLanguage2}
               rel="alternate"
-              href={`https://material-ui.com${Router2._rewriteUrlForNextExport(
+              href={`https://material-ui.com${rewriteUrlForNextExport(
                 `${userLanguage2 === 'en' ? '' : `/${userLanguage2}`}${canonical}`,
               )}`}
               hrefLang={userLanguage2}
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import Router, { Router as Router2, useRouter } from 'next/router';
+import Router, { useRouter } from 'next/router';
+import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
 import { withStyles, useTheme } from '@material-ui/core/styles';
 import NProgress from 'nprogress';
 import CssBaseline from '@material-ui/core/CssBaseline';
@@ -182,7 +183,7 @@ function AppFrame(props) {
   };
 
   const router = useRouter();
-  const { canonical } = pathnameToLanguage(Router2._rewriteUrlForNextExport(router.asPath));
+  const { canonical } = pathnameToLanguage(rewriteUrlForNextExport(router.asPath));
   const { activePage } = React.useContext(PageContext);
 
   let disablePermanent = false;
diff --git a/docs/src/modules/components/Head.js b/docs/src/modules/components/Head.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import NextHead from 'next/head';
-import { Router, useRouter } from 'next/router';
+import { useRouter } from 'next/router';
+import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 
@@ -27,7 +28,7 @@ export default function Head(props) {
       <meta property="og:title" content={title} />
       <meta
         property="og:url"
-        content={`https://material-ui.com${Router._rewriteUrlForNextExport(router.asPath)}`}
+        content={`https://material-ui.com${rewriteUrlForNextExport(router.asPath)}`}
       />
       <meta property="og:description" content={description} />
       <meta property="og:image" content="https://material-ui.com/static/logo.png" />
diff --git a/docs/src/modules/components/MarkdownLinks.js b/docs/src/modules/components/MarkdownLinks.js
@@ -22,7 +22,7 @@ export async function handleEvent(event, as) {
   if (pathname !== '/') {
     // The leading / is only added to support static hosting (resolve /index.html).
     // We remove it to normalize the pathname.
-    // See `_rewriteUrlForNextExport` on Next.js side.
+    // See `rewriteUrlForNextExport` on Next.js side.
     pathname = pathname.replace(/\/$/, '');
   }
   pathname = pathnameToLanguage(pathname).canonical;
diff --git a/docs/src/modules/components/useMarkdownDocs.js b/docs/src/modules/components/useMarkdownDocs.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import kebabCase from 'lodash/kebabCase';
-import { Router as Router2 } from 'next/router';
+import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
 import { useSelector } from 'react-redux';
 import Demo from 'docs/src/modules/components/Demo';
 import { getHeaders, getContents, demoRegexp } from 'docs/src/modules/utils/parseMarkdown';
@@ -80,9 +80,7 @@ export default function useMarkdownDocs(options) {
 ${headers.components
   .map(
     component =>
-      `- [&lt;${component} /&gt;](${Router2._rewriteUrlForNextExport(
-        `/api/${kebabCase(component)}`,
-      )})`,
+      `- [&lt;${component} /&gt;](${rewriteUrlForNextExport(`/api/${kebabCase(component)}`)})`,
   )
   .join('\n')}
   `);
diff --git a/docs/src/modules/utils/generateMarkdown.js b/docs/src/modules/utils/generateMarkdown.js
@@ -1,7 +1,7 @@
 import { parse as parseDoctrine } from 'doctrine';
 import * as recast from 'recast';
 import { parse as docgenParse } from 'react-docgen';
-import { Router as Router2 } from 'next/router';
+import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
 import { pageToTitle } from './helpers';
 import { SOURCE_CODE_ROOT_URL, LANGUAGES_IN_PROGRESS } from 'docs/src/modules/constants';
 
@@ -331,7 +331,7 @@ function generateProps(reactAPI) {
     text = `${text}
 Any other props supplied will be provided to the root element (${
       reactAPI.inheritance
-        ? `[${reactAPI.inheritance.component}](${Router2._rewriteUrlForNextExport(
+        ? `[${reactAPI.inheritance.component}](${rewriteUrlForNextExport(
             reactAPI.inheritance.pathname,
           )})`
         : 'native element'
@@ -412,7 +412,7 @@ function generateInheritance(reactAPI) {
 
   return `## Inheritance
 
-The props of the [${inheritance.component}](${Router2._rewriteUrlForNextExport(
+The props of the [${inheritance.component}](${rewriteUrlForNextExport(
     inheritance.pathname,
   )}) component${suffix} are also available.
 You can take advantage of this behavior to [target nested components](/guides/api/#spread).
@@ -436,7 +436,7 @@ function generateDemos(reactAPI) {
   return `## Demos
 
 ${pagesMarkdown
-  .map(page => `- [${pageToTitle(page)}](${Router2._rewriteUrlForNextExport(page.pathname)})`)
+  .map(page => `- [${pageToTitle(page)}](${rewriteUrlForNextExport(page.pathname)})`)
   .join('\n')}
 
 `;

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ export async function handleEvent(event, as) {`
`22`	`22`	`if (pathname !== '/') {`
`23`	`23`	`// The leading / is only added to support static hosting (resolve /index.html).`
`24`	`24`	`// We remove it to normalize the pathname.`
`25`		- // See `_rewriteUrlForNextExport` on Next.js side.
	`25`	+ // See `rewriteUrlForNextExport` on Next.js side.
`26`	`26`	`pathname = pathname.replace(/\/$/, '');`
`27`	`27`	`}`
`28`	`28`	`pathname = pathnameToLanguage(pathname).canonical;`