NextJS调用类库静态方法报错：setData is not a function

云上老周

2026-7-8

问题描述

类库中定义了MyClass类，包含静态属性DATA和静态方法setData，代码如下：

class MyClass {
   static DATA = '';

   static setData(data) {
      MyClass.DATA = data || '';
   }
}
export default MyClass;

在Next.js项目中按如下方式调用：

import MyClass from 'library/dist/utilities/MyClass';

MyClass.setData('new data');

执行next dev时触发错误：

TypeError: _library_dist_utilities_MyClass__WEBPACK_IMPORTED_MODULE_0__.setData is not a function

注：已确认类库中存在正确的导出语句，请问该错误是调用静态方法的方式有误，还是webpack相关的问题？

解答

调用静态方法的写法完全正确，问题出在类库编译导出或Next.js的模块处理环节，具体排查方向如下：

检查类库编译后的实际导出结构
直接查看类库编译产物library/dist/utilities/MyClass.js的内容，确认导出的是否是MyClass类本身。如果类库用Babel、TypeScript编译后，默认导出变成了嵌套对象（比如module.exports = { default: MyClass }），那实际调用时会出现方法找不到的情况——这是类库编译配置的问题，不是调用方式错了。
排查Next.js/webpack的模块解析逻辑
如果类库输出的是CommonJS格式，但Next.js的webpack配置没有正确处理该类库的模块类型，可能导致导出对象异常。可以尝试在next.config.js中添加对该类库的转译配置，或者检查类库package.json里的main/module/exports字段，确认它们指向的是正确的编译产物。
确认类字段语法的编译支持
代码中用了static DATA = ''这种类字段语法，要确保类库编译时配置了对应的转换插件（比如@babel/plugin-proposal-class-properties）。如果编译不彻底，静态成员可能没被正确挂载到类上，自然找不到setData方法。
清理缓存重试
删除Next.js的.next缓存文件夹，同时清理npm/yarn缓存，重新安装依赖后启动项目，排除缓存残留导致的旧代码干扰。