React: Unexpected SSR difference warning with SVG <filter> primitives

[vxna]

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

What is the current behavior?
I've started recieving this warning about my SVGs which is using feGaussianBlur:
Warning: Expected server HTML to contain a matching <feGaussianBlur> in <filter>.

What is the expected behavior?
Should be no warnings because there are no difference.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Such behavior started right after updating to React 16.0.0-rc.3 and never happened with React 15.6.1

[nhunzaker]

cc @sebmarkbage @gaearon

Looks like the ol' SVG cares about casing but HTML doesn't is back at it again!

[gaearon]

Can you please provide a minimal reproducing example?

[forWorkAtML]

@nhunzaker I've seen this issue recently but ignored it thinking it was my fault (react 16.0.0). In any case, if I remember correctly I had an <svg tabIndex="2">. In the browser there would appear no errors but I couldn't tab to the icon. When I did <svg tabindex="2"> I would get Invalid DOM property tabindex. Did you mean tabIndex? but I could tab to the icon. Wanted to share because it appears similar.

[gaearon]

No, this sounds right. React asks you to always use the React canonical naming (camelCase) even if the lowercase version "appears" to work.

[gaearon]

Actually wait, I'm wrong. It doesn't sound right based on your description. Could be a bug.

[gaearon]

I filed a new issue for the tabIndex problem: https://github.com/facebook/react/issues/10987.

I don't think it's related to this issue.
We still need somebody to create a reproducing fiddle for this issue.

[forWorkAtML]

I'll work on it today and share it in the ticket you created.

[webcarrot]

This line:
https://github.com/facebook/react/blob/master/src/renderers/dom/fiber/ReactDOMFiberEntry.js#L444

Quick fix:

  canHydrateInstance(
    instance: Instance | TextInstance,
    type: string,
    props: Props,
  ): boolean {
    return (
      instance.nodeType === ELEMENT_NODE &&
      type.toLowerCase() === instance.nodeName.toLowerCase()
    );
  },

[gaearon]

Or maybe we should check the namespace, and apply case-insensitive check only to HTML.

[gaearon]

React 16.1.0-beta has been released. Please update react, react-dom, and react-test-renderer (if you use it) to this version and let us know if it solved the issue! We’d appreciate if you could test before Monday when we plan to get 16.1.0 out.

[krasnoperov]

In my case Warning: Expected server HTML to contain a matching <feMorphology> in <filter>. has gone!