next.js icon indicating copy to clipboard operation
next.js copied to clipboard
Published 2 weeks ago • verified publisher icon vercel

`npx create-next-app` + `next dev` broken? "Invalid hook call", React console errors

Open ryan-williams opened this issue 3 years ago • 0 comments

Verify canary release

  • [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information


    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:20:05 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T8101
    Binaries:
      Node: 16.3.0
      npm: 7.15.1
      Yarn: 1.22.15
      pnpm: 6.11.0
    Relevant packages:
      next: 13.0.3
      eslint-config-next: 13.0.3
      react: 18.2.0
      react-dom: 18.2.0

warn  - Latest canary version not detected, detected: "13.0.3", newest: "13.0.4-canary.0".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

What browser are you using? (if relevant)

Chrome 107.0.5304.110, Safari 16.0

How are you deploying your application? (if relevant)

next dev

Describe the Bug

npx create-next-app@latest --ts --eslint cna-test
cd cna-test
next dev

Visit http://localhost:3000/, observe empty page + console errors

image

2next-dev.js?3515:20 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
window.console.error @ next-dev.js?3515:20
react.development.js?a25c:1757 Uncaught TypeError: Cannot read properties of null (reading 'useReducer')
    at Object.useReducer (react.development.js?a25c:1757:1)
    at ReactDevOverlay (client.js?4d30:1:6753)
    at renderWithHooks (react-dom.development.js?ac89:16305:1)
    at mountIndeterminateComponent (react-dom.development.js?ac89:20074:1)
    at beginWork (react-dom.development.js?ac89:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4213:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4277:1)
    at beginWork$1 (react-dom.development.js?ac89:27451:1)
    at performUnitOfWork (react-dom.development.js?ac89:26557:1)
    at workLoopSync (react-dom.development.js?ac89:26466:1)
    at renderRootSync (react-dom.development.js?ac89:26434:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25738:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)
useReducer @ react.development.js?a25c:1757
ReactDevOverlay @ client.js?4d30:1
renderWithHooks @ react-dom.development.js?ac89:16305
mountIndeterminateComponent @ react-dom.development.js?ac89:20074
beginWork @ react-dom.development.js?ac89:21587
callCallback @ react-dom.development.js?ac89:4164
invokeGuardedCallbackDev @ react-dom.development.js?ac89:4213
invokeGuardedCallback @ react-dom.development.js?ac89:4277
beginWork$1 @ react-dom.development.js?ac89:27451
performUnitOfWork @ react-dom.development.js?ac89:26557
workLoopSync @ react-dom.development.js?ac89:26466
renderRootSync @ react-dom.development.js?ac89:26434
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25738
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
next-dev.js?3515:20 Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>. 

See more info here: https://nextjs.org/docs/messages/react-hydration-error
window.console.error @ next-dev.js?3515:20
2next-dev.js?3515:20 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
window.console.error @ next-dev.js?3515:20
react.development.js?a25c:1757 Uncaught TypeError: Cannot read properties of null (reading 'useReducer')
    at Object.useReducer (react.development.js?a25c:1757:1)
    at ReactDevOverlay (client.js?4d30:1:6753)
    at renderWithHooks (react-dom.development.js?ac89:16305:1)
    at mountIndeterminateComponent (react-dom.development.js?ac89:20074:1)
    at beginWork (react-dom.development.js?ac89:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4213:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4277:1)
    at beginWork$1 (react-dom.development.js?ac89:27451:1)
    at performUnitOfWork (react-dom.development.js?ac89:26557:1)
    at workLoopSync (react-dom.development.js?ac89:26466:1)
    at renderRootSync (react-dom.development.js?ac89:26434:1)
    at recoverFromConcurrentError (react-dom.development.js?ac89:25850:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25750:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)
useReducer @ react.development.js?a25c:1757
ReactDevOverlay @ client.js?4d30:1
renderWithHooks @ react-dom.development.js?ac89:16305
mountIndeterminateComponent @ react-dom.development.js?ac89:20074
beginWork @ react-dom.development.js?ac89:21587
callCallback @ react-dom.development.js?ac89:4164
invokeGuardedCallbackDev @ react-dom.development.js?ac89:4213
invokeGuardedCallback @ react-dom.development.js?ac89:4277
beginWork$1 @ react-dom.development.js?ac89:27451
performUnitOfWork @ react-dom.development.js?ac89:26557
workLoopSync @ react-dom.development.js?ac89:26466
renderRootSync @ react-dom.development.js?ac89:26434
recoverFromConcurrentError @ react-dom.development.js?ac89:25850
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25750
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
next-dev.js?3515:20 The above error occurred in the <ReactDevOverlay> component:

    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:6707)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:60:1)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:173:11)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:346:11)

