Ant Design替换Moment为date-fns时为何抛出服务器错误？

该报错核心原因是项目运行时加载到了date-fns的ESM格式代码，但当前Node.js运行环境默认按CommonJS规则解析代码，导致无法识别import语句，可按以下步骤排查解决：

• 检查Ant Design日期组件的适配器配置是否正确
  React + Ant Design项目替换Moment.js为date-fns时，需先安装@ant-design/date-fns-adapter依赖，再在项目入口全局配置日期适配器：

  import { ConfigProvider } from 'antd';
  import dateFnsAdaptor from '@ant-design/date-fns-adapter';
  
  ReactDOM.render(
    <ConfigProvider dateAdapter={dateFnsAdaptor}>
      <App />
    </ConfigProvider>,
    document.getElementById('root')
  );
  

• 修正打包工具的ESM模块兼容配置
  需要将date-fns和@ant-design/date-fns-adapter加入打包工具的转译依赖列表：
  • Webpack配置示例：

  // webpack.config.js
  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules\/(?!(date-fns|@ant-design\/date-fns-adapter)\/)/,
          use: 'babel-loader'
        }
      ]
    }
  }
  

  • Vite配置示例：

  // vite.config.ts
  export default defineConfig({
    ssr: {
      noExternal: ['date-fns', '@ant-design/date-fns-adapter']
    }
  })
  

• 修正package.json与tsconfig.json的冲突配置
  不要同时配置package.json的"type": "module"和tsconfig.json的"module": "commonjs"，二者逻辑冲突：
  • 若项目为CommonJS环境：删除package.json中的"type": "module"配置，tsconfig.json调整为：

  {
    "compilerOptions": {
      "module": "CommonJS",
      "target": "ES6",
      "moduleResolution": "Node",
      "allowSyntheticDefaultImports": true
    }
  }
  

  • 若项目为ESM环境：保留package.json的"type": "module"配置，将tsconfig.json的"module"字段修改为"ESNext"即可。
• 修正date-fns的导入写法
  不要直接导入date-fns/esm路径下的子模块，直接从顶层导入即可：
  错误写法：import format from 'date-fns/esm/format'
  正确写法：import format from 'date-fns/format'

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