search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
124.41k stars 26.54k forks source link

next/link component not working. #48644

Open ramankarki opened 1 year ago

ramankarki commented 1 year ago

Verify canary release

Provide environment information

Operating System:
    Platform: win32
    Arch: x64
    Version: Windows 10 Home
Binaries:
    Node: 18.15.0
    npm: 9.6.3
    Yarn: 1.22.19
    pnpm: 8.1.0
Relevant packages:
    next: 13.1.6
    eslint-config-next: 13.1.6
    react: 18.2.0
    react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/suspicious-http-586fun?selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A10%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A10%7D%5D&file=%2Fnext.config.js

To Reproduce

I have imported next/link component inside page.tsx provided with href value.

Describe the Bug

Context

Page doesn't navigate on the first click, but I get the following error. Again, when I do the second click, the page navigates to the provided href with a full page reload.

The error

caught TypeError: Cannot read properties of null (reading 'type') at releaseResource (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:12173:20) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28033:17) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27955:9) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28327:9) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28327:9) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27994:9) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27955:9) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28327:9) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28327:9) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28327:9) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28327:9) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28327:9) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27955:9) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27994:9) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27955:9) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27955:9) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27955:9) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27955:9) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27955:9) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28327:9) at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27935:7) at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28151:9) at commitMutationEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27905:3) at commitRootImpl (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31458:5) at commitRoot (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31325:5) at finishConcurrentRender (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30213:9) at performConcurrentWorkOnRoot (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30050:7) at workLoop (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:3897) at flushWork (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:3606) at MessagePort.performWorkUntilDeadline (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:1787)

caught Error: Should not already be working. at performConcurrentWorkOnRoot (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:29943:11) at workLoop (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:3897) at flushWork (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:3606) at MessagePort.performWorkUntilDeadline (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:1787)

Also, page navigation is significantly slow with next 13 on development

Expected Behavior

next/link should have worked as it did with next 12, but it seems to be encountering issues with next 13.

Which browser are you using? (if relevant)

Chrome 112.0.5615.137

How are you deploying your application? (if relevant)

Digital Ocean

joacub commented 1 year ago

Is the lazy compilation next 13 does not compile anything unless you request that page so first load will wait until the page is compiled. I guess this will improve when next13 app did and turbo becomes stable