Next.js服务端出现TypeError: process.versions.node is undefined问题求助

场景复现 #

我有一个Next.js动态路由页面[username].jsx，页面的getServerSideProps通过Auth0的withPageAuthRequired做身份验证，同时获取context.query和Supabase中的数据，代码如下：

export const getServerSideProps = withPageAuthRequired({
  async getServerSideProps(context) {
    // const session = getSession(context.req, context.res);
    const username = context.query.username;
    console.log(username);
    const { data, error } = await supabase
      .from("Users")
      .select()
      .eq("username", username);

    if (error || data.length == 0) {
      console.log(data);
      return {
        notFound: true,
      };
    }
    console.log(data);
    return {
      props: data[0],
    };
  },
});

执行目录级和全局npm更新（命令：npm update --legacy-peer-deps）后，服务端运行时出现以下错误，完整调用栈如下：

Call Stack
<unknown>
node_modules/oidc-token-hash/lib/shake256.js (3:23)
./node_modules/oidc-token-hash/lib/shake256.js
file:/Users/vidit/GitHubProjects/squawk-components/.next/static/chunks/pages/user/%5Busername%5D.js (958:1)
options.factory
/_next/static/chunks/webpack.js (691:31)
__webpack_require__
file:/Users/vidit/GitHubProjects/squawk-components/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (346:21)
<unknown>
node_modules/oidc-token-hash/lib/index.js (5:25)
./node_modules/oidc-token-hash/lib/index.js
file:/Users/vidit/GitHubProjects/squawk-components/.next/static/chunks/pages/user/%5Busername%5D.js (948:1)
options.factory
/_next/static/chunks/webpack.js (691:31)
__webpack_require__
file:/Users/vidit/GitHubProjects/squawk-components/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (346:21)
<unknown>
node_modules/openid-client/lib/client.js (9:26)
./node_modules/openid-client/lib/client.js
file:/Users/vidit/GitHubProjects/squawk-components/.next/static/chunks/pages/user/%5Busername%5D.js (968:1)
options.factory
/_next/static/chunks/webpack.js (691:31)
__webpack_require__
file:/Users/vidit/GitHubProjects/squawk-components/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (346:21)
<unknown>
node_modules/openid-client/lib/issuer.js (5:26)
./node_modules/openid-client/lib/issuer.js
file:/Users/vidit/GitHubProjects/squawk-components/.next/static/chunks/pages/user/%5Busername%5D.js (1208:1)
options.factory
/_next/static/chunks/webpack.js (691:31)
__webpack_require__
file:/Users/vidit/GitHubProjects/squawk-components/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (346:21)
<unknown>
node_modules/openid-client/lib/index.js (1:23)
./node_modules/openid-client/lib/index.js
file:/Users/vidit/GitHubProjects/squawk-components/.next/static/chunks/pages/user/%5Busername%5D.js (1198:1)
options.factory
/_next/static/chunks/webpack.js (691:31)
__webpack_require__
file:/Users/vidit/GitHubProjects/squawk-components/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (346:21)
<unknown>
node_modules/@auth0/nextjs-auth0/dist/auth0-session/transient-store.js (4:30)
./node_modules/@auth0/nextjs-auth0/dist/auth0-session/transient-store.js
file:/Users/vidit/GitHubProjects/squawk-components/.next/static/chunks/pages/user/%5Busername%5D.js (128:1)
options.factory
/_next/static/chunks/webpack.js (691:31)
__webpack_require__
file:/Users/vidit/GitHubProjects/squawk-components/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (346:21)
<unknown>
node_modules/@auth0/nextjs-auth0/dist/auth0-session/index.js (21:32)
./node_modules/@auth0/nextjs-auth0/dist/auth0-session/index.js
file:/Users/vidit/GitHubProjects/squawk-components/.next/static/chunks/pages/user/%5Busername%5D.js (84:1)
options.factory
/_next/static/chunks/webpack.js (691:31)
__webpack_require__
file:/Users/vidit/GitHubProjects/squawk-components/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (346:21)
<unknown>
node_modules/@auth0/nextjs-auth0/dist/index.js (6:30)
./node_modules/@auth0/nextjs-auth0/dist/index.js
file:/Users/vidit/GitHubProjects/squawk-components/.next/static/chunks/pages/user/%5Busername%5D.js (315:1)
options.factory
/_next/static/chunks/webpack.js (691:31)
__webpack_require__
file:/Users/vidit/GitHubProjects/squawk-components/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (346:21)
<unknown>
webpack-internal:///./src/pages/user/[username].jsx (22:96)
./src/pages/user/[username].jsx
file:/Users/vidit/GitHubProjects/squawk-components/.next/static/chunks/pages/user/%5Busername%5D.js (768:1)
options.factory
/_next/static/chunks/webpack.js (691:31)
__webpack_require__
file:/Users/vidit/GitHubProjects/squawk-components/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (346:21)
<unknown>
node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=%2FUsers%2Fvidit%2FGitHubProjects%2Fsquawk-components%2Fsrc%2Fpages%2Fuser%2F%5Busername%5D.jsx&page=%2Fuser%2F%5Busername%5D! (5:15)
execute
node_modules/next/dist/client/route-loader.js (211:50)

错误原因 #

从调用栈可以看出，错误源于oidc-token-hash库在客户端代码中尝试访问Node.js环境特有的process.versions.node变量——浏览器环境中不存在这个变量，因此抛出错误。

本质问题是：原本应该只在服务端运行的Auth0相关代码（包括withPageAuthRequired）被Webpack打包到了客户端chunk中。这通常是依赖版本不兼容、Webpack配置异常，或是代码导入方式错误导致的。

解决办法 #

1. 校验Auth0依赖版本兼容性 #

• 确认@auth0/nextjs-auth0版本与你的Next.js版本匹配：Next.js 13+需要使用v3.x及以上版本的@auth0/nextjs-auth0，低版本Next.js对应v2.x版本。
• 查看package.json中的依赖版本，若存在版本冲突，手动指定兼容版本后重新安装。

2. 规范withPageAuthRequired的使用 #

• 确保withPageAuthRequired仅用于包裹页面顶层导出的getServerSideProps，不要在客户端组件内部导入或执行任何Auth0服务端模块。
• 页面组件本身（除getServerSideProps外）不要引入@auth0/nextjs-auth0中的服务端相关方法。

3. 清理缓存并重新构建 #

执行以下命令彻底清理缓存并重新安装依赖：

# 删除Next.js构建缓存
rm -rf .next
# 删除node_modules和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install --legacy-peer-deps
# 重启开发服务器
npm run dev

4. 配置Webpack排除Node.js依赖 #

在next.config.js中添加配置，将oidc-token-hash、openid-client等仅适用于Node.js的依赖标记为外部依赖，阻止Webpack将其打包到客户端代码中：

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // 客户端打包时排除Node.js专属依赖
      config.externals.push('oidc-token-hash', 'openid-client');
    }
    return config;
  }
};

5. 确认getServerSideProps的导出方式 #

确保getServerSideProps是页面文件的顶层导出，不要嵌套在组件内部或其他函数中，避免Webpack误将其识别为客户端代码。

内容的提问来源于stack exchange，提问作者Vidit Khandelwal