webpack NextJS部署:TypeError中断获取路由

tv6aics1  于 2023-05-23  发布在  Webpack
关注(0)|答案(1)|浏览(124)

我有一个超级时髦的NextJS 13.4错误,我有麻烦确定的来源。我所知道的总结如下:

  • 仅在**使用npm run buildnpm run start后出现问题,而不是在npm run dev期间出现问题
  • 问题出现在本地和Vercel服务器上
  • 我有一种模糊的预感它和Webpack有关
  • 这个问题破坏了所有客户端的获取路由(换句话说,就是Next 13的全部意义
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)

下面是创建函数的错误,它不是我自己的代码库的一部分,但似乎与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)
        }

似乎基本上没有其他人有这个问题,这是我的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"
  }

到目前为止,我已经尝试过:

  • 升级软件包
  • 部署到不同的环境
  • 使用不同的浏览器

但问题依然存在...而不是漂亮的客户端抓取下一页的应用程序通过一个完整的重新加载每个导航。
编辑:格式化

tcbh2hod

tcbh2hod1#

我有办法!

所以,事实证明我对package.json的看法是正确的。此错误的原因是此项目是使用下一版本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",
 [...]

相关问题