React will try to recreate this component tree from scratch using the error boundary you provided, Container.
window.console.error @ next-dev.js?3515:20
next-dev.js?3515:20 Warning: Container: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:60:1)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:173:11)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:346:11)
window.console.error @ next-dev.js?3515:20
react-dom.development.js?ac89:19849 Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
    at updateHostRoot (react-dom.development.js?ac89:19849:1)
    at beginWork (react-dom.development.js?ac89:21615:1)
    at beginWork$1 (react-dom.development.js?ac89:27426:1)
    at performUnitOfWork (react-dom.development.js?ac89:26557:1)
    at workLoopSync (react-dom.development.js?ac89:26466:1)
    at renderRootSync (react-dom.development.js?ac89:26434:1)
    at recoverFromConcurrentError (react-dom.development.js?ac89:25850:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25750:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)
updateHostRoot @ react-dom.development.js?ac89:19849
beginWork @ react-dom.development.js?ac89:21615
beginWork$1 @ react-dom.development.js?ac89:27426
performUnitOfWork @ react-dom.development.js?ac89:26557
workLoopSync @ react-dom.development.js?ac89:26466
renderRootSync @ react-dom.development.js?ac89:26434
recoverFromConcurrentError @ react-dom.development.js?ac89:25850
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25750
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
2next-dev.js?3515:20 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
window.console.error @ next-dev.js?3515:20
react.development.js?a25c:1757 Uncaught TypeError: Cannot read properties of null (reading 'useReducer')
    at Object.useReducer (react.development.js?a25c:1757:1)
    at ReactDevOverlay (client.js?4d30:1:6753)
    at renderWithHooks (react-dom.development.js?ac89:16305:1)
    at mountIndeterminateComponent (react-dom.development.js?ac89:20074:1)
    at beginWork (react-dom.development.js?ac89:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4213:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4277:1)
    at beginWork$1 (react-dom.development.js?ac89:27451:1)
    at performUnitOfWork (react-dom.development.js?ac89:26557:1)
    at workLoopConcurrent (react-dom.development.js?ac89:26543:1)
    at renderRootConcurrent (react-dom.development.js?ac89:26505:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25738:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)
useReducer @ react.development.js?a25c:1757
ReactDevOverlay @ client.js?4d30:1
renderWithHooks @ react-dom.development.js?ac89:16305
mountIndeterminateComponent @ react-dom.development.js?ac89:20074
beginWork @ react-dom.development.js?ac89:21587
callCallback @ react-dom.development.js?ac89:4164
invokeGuardedCallbackDev @ react-dom.development.js?ac89:4213
invokeGuardedCallback @ react-dom.development.js?ac89:4277
beginWork$1 @ react-dom.development.js?ac89:27451
performUnitOfWork @ react-dom.development.js?ac89:26557
workLoopConcurrent @ react-dom.development.js?ac89:26543
renderRootConcurrent @ react-dom.development.js?ac89:26505
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25738
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
2next-dev.js?3515:20 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
window.console.error @ next-dev.js?3515:20
react.development.js?a25c:1757 Uncaught TypeError: Cannot read properties of null (reading 'useReducer')
    at Object.useReducer (react.development.js?a25c:1757:1)
    at ReactDevOverlay (client.js?4d30:1:6753)
    at renderWithHooks (react-dom.development.js?ac89:16305:1)
    at mountIndeterminateComponent (react-dom.development.js?ac89:20074:1)
    at beginWork (react-dom.development.js?ac89:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4213:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4277:1)
    at beginWork$1 (react-dom.development.js?ac89:27451:1)
    at performUnitOfWork (react-dom.development.js?ac89:26557:1)
    at workLoopSync (react-dom.development.js?ac89:26466:1)
    at renderRootSync (react-dom.development.js?ac89:26434:1)
    at recoverFromConcurrentError (react-dom.development.js?ac89:25850:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25750:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)
