While turining on ssr in Urql clint Im geting the below error: Did not expect server HTML to contain a in

Question

webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:67 Warning: Did not expect server HTML to contain a in . at div at Styled(div) (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:44:73) at div at Styled(div) (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:44:73) at Flex (webpack-internal:///./node_modules/@chakra-ui/layout/dist/esm/flex.js:25:5) at NavBar (webpack-internal:///./src/components/NavBar.tsx:31:142) at Index (webpack-internal:///./src/pages/index.tsx:25:96) at withUrqlClient(Index) (webpack-internal:///./node_modules/next-urql/dist/next-urql.es.js:50:28) at ColorModeProvider (webpack-internal:///./node_modules/@chakra-ui/color-mode/dist/esm/color-mode-provider.js:46:5) at ThemeProvider (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:78:71) at MyApp (webpack-internal:///./src/pages/_app.tsx:19: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:150:5) at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:639:24) at Root (webpack-internal:///./node_modules/next/dist/client/index.js:764:24)strong text

import { Box, Button, Flex, Link } from "@chakra-ui/react";
import React from "react";
import NextLink from "next/link";
import { useLogoutMutation, useMeQuery } from "../generated/graphql";
import { isServer } from "../util/isServer";
interface NaveBarProps {}

export const NavBar: React.FC<NaveBarProps> = ({}) => {
  const [{ fetching: logOutFatching }, logout] = useLogoutMutation();
  const [{ data, fetching }] = useMeQuery({
    pause: isServer(),
  });

  let body = null;
  console.log('DATA', data);
  
  if (fetching) {
  } else if (!data?.me) {
    body = (
      <>
        <NextLink href="/login">
          <Link color="white" mr={2}>
            login
          </Link>
        </NextLink>
        <NextLink href="/registration">
          <Link color="white" mr={2}>
            Register
          </Link>
        </NextLink>
      </>
    );
  } else {
    body = (
     <>
     <Flex>
        <Box mr={3}>{data.me.username} </Box>
        <Button
        color = 'yellowgreen'
          onClick={() => {
            logout();
          }}
          isLoading={logOutFatching}
          variant="link"
        >
          logout
        </Button>
      </Flex>
      </>
    );
  }
  return (
    <>
    <Flex bg="tomato" p={4}>
      <Box ml={"auto"}>{body}</Box>
    </Flex>
    </>
  );
};

Hey, it would be good if you can give some background of the problem. Possibly some code snippet which would helps others to reproduce and debug the problem on their end. I appreciate that you pasted stack trace but simply pasting that won'f do good! — return007, Dec 29 '20 at 13:06

Noah Griskauskas · Answer 1 · 2021-04-11T04:34:28.397

4

Ran into the same issue following Ben Awad's 14 hour long tutorial on youtube. The problem is that the MeQuery is paused for SSR and therefore the userInfoBody is being setup incorrectly before the client renders it after receiving the user data. Simple fix is to use the same isServer check on the userInfoBody setup:

let userInfoBody = null;
if (isServer() || fetching) {
} ...

edited Apr 11 '21 at 04:34

answered Apr 10 '21 at 19:00

Noah Griskauskas

41
3

Anthony S · Answer 2 · 2021-01-13T00:56:04.577

For anyone attempting to solve this it is from Ben Awad's 14 hour long tutorial on youtube. I'm part way through this project and I'm getting this error myself and I've isolated it to being somewhere along the lines of: there is some inconsistency when rendering from the server and the client involving the NextLink's components.

Commenting out those two link's will fix the error. That's probably not the answer you are looking for but someone else may be able to chime in here. I'll also give this some time over the next few days!

Good luck!

score 0 · Answer 3 · answered Feb 22 '22 at 18:26

0

Instead of if (fetching) { }, add the useRouter hook: const { isReady } = useRouter(); and write if (fetching || !isReady) { }. This is some router issue with next.js

answered Feb 22 '22 at 18:26

Daniel Schwartz

11
1
4

While turining on ssr in Urql clint Im geting the below error: Did not expect server HTML to contain a in

3 Answers3