search

TanStack / query

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://tanstack.com/query
MIT License
42.44k stars 2.9k forks source link

Error Coming from ReactQueryDevTools: "Warning: Prop `style` did not match." #1774

Closed gchartier closed 3 years ago

gchartier commented 3 years ago

Bug Description: After upgrading to React Query 3 with built in dev tools, I am getting an error in my browser console every time I hard refresh my application. I tried removing the component from my _app.js file and the error was no longer showing. The error is showing in every browser I tried. I am using Next.js for what it's worth.

Here's the error I am getting: Screen Shot 2021-02-10 at 10 02 46 AM

And here's the stack trace below the error: Screen Shot 2021-02-10 at 10 03 29 AM

Here's my _app.js:

import { ReactQueryDevtools } from "react-query/devtools"
import { QueryClient, QueryClientProvider } from "react-query"

const queryClient = new QueryClient()

export default function App({ Component, pageProps }) {
    return (
        <QueryClientProvider client={queryClient}>
            <Component {...pageProps} />
            <ReactQueryDevtools initialIsOpen />
        </QueryClientProvider>
    )
}

Versions:

wesbos commented 3 years ago

Just went down this rabbit hole as well.

For me its a bit different:

Warning: Prop `style` did not match. 
Server: "display:flex;border-bottom:solid 1px #222e3e;cursor:pointer"
Client:  "display:flex;border-bottom:solid 1px #222e3e;cursor:pointer;background:rgba(255,255,255,.1)"

Seems the background is being added on on in the client?

TkDodo commented 3 years ago

hmm, we had an issue like that recently: https://github.com/tannerlinsley/react-query/issues/1543

and it was fixed here: https://github.com/tannerlinsley/react-query/pull/1613

which was released in 3.5.14. The issue states you are on 3.5.11 - can you try upgrading please?

gchartier commented 3 years ago

Updating from 3.5.11 to 3.5.14 resolved the issue for me. Thanks!

UNLRN commented 3 years ago

@TkDodo Hmm. Was there a regression with this? I'm still experiencing this issue. Just tried upgrading from 2.4.7 to 3.8.3. Our _app.js is a little more complicated but the provider is still at the the top of the tree. looks like the first style is the only difference.

Warning: Prop `style` did not match.
Server: "display:inline-block;font-size:.9em;font-family:sans-serif;font-weight:normal;line-height:1.3;padding:.3em 1.5em .3em .5em;height:auto;border:0;border-radius:.2em;appearance:none;-webkit-appearance:none;background-color:#fff;background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\");background-repeat:no-repeat;background-position:right .55em center;background-size:.65em auto, 100%;color:#000;flex:1;min-width:75px;margin-right:.5rem"
Client: "display:none;font-size:.9em;font-family:sans-serif;font-weight:normal;line-height:1.3;padding:.3em 1.5em .3em .5em;height:auto;border:0;border-radius:.2em;appearance:none;-webkit-appearance:none;background-color:#fff;background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\");background-repeat:no-repeat;background-position:right .55em center;background-size:.65em auto, 100%;color:#000;flex:1;min-width:75px;margin-right:.5rem"

edit: adding sandbox link. forked from the nextjs example repo for styled-components. page doesn't render with devtools active, comment it out and it will show the page content properly https://codesandbox.io/s/stoic-kapitsa-wz1nb?file=/pages/_app.js

jasonadkison commented 3 years ago

@TkDodo Hmm. Was there a regression with this? I'm still experiencing this issue. Just tried upgrading from 2.4.7 to 3.8.3. Our _app.js is a little more complicated but the provider is still at the the top of the tree. looks like the first style is the only difference.

Warning: Prop `style` did not match.
Server: "display:inline-block;font-size:.9em;font-family:sans-serif;font-weight:normal;line-height:1.3;padding:.3em 1.5em .3em .5em;height:auto;border:0;border-radius:.2em;appearance:none;-webkit-appearance:none;background-color:#fff;background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\");background-repeat:no-repeat;background-position:right .55em center;background-size:.65em auto, 100%;color:#000;flex:1;min-width:75px;margin-right:.5rem"
Client: "display:none;font-size:.9em;font-family:sans-serif;font-weight:normal;line-height:1.3;padding:.3em 1.5em .3em .5em;height:auto;border:0;border-radius:.2em;appearance:none;-webkit-appearance:none;background-color:#fff;background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\");background-repeat:no-repeat;background-position:right .55em center;background-size:.65em auto, 100%;color:#000;flex:1;min-width:75px;margin-right:.5rem"

edit: adding sandbox link. forked from the nextjs example repo for styled-components. page doesn't render with devtools active, comment it out and it will show the page content properly https://codesandbox.io/s/stoic-kapitsa-wz1nb?file=/pages/_app.js

@UNLRN You're not supposed to be nesting anything in <ReactQueryDevTools />. Do it like this instead:

<QueryClientProvider client={client}>
  <GlobalStyle />
  <ThemeProvider theme={theme}>
    <Component {...pageProps} />
  </ThemeProvider>
  <ReactQueryDevtools />
</QueryClientProvider>

I'm also seeing the hydration warning when using ReactQueryDevtools (react-query version 3.6.0) in a Next.js application:

