英文:
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 duringnpm 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 duringnpm 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",
[...]
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论