NextJS中TSX调用.ts导入函数抛ModuleNotFound错误如何解决？

AI 小北

2026-10-5

问题根因

核心错误：next.config.js 中 pageExtensions 配置错误，把 .ts、.tsx 全部纳入页面文件识别范围。NextJS会把所有匹配pageExtensions规则的文件都视为页面入口，执行服务端+客户端双端打包。如果你的普通工具类.ts文件被误判为页面，文件内引用的Node.js原生模块（fs、child_process等）会被带入客户端打包流程，浏览器环境不存在这些原生模块，就会抛出找不到模块的错误。
次要问题：你给出的示例组件代码存在语法错误，return 后的JSX被错误用{}包裹，语法错误可能导致打包器解析异常，触发意外报错。

解决方案

1. 修正next.config.js的pageExtensions配置

不要把普通.ts后缀纳入页面扩展名，只有页面文件的后缀才需要加进去，保留你需要的MDX相关后缀即可，修改后配置如下：

const withMDX = require('@next/mdx')({
  extension: /\.mdx$/
})

module.exports = withMDX({
  pageExtensions: ['jsx', 'tsx', 'md', 'mdx'],
})

如果确实有.js格式的页面，再加js进配置数组即可，不要把普通.ts加进去，避免工具文件被误判为页面。

2. 修正组件语法错误

示例中的组件返回值语法错误，修正后的代码如下：

// /pages/index.tsx
import _ from 'lodash' 

const someArray = [1,2,3] // 补全你自己的数组定义
export const MyComponent = () => {
  return (
   <ul>{
    _.map(someArray, el => <li key={el}>{el}</li>)
   }</ul>
  )
}

注意要给循环生成的li元素加唯一key属性，避免React警告。

3. 额外校验规则

所有需要在客户端组件中调用的工具函数，不要引入Node.js原生模块，如果要用到原生模块的逻辑，只能放到getStaticProps、getServerSideProps或者API路由中执行，执行完把结果返回给客户端组件。
非页面的TS/TSX工具文件不要放在pages目录下，统一放到项目根目录的utils、components等自定义目录下，避免被误识别为页面。