NextJS启动dev服务报读取undefined的split属性TypeError错误

问题表现 #

• 修改NextJS项目的index.js页面文件，确认业务代码中没有编写任何调用split方法的逻辑，执行npm run dev启动开发服务后，页面抛出未处理运行时错误：

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'split')

Call Stack
../../node_modules/.pnpm/undici@5.5.1/node_modules/undici/lib/core/request.js
webpack-internal:///./node_modules/next/dist/compiled/@edge-runtime/primitives/index.js (17232:45)
__require
webpack-internal:///./node_modules/next/dist/compiled/@edge-runtime/primitives/index.js (16:50)
../../node_modules/.pnpm/undici@5.5.1/node_modules/undici/lib/client.js
webpack-internal:///./node_modules/next/dist/compiled/@edge-runtime/primitives/index.js (18044:19)
__require
webpack-internal:///./node_modules/next/dist/compiled/@edge-runtime/primitives/index.js (16:50)
../../node_modules/.pnpm/undici@5.5.1/node_modules/undici/lib/pool.js
webpack-internal:///./node_modules/next/dist/compiled/@edge-runtime/primitives/index.js (19367:18)
__require
webpack-internal:///./node_modules/next/dist/compiled/@edge-runtime/primitives/index.js (16:50)
../../node_modules/.pnpm/undici@5.5.1/node_modules/undici/lib/agent.js
webpack-internal:///./node_modules/next/dist/compiled/@edge-runtime/primitives/index.js (19476:16)
__require
webpack-internal:///./node_modules/next/dist/compiled/@edge-runtime/primitives/index.js (16:50)
src/polyfills/undici.js
webpack-internal:///./node_modules/next/dist/compiled/@edge-runtime/primitives/index.js (19607:17)
__require
webpack-internal:///./node_modules/next/dist/compiled/@edge-runtime/primitives/index.js (16:50)
addPrimitives
webpack-internal:///./node_modules/next/dist/compiled/@edge-runtime/primitives/index.js (21753:18)
eval
webpack-internal:///./node_modules/next/dist/compiled/@edge-runtime/primitives/index.js (21855:19)
./node_modules/next/dist/compiled/@edge-runtime/primitives/index.js
file:///Users/dusankovacevic/Desktop/buksna/next/core/.next/static/chunks/pages/index.js (14475:1)
options.factory
/_next/static/chunks/webpack.js (661:31)
__webpack_require__
file:///Users/dusankovacevic/Desktop/buksna/next/core/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (316:21)
eval
webpack-internal:///./node_modules/next/dist/server/node-polyfill-web-streams.js (2:42)
./node_modules/next/dist/server/node-polyfill-web-streams.js
file:///Users/dusankovacevic/Desktop/buksna/next/core/.next/static/chunks/pages/index.js (15152:1)
options.factory
/_next/static/chunks/webpack.js (661:31)
__webpack_require__
file:///Users/dusankovacevic/Desktop/buksna/next/core/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (316:21)
eval
webpack-internal:///./node_modules/next/dist/server/render.js (47:5)
./node_modules/next/dist/server/render.js
file:///Users/dusankovacevic/Desktop/buksna/next/core/.next/static/chunks/pages/index.js (15207:1)
options.factory
/_next/static/chunks/webpack.js (661:31)
__webpack_require__
file:///Users/dusankovacevic/Desktop/buksna/next/core/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (316:21)
eval
webpack-internal:///./pages/index.js (8:81)
./pages/index.js
file:///Users/dusankovacevic/Desktop/buksna/next/core/.next/static/chunks/pages/index.js (14584:1)
options.factory
/_next/static/chunks/webpack.js (661:31)
__webpack_require__
file:///Users/dusankovacevic/Desktop/buksna/next/core/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (316:21)
eval
webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js (5:16)
eval
webpack-internal:///./node_modules/next/dist/client/route-loader.js (211:24)

问题排查 #

出问题时pages/index.js的代码如下：

import { makeStyles } from '@material-ui/core/styles';
import { renderToHTML } from 'next/dist/server/render';
import Header from '../components/Header';


const useStyles = makeStyles((theme) => ({
example: {
  color: 'red',
}
}));

function Home({posts}) {

  const classes = useStyles();

  return (
    <>
    <Header />
    {console.log(posts)}
    <div className={classes.example}>
      {posts.map((post) => (
        <p>{post.title}</p>
      ))}
    </div>
    </>
  )
}

export async function getStaticProps() {

  const res = await fetch('http://127.0.0.1:8000/api/')
  const posts = await res.json();

  return {
    props:{
      posts
    }
  };
}

export default Home

根因说明 #

报错和业务代码里手写split方法的逻辑无关，触发点是错误引入了NextJS的服务端内部模块

next/dist/server/*路径下的所有模块都是NextJS框架内部、仅允许在Node.js服务端运行时加载的私有模块，不能直接在客户端侧的页面组件代码中引入。webpack打包客户端侧代码时，会尝试把这类服务端专属模块打包到浏览器端运行的bundle中，执行时缺少Node.js环境的对应依赖，就会触发模块内部逻辑读取undefined值后调用split方法的报错。

修复方案 #

• 打开pages/index.js文件，删除无效的引入行：import { renderToHTML } from 'next/dist/server/render';
• 保存文件等待开发服务热重载，若热重载未生效手动执行npm run dev重启服务即可，报错会完全消失。

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