Next.js使用react-datetime-picker报exports is not defined错误

ReferenceError: exports is not defined是典型的CommonJS与ESM模块规范兼容问题：
react-datetime-picker v3.5.0采用拆分式组件设计，运行时依赖同作者产出的多个独立小包（包括日期处理工具、日历组件、时钟组件等），这些包默认输出CommonJS格式代码。你仅在转译配置中声明了react-datetime-picker主包，漏加了其关联的内部依赖，导致webpack打包时未将这些依赖内的CommonJS模块语法做浏览器端兼容转换——浏览器原生不支持CommonJS规范的全局exports对象，运行到对应代码时就会抛出该错误。

• 补全转译配置的依赖列表，将react-datetime-picker关联的同生态依赖全部纳入转译范围。如果使用next-transpile-modules，配置修改如下：

const withTM = require('next-transpile-modules')([
  'react-datetime-picker',
  '@wojtekmaj/date-utils',
  'react-date-picker',
  'react-calendar',
  'react-clock',
  'react-time-picker'
]);
module.exports = withTM(nextConfig)

• 若你使用的是Next.js 13.1及以上版本，可直接弃用next-transpile-modules，使用Next.js原生内置的transpilePackages配置项完成转译，无需额外安装依赖，配置示例：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 其他原有配置
  transpilePackages: [
    'react-datetime-picker',
    '@wojtekmaj/date-utils',
    'react-date-picker',
    'react-calendar',
    'react-clock',
    'react-time-picker'
  ]
}
module.exports = nextConfig

• 配置修改完成后，必须删除项目根目录下的.next缓存文件夹，再重启开发服务或重新执行构建，旧的打包缓存会导致新配置不生效，报错持续存在。

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