useReducer @ react.development.js?a25c:1757
ReactDevOverlay @ client.js?4d30:1
renderWithHooks @ react-dom.development.js?ac89:16305
mountIndeterminateComponent @ react-dom.development.js?ac89:20074
beginWork @ react-dom.development.js?ac89:21587
callCallback @ react-dom.development.js?ac89:4164
invokeGuardedCallbackDev @ react-dom.development.js?ac89:4213
invokeGuardedCallback @ react-dom.development.js?ac89:4277
beginWork$1 @ react-dom.development.js?ac89:27451
performUnitOfWork @ react-dom.development.js?ac89:26557
workLoopSync @ react-dom.development.js?ac89:26466
renderRootSync @ react-dom.development.js?ac89:26434
recoverFromConcurrentError @ react-dom.development.js?ac89:25850
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25750
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
next-dev.js?3515:20 The above error occurred in the <ReactDevOverlay> component:

    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:6707)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:60:1)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:173:11)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:346:11)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
window.console.error @ next-dev.js?3515:20
react-dom.development.js?ac89:26923 Uncaught TypeError: Cannot read properties of null (reading 'useReducer')
    at Object.useReducer (react.development.js?a25c:1757:1)
    at ReactDevOverlay (client.js?4d30:1:6753)
    at renderWithHooks (react-dom.development.js?ac89:16305:1)
    at mountIndeterminateComponent (react-dom.development.js?ac89:20074:1)
    at beginWork (react-dom.development.js?ac89:21587:1)
    at beginWork$1 (react-dom.development.js?ac89:27426:1)
    at performUnitOfWork (react-dom.development.js?ac89:26557:1)
    at workLoopSync (react-dom.development.js?ac89:26466:1)
    at renderRootSync (react-dom.development.js?ac89:26434:1)
    at recoverFromConcurrentError (react-dom.development.js?ac89:25850:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25750:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)
useReducer @ react.development.js?a25c:1757
ReactDevOverlay @ client.js?4d30:1
renderWithHooks @ react-dom.development.js?ac89:16305
mountIndeterminateComponent @ react-dom.development.js?ac89:20074
beginWork @ react-dom.development.js?ac89:21587
beginWork$1 @ react-dom.development.js?ac89:27426
performUnitOfWork @ react-dom.development.js?ac89:26557
workLoopSync @ react-dom.development.js?ac89:26466
renderRootSync @ react-dom.development.js?ac89:26434
recoverFromConcurrentError @ react-dom.development.js?ac89:25850
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25750
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
index.js?46cb:404 Uncaught (in promise) Error: Cancel rendering route
    at lastRenderReject (index.js?46cb:404:27)
    at eval (index.js?46cb:395:13)
    at new Promise (<anonymous>)
    at doRender (index.js?46cb:393:27)
    at renderError (index.js?46cb:237:16)
    at Object.fn (index.js?46cb:195:13)
    at Container.componentDidCatch (index.js?46cb:57:20)
    at Container.callback (react-dom.development.js?ac89:18768:1)
    at callCallback (react-dom.development.js?ac89:13923:1)
    at commitUpdateQueue (react-dom.development.js?ac89:13944:1)
    at commitLayoutEffectOnFiber (react-dom.development.js?ac89:23364:1)
    at commitLayoutMountEffects_complete (react-dom.development.js?ac89:24688:1)
    at commitLayoutEffects_begin (react-dom.development.js?ac89:24674:1)
    at commitLayoutEffects (react-dom.development.js?ac89:24612:1)
    at commitRootImpl (react-dom.development.js?ac89:26823:1)
    at commitRoot (react-dom.development.js?ac89:26682:1)
    at finishConcurrentRender (react-dom.development.js?ac89:25892:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25809:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)
