Edge 18 & IE 11 server mismatch with SVG icons

[oliviertassinari]

Do you want to request a feature or report a bug?

bug

What is the current behavior?

React raises a warning:

https://codesandbox.io/s/k91nr3xzy5

import React from "react";

export default () => (
  <div>
    2
    <svg>
      <path d="M0 0h24v24H0z" />
    </svg>
  </div>
);

What is the expected behavior?

No warning

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React: 16.8.4
Browser: Edge 18

[gaearon]

Wanna send a fix?

[oliviertassinari]

@gaearon It's a shame I have only been contributing issues to the React project, in all these years. This issue is not very important. I doesn't break the UI. It was more about moving an issue reported on Material-UI closer to its origin than anything else. Me working on #13838 could be more valuable for the community.

[StarpTech]

@gaearon IE, Edge do svg paths normalization. It's similiar to

react/packages/react-dom/src/client/ReactDOMComponent.js

Lines 141 to 149 in b1a03df

	// IE 11 parses & normalizes the style attribute as opposed to other
	// browsers. It adds spaces and sorts the properties in some
	// non-alphabetical order. Handling that would require sorting CSS
	// properties in the client & server versions or applying
	// `expectedStyle` to a temporary DOM node to read its `style` attribute
	// normalized. Since it only affects IE, we're skipping style warnings
	// in that browser completely in favor of doing all that work.
	// See https://github.com/facebook/react/issues/11807
	canDiffStyleForHydrationWarning = canUseDOM && !document.documentMode;

and can be archived in the same way. Any objections?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[licg9999]

Hi? Is this issue resolved? I can still replay this problem on react 16.12.0 😳

[CrossTheDev]

I am on react@16.13.1 and it's still a problem.

[joshuambg]

Still a problem.
Windows 10
IE 11
"react": "^16.11.0"

[deadcoder0904]

I am trying to use it in my DarkMode.tsx with Next.js & I face the same error:

react_devtools_backend.js:2560 Warning: Prop d did not match. Server: "M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" Client: "M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
at path
at svg
at MoonIcon
at button
at div
at DarkMode

DarkMode.tsx

import { MoonIcon, SunIcon } from '@heroicons/react/solid'

import { useStore } from '@/store/index'

export const DarkMode = () => {
	const { theme, setTheme } = useStore()

	return (
		<div className="cursor-pointer">
			{theme === 'dark' && (
				<button
					className="focus:outline-none"
					title="Activate light mode"
					onClick={() => {
						console.log(theme)
						setTheme('light')
					}}
				>
					<MoonIcon className="w-8 h-8" />
				</button>
			)}
			{theme === 'light' && (
				<button
					className="focus:outline-none"
					title="Activate dark mode"
					onClick={() => {
						setTheme('dark')
					}}
				>
					<SunIcon className="w-8 h-8" />
				</button>
			)}
		</div>
	)
}

Edit: No worries. I wasn't using observer so that solved it :)

[Nzent]

Still getting this error on Next.js + Tailwind dark mode 😟

[mustafamoe]

me too :/

[ivosabev]

+1 with SVG icon exported from React component and rendered in NextJS

[slbls]

For anyone looking for a workaround for the time being, disabling hydration on inline SVG elements seems to do the trick. This obviously comes with downsides of its own, namely in that it's only really applicable to static SVGs, but here's the relevant TypeScript code for a component that disables hydration:

import {
	FC,
	HTMLProps,
	ReactNode,
	useEffect,
	useLayoutEffect,
	useReducer,
	useRef
} from "react";

type NoHydrationProps = {
	readonly children: ReactNode;
	readonly parent?: keyof JSX.IntrinsicElements;
} & Omit<HTMLProps<HTMLElement>, "dangerouslySetInnerHTML">;

const reducer = () => true;

const isBrowser = typeof window !== "undefined";

const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;

