From 8c366fec7438fccbb089b0a0288de0d77ebd54ca Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 14 Mar 2020 19:01:23 +0100 Subject: [PATCH] Fix hydration error Likely related to https://github.com/zeit/next.js/issues/10355 --- .eslintrc.js | 2 +- docs/pages/_app.js | 7 ++++--- docs/pages/_document.js | 8 ++++---- docs/src/modules/components/AppFrame.js | 5 +++-- docs/src/modules/components/Head.js | 5 +++-- docs/src/modules/components/MarkdownLinks.js | 2 +- docs/src/modules/components/useMarkdownDocs.js | 6 ++---- docs/src/modules/utils/generateMarkdown.js | 8 ++++---- 8 files changed, 22 insertions(+), 21 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 1310d353f50149..d6df7c2be62ec5 100644 --- 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 index 024cf38005fd0d..86b67144408054 100644 --- 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 index ebbfb63104724e..29c60abb10ca0d 100644 --- 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 */} {LANGUAGES_SSR.map(userLanguage2 => ( diff --git a/docs/src/modules/components/MarkdownLinks.js b/docs/src/modules/components/MarkdownLinks.js index 098aab649af57c..248fe78b9d408b 100644 --- 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 index 539ca796ba4e01..895f016d1d8a29 100644 --- 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 => - `- [<${component} />](${Router2._rewriteUrlForNextExport( - `/api/${kebabCase(component)}`, - )})`, + `- [<${component} />](${rewriteUrlForNextExport(`/api/${kebabCase(component)}`)})`, ) .join('\n')} `); diff --git a/docs/src/modules/utils/generateMarkdown.js b/docs/src/modules/utils/generateMarkdown.js index d1b4824ca2ada1..a313e358410987 100644 --- 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')} `;