',
@@ -477,7 +486,6 @@ test('duplicated global styles can be removed safely after rehydrating HTML SSRe
}
})
- safeQuerySelector('head').innerHTML = ''
safeQuerySelector('body').innerHTML = `
${app}
`
expect(safeQuerySelector('html')).toMatchInlineSnapshot(`
@@ -592,3 +600,156 @@ test('duplicated global styles can be removed safely after rehydrating HTML SSRe
`)
})
+
+describe('react18', () => {
+ let previousIsReactActEnvironment
+ beforeAll(() => {
+ jest
+ .mock('react', () => {
+ return jest.requireActual('react18')
+ })
+ .mock('react-dom', () => {
+ return jest.requireActual('react18-dom')
+ })
+ .mock('react-dom/server', () => {
+ return jest.requireActual('react18-dom/server')
+ })
+
+ previousIsReactActEnvironment = global.IS_REACT_ACT_ENVIRONMENT
+ global.IS_REACT_ACT_ENVIRONMENT = true
+ })
+
+ afterAll(() => {
+ jest.clearAllMocks()
+ global.IS_REACT_ACT_ENVIRONMENT = previousIsReactActEnvironment
+ })
+
+ test('no hydration mismatch for styled when using useId', () => {
+ const finalHTML = disableBrowserEnvTemporarily(() => {
+ resetAllModules()
+
+ const StyledDivWithId = styled(function DivWithId({ className }) {
+ const id = (React: any).useId()
+ return
+ })({
+ border: '1px solid black'
+ })
+
+ return ReactDOMServer.renderToString(
)
+ })
+
+ safeQuerySelector('body').innerHTML = `
${finalHTML}
`
+
+ resetAllModules()
+
+ const StyledDivWithId = styled(function DivWithId({ className }) {
+ const id = (React: any).useId()
+ return
+ })({
+ border: '1px solid black'
+ })
+
+ ;(React: any).unstable_act(() => {
+ ReactDOM.hydrateRoot(safeQuerySelector('#root'),
)
+ })
+
+ expect((console.error: any).mock.calls).toMatchInlineSnapshot(`Array []`)
+ expect((console.warn: any).mock.calls).toMatchInlineSnapshot(`Array []`)
+ })
+
+ test('no hydration mismatch for css prop when using useId', () => {
+ const finalHTML = disableBrowserEnvTemporarily(() => {
+ resetAllModules()
+
+ function DivWithId({ className }: { className?: string }) {
+ const id = (React: any).useId()
+ return
+ }
+
+ return ReactDOMServer.renderToString(
+
+ )
+ })
+
+ safeQuerySelector('body').innerHTML = `
${finalHTML}
`
+
+ resetAllModules()
+
+ function DivWithId({ className }: { className?: string }) {
+ const id = (React: any).useId()
+ return
+ }
+
+ ;(React: any).unstable_act(() => {
+ ReactDOM.hydrateRoot(
+ safeQuerySelector('#root'),
+
+ )
+ })
+
+ expect((console.error: any).mock.calls).toMatchInlineSnapshot(`Array []`)
+ expect((console.warn: any).mock.calls).toMatchInlineSnapshot(`Array []`)
+ })
+
+ test('no hydration mismatch for ClassNames when using useId', () => {
+ const finalHTML = disableBrowserEnvTemporarily(() => {
+ resetAllModules()
+
+ const DivWithId = ({ className }) => {
+ const id = (React: any).useId()
+ return
+ }
+
+ return ReactDOMServer.renderToString(
+
+ {({ css }) => {
+ return (
+
+ )
+ }}
+
+ )
+ })
+
+ safeQuerySelector('body').innerHTML = `
${finalHTML}
`
+
+ resetAllModules()
+
+ const DivWithId = ({ className }) => {
+ const id = (React: any).useId()
+ return
+ }
+
+ ;(React: any).unstable_act(() => {
+ ReactDOM.hydrateRoot(
+ safeQuerySelector('#root'),
+
+ {({ css }) => {
+ return (
+
+ )
+ }}
+
+ )
+ })
+
+ expect((console.error: any).mock.calls).toMatchInlineSnapshot(`Array []`)
+ expect((console.warn: any).mock.calls).toMatchInlineSnapshot(`Array []`)
+ })
+})
diff --git a/packages/react/src/class-names.js b/packages/react/src/class-names.js
index 1ac618f3b..deabcdce7 100644
--- a/packages/react/src/class-names.js
+++ b/packages/react/src/class-names.js
@@ -88,6 +88,8 @@ type Props = {
}) => React.Node
}
+const Noop = () => null
+
export const ClassNames: React.AbstractComponent
=
/* #__PURE__ */ withEmotionCache((props, cache) => {
let rules = ''
@@ -125,21 +127,25 @@ export const ClassNames: React.AbstractComponent =
}
let ele = props.children(content)
hasRendered = true
+ let possiblyStyleElement =
if (!isBrowser && rules.length !== 0) {
- return (
- <>
-
- {ele}
-
+ possiblyStyleElement = (
+
)
}
- return ele
+ // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
+ return (
+ <>
+ {possiblyStyleElement}
+ {ele}
+
+ )
})
if (process.env.NODE_ENV !== 'production') {
diff --git a/packages/react/src/emotion-element.js b/packages/react/src/emotion-element.js
index 8330c14ac..8514f9376 100644
--- a/packages/react/src/emotion-element.js
+++ b/packages/react/src/emotion-element.js
@@ -57,6 +57,8 @@ export const createEmotionProps = (type: React.ElementType, props: Object) => {
return newProps
}
+const Noop = () => null
+
let Emotion = /* #__PURE__ */ withEmotionCache(
(props, cache, ref) => {
let cssProp = props.css
@@ -121,6 +123,7 @@ let Emotion = /* #__PURE__ */ withEmotionCache(
newProps.className = className
const ele = React.createElement(type, newProps)
+ let possiblyStyleElement =
if (!isBrowser && rules !== undefined) {
let serializedNames = serialized.name
let next = serialized.next
@@ -128,20 +131,23 @@ let Emotion = /* #__PURE__ */ withEmotionCache(
serializedNames += ' ' + next.name
next = next.next
}
- return (
- <>
-
- {ele}
-
+ possiblyStyleElement = (
+
)
}
- return ele
+ // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
+ return (
+ <>
+ {possiblyStyleElement}
+ {ele}
+
+ )
}
)
diff --git a/packages/styled/src/base.js b/packages/styled/src/base.js
index 292ecaad6..d2ea17900 100644
--- a/packages/styled/src/base.js
+++ b/packages/styled/src/base.js
@@ -18,6 +18,7 @@ You can read more about this here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`
let isBrowser = typeof document !== 'undefined'
+const Noop = () => null
let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
if (process.env.NODE_ENV !== 'production') {
@@ -132,6 +133,7 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
newProps.ref = ref
const ele = React.createElement(finalTag, newProps)
+ let possiblyStyleElement =
if (!isBrowser && rules !== undefined) {
let serializedNames = serialized.name
let next = serialized.next
@@ -139,20 +141,23 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
serializedNames += ' ' + next.name
next = next.next
}
- return (
- <>
-
- {ele}
-
+ possiblyStyleElement = (
+
)
}
- return ele
+ // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
+ return (
+ <>
+ {possiblyStyleElement}
+ {ele}
+
+ )
}
)
diff --git a/yarn.lock b/yarn.lock
index dd247b03e..029d35143 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -23995,6 +23995,23 @@ react-timer-mixin@^0.13.4:
resolved "https://registry.npmjs.org/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==
+"react18-dom@npm:react-dom@alpha":
+ version "18.0.0-alpha-327d5c484-20211106"
+ resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0-alpha-327d5c484-20211106.tgz#f8855d8e73876b5dbf6545ca02e14d8644a48008"
+ integrity sha512-yI2Kxy4/+nAFYHtC5uVIwXPURABwBhtqbEgjgRa9cITHsmZIO7AqDee0a5nXVSr8wWmtmbN1vSh29aDicuO03A==
+ dependencies:
+ loose-envify "^1.1.0"
+ object-assign "^4.1.1"
+ scheduler "0.21.0-alpha-327d5c484-20211106"
+
+"react18@npm:react@alpha":
+ version "18.0.0-alpha-327d5c484-20211106"
+ resolved "https://registry.yarnpkg.com/react/-/react-18.0.0-alpha-327d5c484-20211106.tgz#f0e29b20b8c371697207a9f7b73a7ab625bee4b7"
+ integrity sha512-CB3JnXquQ9FYkd8IpTlvdpyk+HN1fOUDB7NabXTfbycqqRxuKhtijv7W7F/mbTzPLLMrxV5LwUqrLFc25Zy+UQ==
+ dependencies:
+ loose-envify "^1.1.0"
+ object-assign "^4.1.1"
+
react@16.14.0:
version "16.14.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
@@ -25339,6 +25356,14 @@ scheduler@0.19.1, scheduler@^0.19.1:
loose-envify "^1.1.0"
object-assign "^4.1.1"
+scheduler@0.21.0-alpha-327d5c484-20211106:
+ version "0.21.0-alpha-327d5c484-20211106"
+ resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0-alpha-327d5c484-20211106.tgz#16340fd4c7387ff58ad897b64715c0e3098e9489"
+ integrity sha512-VzlBG9d8m/2GwzXMjh7FoV6lpv/vOKdUYFCw3FCVY2aP/lN4oJkKwOlf4on2vEk855ckx+s3bR4eJLrlD7kZSw==
+ dependencies:
+ loose-envify "^1.1.0"
+ object-assign "^4.1.1"
+
scheduler@^0.13.6:
version "0.13.6"
resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"