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: #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()
    );
  },