0

I am getting this error in Nextjs it persists until I remove the 'use client' directive.

Warning: Rendering <Context.Consumer.Consumer> is not supported and will be removed in a future major release. Did you mean to render <Context.Consumer> instead?
    at Leader (webpack-internal:///(app-client)/./src/components/leader/Leader.tsx:21:11)
    at main
    at InnerLayoutRouter (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/layout-router.js:227:11)
    at RedirectErrorBoundary (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundBoundary (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/not-found-boundary.js:59:11)
    at LoadingBoundary (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/layout-router.js:324:11)
    at ErrorBoundary (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/error-boundary.js:102:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/layout-router.js:139:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/layout-router.js:213:11)
    at RenderFromTemplateContext (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at OuterLayoutRouter (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/layout-router.js:334:11)
    at InnerLayoutRouter (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/layout-router.js:227:11)
    at RedirectErrorBoundary (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundBoundary (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/not-found-boundary.js:59:11)
    at LoadingBoundary (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/layout-router.js:324:11)
    at ErrorBoundary (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/error-boundary.js:102:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/layout-router.js:139:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/layout-router.js:213:11)
    at RenderFromTemplateContext (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at OuterLayoutRouter (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/layout-router.js:334:11)
    at body
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at ReactDevOverlay (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:70:9)
    at NotFoundErrorBoundary (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/not-found-boundary.js:51:9)
    at NotFoundBoundary (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/not-found-boundary.js:59:11)
    at HotReload (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:318:11)
    at Router (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/app-router.js:150:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/error-boundary.js:77:9)
    at ErrorBoundary (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/error-boundary.js:102:11)
    at AppRouter (webpack-internal:///(app-client)/../../node_modules/next/dist/client/components/app-router.js:396:13)
    at ServerRoot (webpack-internal:///(app-client)/../../node_modules/next/dist/client/app-index.js:162:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/../../node_modules/next/dist/client/app-index.js:178:11)

I've tried to reproduce this error with another 'use client' bare component, and it seems to occur only in this one, there is some logic, the thing is that it stays until I remove everything related to client-side react like hooks and then 'use client' directive. Even if I remove everything all the logic and all the markup it stays until I remove the use client or all the Jsx and return null from it. Is it me that I have done something wrong or is it Next? Stack trace seems to be in the Next only.

Thanks

seven
  • 1,183
  • 14
  • 33

1 Answers1

0

If anyone encountered this issue then the problem was caused by the Console Ninja VSCode plugin. As for the context and answering @khewdev question I did not use the React Context here or anywhere else in the application. I figured it out because the plugin was printing logs in the return statement of the component even though I did not put any console logs there and after disabling it and reloading VSCode the console was clean.

seven
  • 1,183
  • 14
  • 33