lastRenderReject @ index.js?46cb:404
eval @ index.js?46cb:395
doRender @ index.js?46cb:393
renderError @ index.js?46cb:237
fn @ index.js?46cb:195
componentDidCatch @ index.js?46cb:57
callback @ react-dom.development.js?ac89:18768
callCallback @ react-dom.development.js?ac89:13923
commitUpdateQueue @ react-dom.development.js?ac89:13944
commitLayoutEffectOnFiber @ react-dom.development.js?ac89:23364
commitLayoutMountEffects_complete @ react-dom.development.js?ac89:24688
commitLayoutEffects_begin @ react-dom.development.js?ac89:24674
commitLayoutEffects @ react-dom.development.js?ac89:24612
commitRootImpl @ react-dom.development.js?ac89:26823
commitRoot @ react-dom.development.js?ac89:26682
finishConcurrentRender @ react-dom.development.js?ac89:25892
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25809
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
Promise.then (async)
asyncGeneratorStep @ _async_to_generator.js?0e30:32
_next @ _async_to_generator.js?0e30:12
eval @ _async_to_generator.js?0e30:17
eval @ _async_to_generator.js?0e30:9
_render @ index.js?46cb:525
render @ index.js?46cb:498
eval @ index.js?46cb:639
asyncGeneratorStep @ _async_to_generator.js?0e30:23
_next @ _async_to_generator.js?0e30:12
Promise.then (async)
asyncGeneratorStep @ _async_to_generator.js?0e30:32
_next @ _async_to_generator.js?0e30:12
Promise.then (async)
asyncGeneratorStep @ _async_to_generator.js?0e30:32
_next @ _async_to_generator.js?0e30:12
Promise.then (async)
asyncGeneratorStep @ _async_to_generator.js?0e30:32
_next @ _async_to_generator.js?0e30:12
Promise.then (async)
asyncGeneratorStep @ _async_to_generator.js?0e30:32
_next @ _async_to_generator.js?0e30:12
eval @ _async_to_generator.js?0e30:17
eval @ _async_to_generator.js?0e30:9
_hydrate @ index.js?46cb:641
hydrate @ index.js?46cb:528
eval @ next-dev.js?3515:40
Promise.then (async)
eval @ next-dev.js?3515:35
./node_modules/next/dist/client/next-dev.js @ main.js?ts=1668447279944:236
options.factory @ webpack.js?ts=1668447279944:661
__webpack_require__ @ webpack.js?ts=1668447279944:37
__webpack_exec__ @ main.js?ts=1668447279944:1103
(anonymous) @ main.js?ts=1668447279944:1104
webpackJsonpCallback @ webpack.js?ts=1668447279944:1209
(anonymous) @ main.js?ts=1668447279944:9
DevTools failed to load source map: Could not load content for chrome-extension://epcnnfbjfcgphgdmggkamkmgojdagdnn/ewe-content.js.map: System error: net::ERR_BLOCKED_BY_CLIENT

next build && next start works

next export (after next build) gives a (likely unrelated) error, and exits 1:

info  - using build directory: /Users/ryan/cna-test/.next
info  - Copying "static build" directory
info  - No "exportPathMap" found in "/Users/ryan/cna-test/next.config.js". Generating map from "./pages"
Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
  Possible solutions:
    - Use `next start` to run a server, which includes the Image Optimization API.
    - Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.
  Read more: https://nextjs.org/docs/messages/export-image-api
    at /Users/ryan/cna-test/node_modules/next/dist/export/index.js:152:23
    at async Span.traceAsyncFn (/Users/ryan/cna-test/node_modules/next/dist/trace/trace.js:79:20)

Expected Behavior

http://localhost:3000/ should load without errors, and render content

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/ryan-williams/create-next-app-bug

To Reproduce

npx create-next-app@latest --ts --eslint cna-test
cd cna-test
next dev
package.json 
{
  "name": "cna-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.8",
    "eslint": "8.27.0",
    "eslint-config-next": "13.0.3",
    "next": "13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.8.4"
  }
}

package-lock.json is too big to inline here, here it is.

ryan-williams avatar Nov 14 '22 17:11 ryan-williams