Warning: Prop `style` did not match. Server: "display:inline-block;font-size:.9em;font-family:sans-serif;font-weight:normal;line-height:1.3;padding:.3em 1.5em .3em .5em;height:auto;border:0;border-radius:.2em;appearance:none;-webkit-appearance:none;background-color:#fff;background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\");background-repeat:no-repeat;background-position:right .55em center;background-size:.65em auto, 100%;color:#000;flex:1;min-width:75px;margin-right:.5rem" Client: "display:none;font-size:.9em;font-family:sans-serif;font-weight:normal;line-height:1.3;padding:.3em 1.5em .3em .5em;height:auto;border:0;border-radius:.2em;appearance:none;-webkit-appearance:none;background-color:#fff;background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\");background-repeat:no-repeat;background-position:right .55em center;background-size:.65em auto, 100%;color:#000;flex:1;min-width:75px;margin-right:.5rem"
    at select
    at eval (webpack-internal:///./node_modules/react-query/es/devtools/utils.js:36:22)
    at div
    at div
    at div
    at div
    at div
    at eval (webpack-internal:///./node_modules/react-query/es/devtools/utils.js:36:22)
    at ThemeProvider (webpack-internal:///./node_modules/react-query/es/devtools/theme.js:14:20)
    at ReactQueryDevtoolsPanel (webpack-internal:///./node_modules/react-query/es/devtools/devtools.js:261:25)
    at ThemeProvider (webpack-internal:///./node_modules/react-query/es/devtools/theme.js:14:20)
    at footer
    at ReactQueryDevtools (webpack-internal:///./node_modules/react-query/es/devtools/devtools.js:44:28)
    at QueryClientProvider (webpack-internal:///./node_modules/react-query/es/react/QueryClientProvider.js:36:22)
    at ErrorBoundary (webpack-internal:///./node_modules/react-storefront/ErrorBoundary.js:47:37)
    at LinkContextProvider (webpack-internal:///./node_modules/react-storefront/link/LinkContextProvider.js:22:23)
    at PWA (webpack-internal:///./node_modules/react-storefront/PWA.js:55:23)
    at MyApp (webpack-internal:///./pages/_app.js:85: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)

For anyone else having this same warning - for me it only occurs after a full page reload AND if the screen width is less than 500px. I believe this is the cause: https://github.com/tannerlinsley/react-query/blob/master/src/devtools/styledComponents.ts#L103

verekia commented 3 years ago

I'm also getting the warning on a full page reload on mobile on 3.21.0. This issue should be re-opened :)

TkDodo commented 3 years ago

hmm, I thought we fixed this, but maybe we re-introduced it at some point? I'd be happy if someone with more experience in SSR than me would take a look at it. Is there maybe a way to write a test that checks that this warning does not happen?

TkDodo commented 3 years ago

or maybe we could just not render the devtools at all on the server? Or would that not get rid of the warning?

verekia commented 3 years ago

Not rendering it at all on the server would get rid of warning. Is there a particular reason it's rendered on the server?

TkDodo commented 3 years ago

Not rendering it at all on the server would get rid of warning. Is there a particular reason it's rendered on the server?

no I don’t think so (judging from this comment: https://github.com/tannerlinsley/react-query/issues/1543#issuecomment-757366895)

would you like to PR that? We could then also get rid of a bunch of suppressHydrationWarning flags in the devtools…

verekia commented 3 years ago

Alright, I'll give it a shot :)

verekia commented 3 years ago

This issue can be closed đź‘Ť Fixed in 3.21.1.

horizonvert1027 commented 1 year ago

I can see the error still now. I am using next.js version { "next": "13.1.6", "react": "18.2.0", } and when I use this image tag like <img src="/images/backgrounds/login-bg.svg" alt="bg" style={{ width: "100%", maxWidth: "500px", }} />. this is the error. next-dev.js:20 Warning: Prop style did not match. Server: "color: transparent; visibility: visible;" Client: "color:transparent" at img at eval (webpack-internal:///./node_modules/next/dist/client/image.js:208:11) at eval (webpack-internal:///./node_modules/next/dist/client/image.js:300:11) at div at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:57:66) at Box (webpack-internal:///./node_modules/@mui/system/esm/createBox.js:34:72) at div at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:57:66) at Box (webpack-internal:///./node_modules/@mui/system/esm/createBox.js:34:72) at div at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:57:66) at Grid (webpack-internal:///./node_modules/@mui/material/Grid/Grid.js:390:87) at div at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:57:66) at Grid (webpack-internal:///./node_modules/@mui/material/Grid/Grid.js:390:87) at Register at div at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:57:66) at Box (webpack-internal:///./node_modules/@mui/system/esm/createBox.js:34:72) at BlankLayout (webpack-internal:///./src/layouts/blank/BlankLayout.tsx:7:11) at RTL (webpack-internal:///./src/layouts/full/shared/customizer/RTL.tsx:26:13) at InnerThemeProvider (webpack-internal:///./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:21:70) at ThemeProvider (webpack-internal:///./node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:43:5) at ThemeProvider (webpack-internal:///./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:40:5) at MyApp (webpack-internal:///./pages/_app.tsx:50:13) at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:13:3) at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11) at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:301:63) at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:850:919) at Container (webpack-internal:///./node_modules/next/dist/client/index.js:62:1) at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:172:11) at Root (webpack-internal:///./node_modules/next/dist/client/index.js:347:11)

See more info here: https://nextjs.org/docs/messages/react-hydration-error

TopGuru777 commented 5 months ago

I see the same error on @tankstack/react-query-devtools v5.40.0 on Next.js 14 AppRouter. Happens on <Image /> component. image

cyb3rsalih commented 3 months ago

I got same issue when implement NextUI in my project. I tried to wrap my app with NextUIProvider

  return (
    <html lang="en">
      <body>
        <NextUIProvider>
          <Navbar />
          <main className="relative overflow-hidden" >
            {children}
          </main>
          <Footer />
        </NextUIProvider>
      </body>
    </html>

  );

Hope someone find a solution 🤲