search

elastic / next-eui-starter

Start building Kibana protoypes quickly with the Next.js EUI Starter
https://elastic.github.io/next-eui-starter/
Apache License 2.0
94 stars 30 forks source link

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

Open johnnypea opened 3 years ago

johnnypea commented 3 years ago 
"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 commented 3 years ago

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 commented 3 years ago

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

chandlerprall commented 3 years ago

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 commented 2 years ago

Hey, is there a solution for this ?