NextJS部署:TypeError破坏了fetch-routing

huangapple go评论79阅读模式
英文:

NextJS Deployment: TypeError breaks fetch-routing

问题

I'm having trouble identifying the source of a super funky NextJS 13.4 Error. What I know is:

  • The issue only appears after using npm run build & npm run start, not during npm run dev.
  • The problem occurs both locally and on Vercel servers.
  • It may be related to Webpack.
  • The error breaks client-side fetch routing.

Here's the error-creating function related to Next/navigation:

function Q() {
    // ... (code snippet)
}

It seems to be a unique issue. Here's your package.json for reference:

// ... (package.json content)

You've already tried upgrading packages, deploying to different environments, and using different browsers, but the problem persists. Instead of client-side fetching, the application performs a full reload on every navigation.

英文:

I'm having a super funky NextJS 13.4 Error that I'm having trouble identifying the source of. What I know is summarised below:

  • The problem appears only after using npm run build & npm run start, not during npm run dev
  • The problem appears both locally and on Vercel servers
  • I have a vague hunch it's related to Webpack
  • The problem breaks all client-side fetch routing (in other words, the whole point of Next13
TypeError: Cannot read properties of null (reading 'textContent')
    at Object.<anonymous> (main-4f563ee09e593a2f.js:1:8408)
    at Generator.next (<anonymous>)
    at n (17-bbe337a8760cd758.js:1:134)
    at u (17-bbe337a8760cd758.js:1:331)
    at 17-bbe337a8760cd758.js:1:390
    at new Promise (<anonymous>)
    at Object.<anonymous> (17-bbe337a8760cd758.js:1:272)
    at Object.Q (main-4f563ee09e593a2f.js:1:9011)
    at t.initialize (main-4f563ee09e593a2f.js:1:7055)
    at 8577 (main-4f563ee09e593a2f.js:1:15791)

Here's the error creating function, which is not a part of my own codebase, but seems to be related to Next/navigation:

 function Q() {
            return (Q = g(function*() {
                arguments.length > 0 && void 0 !== arguments[0] && arguments[0],
                a = JSON.parse(document.getElementById("__NEXT_DATA__").textContent),
                window.__NEXT_DATA__ = a,
                h = a.defaultLocale;
                let e = a.assetPrefix || "";
                if (n.p = "".concat(e, "/_next/"),
                x.setConfig({
                    serverRuntimeConfig: {},
                    publicRuntimeConfig: a.runtimeConfig || {}
                }),
                l = N.getURL(),
                D.hasBasePath(l) && (l = I.removeBasePath(l)),
                a.scriptLoader) {
                    let {initScriptLoader: e} = n(6507);
                    e(a.scriptLoader)
                }
                o = new O.default(a.buildId,e);
                let t = e=>{
                    let[t,n] = e;
                    return o.routeLoader.onEntrypoint(t, n)
                }
                ;
                return window.__NEXT_P && window.__NEXT_P.map(e=>setTimeout(()=>t(e), 0)),
                window.__NEXT_P = [],
                window.__NEXT_P.push = t,
                (u = R.default()).getIsSsr = ()=>r.isSsr,
                i = document.getElementById("__next"),
                {
                    assetPrefix: e
                }
            })).apply(this, arguments)
        }

There seems to be basically no one else having this issue, here's my package json:


"scripts": {
    "dev": "next dev",
    "build": "next build",
    "fetch-img": "node scripts/downloadImages.js",
    "export": "next export",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@contentful/rich-text-html-renderer": "^16.0.2",
    "@contentful/rich-text-react-renderer": "^15.16.2",
    "@contentful/rich-text-types": "^16.0.3",
    "@next/font": "13.1.6",
    "@stripe/stripe-js": "^1.52.1",
    "axios": "^1.3.3",
    "contentful": "^9.3.3",
    "encoding": "^0.1.13",
    "eslint": "8.34.0",
    "eslint-config-next": "13.1.6",
    "firebase": "^9.17.1",
    "next": "13.1.6",
    "react": "18.2.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "18.2.0",
    "react-firebase-hooks": "^5.1.1",
    "sass": "^1.58.3",
    "stripe": "^12.4.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.23",
    "tailwindcss": "^3.3.2",
    "webpack": "^5.83.1",
    "webpack-cli": "^5.1.1"
  }

So far I've tried:

  • Upgrading packages
  • Deploying to different environnments
  • Using different browsers

But the problem persists... Instead of pretty client-side fetching of the next page the application goes through a full reload on every navigation.

Edit: Formatting

答案1

得分: 1

我有解决方案!

原来我对 package.json 有点了解。这个错误的原因是项目是用 Next 版本 13.1 创建的,而这个问题在当前版本中已解决。对于未来遇到此问题的任何人:只需将 Next.JS 升级到最新版本。

以下是我新 package.json 的摘录:

[...]
    "encoding": "^0.1.13",
    "eslint": "8.34.0",
    "eslint-config-next": "13.1.6",
    "firebase": "^9.17.1",
    "next": "^13.4.3",
    "react": "18.2.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "18.2.0",
 [...]
英文:

I have a solution!

So, it turns out I was somewhat right about the package.json. The reason for this error was that this project was created with next version 13.1 and this issue was solved in the current version. For anyone in the future encountering this problem: Simply upgrade Next.JS Specifically to the latest version.

Here's an excerpt from my new package.json

[...]
    "encoding": "^0.1.13",
    "eslint": "8.34.0",
    "eslint-config-next": "13.1.6",
    "firebase": "^9.17.1",
    "next": "^13.4.3",
    "react": "18.2.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "18.2.0",
 [...]

huangapple
  • 本文由 发表于 2023年5月22日 16:10:31
  • 转载请务必保留本文链接:https://go.coder-hub.com/76304189.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定