export const NoHydration = ({
	children,
	parent = "div",
	...props
}: NoHydrationProps) => {
	const ref = useRef<HTMLElement>(null);

	const [isHydrated, hydrate] = useReducer(reducer, !isBrowser);

	useIsomorphicLayoutEffect(() => {
		if (ref.current?.hasChildNodes()) {
			return;
		}

		hydrate();
	}, []);

	const ParentElement = parent as unknown as FC<HTMLProps<HTMLElement>>;

	if (!isHydrated) {
		return (
			<ParentElement
				ref={ref}
				suppressHydrationWarning
				dangerouslySetInnerHTML={{ __html: "" }}
				{...props}
			/>
		);
	}

	return (
		<ParentElement
			ref={ref}
			// `display: contents` ensures the parent element does not produce
			// a CSS box for itself, seeing as the parent is only needed for the
			// purpose of preventing client-side hydration of the children.
			style={{ display: "contents" }}
			{...props}
		>
			{children}
		</ParentElement>
	);
};

[EbrahimHeydari]

In react v18.2.0, This problem still exists 😕

[omer-os]

same issue with nextjs 13 and lastest version of reactjs

[faeb187]

Same experience: react-icons, MUI, SSR in pages/ dir with NextJS 13.2.1 & React 18.2.0

[xjahic]

I had this problem and upgrading mui to v5 fixed the problem.

  "@emotion/core": "^11.0.0",
  "@emotion/react": "^11.10.6",
  "@emotion/server": "^11.10.0",
  "@emotion/styled": "^11.10.6",
  "@mui/icons-material": "^5.11.11",
  "@mui/material": "^5.11.11",
  "@mui/styles": "^5.11.11",

"next": "12.3.1",
"react": "18.2.0",

[hson194]

Same issue to me

    "@types/react": "18.2.0",
    "@types/react-dom": "18.2.1",
    "@vercel/analytics": "^1.0.0",
    "autoprefixer": "10.4.14",
    "contentlayer": "^0.3.2",
    "eslint": "8.39.0",
    "eslint-config-next": "13.3.1",
    "next": "13.4.1",

[dbonates]

I was able to find a way to handle this:

<Button variant="ghost" size="sm" onClick={() => { setTheme(theme === "light" ? "dark" : "light") }}>
  {loaded ?
    (theme === "light" ? <MoonIcon /> : <SunIcon />)
    : (<span className="animate-pulse">...</span>)
  }
</Button>

code with context, if needed:

'use client'

import React, { useEffect, useState } from 'react'
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import { SunIcon, MoonIcon } from "@/components/ui/icons"

export default function NavBar() {
  const { theme, setTheme } = useTheme()
  const [loaded, setLoaded] = useState(false);
  useEffect(() => {
    setLoaded(true);
  }, [setLoaded]);

  return (
    <div className='flex items-center fixed top-0 left-0 right-0'>
      <div className='px-3'>Bonates.com</div>
      <div className='flex-grow' />
      <Button variant="ghost" size="sm" onClick={() => { setTheme(theme === "light" ? "dark" : "light") }}>
        {loaded ?
          (theme === "light" ? <MoonIcon /> : <SunIcon />)
          : (<span className="animate-pulse">...</span>)
        }
      </Button>
    </div>
  )
}

[isaacdarcilla]

I was able to find a way to handle this:

<Button variant="ghost" size="sm" onClick={() => { setTheme(theme === "light" ? "dark" : "light") }}>
  {loaded ?
    (theme === "light" ? <MoonIcon /> : <SunIcon />)
    : (<span className="animate-pulse">...</span>)
  }
</Button>

code with context, if needed:

'use client'

import React, { useEffect, useState } from 'react'
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import { SunIcon, MoonIcon } from "@/components/ui/icons"

export default function NavBar() {
  const { theme, setTheme } = useTheme()
  const [loaded, setLoaded] = useState(false);
  useEffect(() => {
    setLoaded(true);
  }, [setLoaded]);

  return (
    <div className='flex items-center fixed top-0 left-0 right-0'>
      <div className='px-3'>Bonates.com</div>
      <div className='flex-grow' />
      <Button variant="ghost" size="sm" onClick={() => { setTheme(theme === "light" ? "dark" : "light") }}>
        {loaded ?
          (theme === "light" ? <MoonIcon /> : <SunIcon />)
          : (<span className="animate-pulse">...</span>)
        }
      </Button>
    </div>
  )
}

This works, thank you!