Warning: Did not expect server HTML to contain a <path> in <svg>.

[johnnypea]

"dependencies": {
  "@elastic/datemath": "^5.0.3",
  "@elastic/eui": "^30.5.1",
  "@next/bundle-analyzer": "^10.0.7",
  "glob": "^7.1.6",
  "moment": "^2.29.1",
  "next": "^10.0.7",
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "sass": "^1.29.0",
  "typescript-plugin-css-modules": "^3.0.1"
},
"devDependencies": {
  "@types/node": "^14.14.10",
  "@typescript-eslint/eslint-plugin": "^4.9.0",
  "@typescript-eslint/parser": "^4.9.0",
  "copy-webpack-plugin": "^6.4.1",
  "eslint": "^7.14.0",
  "eslint-config-prettier": "^6.15.0",
  "eslint-plugin-jsx-a11y": "^6.4.1",
  "eslint-plugin-prefer-object-spread": "^1.2.1",
  "eslint-plugin-prettier": "^3.2.0",
  "eslint-plugin-react": "^7.21.5",
  "eslint-plugin-react-hooks": "^4.2.0",
  "iniparser": "^1.0.5",
  "null-loader": "^4.0.1",
  "prettier": "^2.2.1",
  "serve": "^11.3.2",
  "typescript": "^4.1.2",
  "webpack": "^4.45.0"
}

webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:67 Warning: Did not expect server HTML to contain a <path> in <svg>.
    at svg
    at EuiIconEmpty (webpack-internal:///./node_modules/@elastic/eui/es/components/icon/assets/empty.js:14:20)
    at EuiIcon (webpack-internal:///./node_modules/@elastic/eui/es/components/icon/icon.js:559:5)
    at a
    at EuiHeaderLogo (webpack-internal:///./node_modules/@elastic/eui/es/components/header/header_logo.js:43:28)
    at div
    at EuiFlexItem (webpack-internal:///./node_modules/@elastic/eui/es/components/flex/flex_item.js:41:23)
    at div
    at EuiFlexGroup (webpack-internal:///./node_modules/@elastic/eui/es/components/flex/flex_group.js:81:23)
    at AppLogo (webpack-internal:///./src/components/chrome/index.tsx:43:22)
    at div
    at EuiPageSideBar (webpack-internal:///./node_modules/@elastic/eui/es/components/page/page_side_bar/page_side_bar.js:37:23)
    at main
    at EuiPageBody (webpack-internal:///./node_modules/@elastic/eui/es/components/page/page_body/page_body.js:40:23)
    at div
    at EuiPage (webpack-internal:///./node_modules/@elastic/eui/es/components/page/page.js:43:23)
    at Chrome (webpack-internal:///./src/components/chrome/index.tsx:120:24)
    at EuiApp (webpack-internal:///./src/pages/_app.tsx:38:24)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:149:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:637:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:768:24)

[chandlerprall]

I'm guessing you are following the appendIconComponentCache guidance listed in https://github.com/elastic/eui/blob/master/wiki/consuming.md#failing-icon-imports for your SSR?

[johnnypea]

Actually, I just cloned the starter repo and run yarn dev. Just wanted to point it out.

[chandlerprall]

Well, that makes it easier to look into. Thanks 😄

For whoever looks into this first: that warning is issued when React first mounts/hydrates against server side code but is unable to match 1:1 the server DOM with DOM generated client-side. One quick example would be:

HTML from server

<span>
  Hello
</span>

and a React component

<span>
  Hello
</span>

Identical! Except the React component renders without any white space: React.createElement("span", null, "Hello"); while the server DOM contains the [collapsed] whitespace within the text node.

A quick glance at this error makes me think the server-rendered icon isn't the empty one, but then on first pass within the browser the icon set hasn't loaded yet and React starts with the empty icon, no longer matching the SSR DOM.

[quantumsheep]

Hey, is there a solution for this ?