TypeScript中引入dayjs时调试、构建无法同时正常运行如何解决？

问题成因 #

两种引入方式分别报错，核心是不同调试、构建环境对 ESM、CommonJS 模块的互操作处理逻辑不统一：

• import * as dayjs from 'dayjs'：ESM 规范中该语法导入的是不可调用的模块命名空间对象，部分开发态工具做了宽松兼容所以调试可运行，但 Rollup、生产模式 Webpack 等工具会严格遵循 ESM 规范，禁止将命名空间对象作为函数调用，构建阶段就会抛出Cannot call a namespace ('dayjs')、dayjs__namespace is not a function错误。
• const dayjs = require('dayjs')：require是 CommonJS 专属语法，构建工具通常会自动转译兼容所以构建可通过，但原生 ESM 运行环境（浏览器、ESM 模式 Node）没有全局require方法，调试阶段就会抛出ReferenceError: require is not defined错误。

推荐解决方案（无兼容问题） #

1. 替换引入语句为 ESM 默认导入语法：

   import dayjs from 'dayjs'
   

2. 打开项目根目录的tsconfig.json，在compilerOptions中开启两个配置项：

   {
     "compilerOptions": {
       "esModuleInterop": true,
       "allowSyntheticDefaultImports": true
     }
   }
   

配置生效后，本地调试、生产构建两个阶段都可以正常调用dayjs()相关方法，不会再出现前述报错。

备选方案（不修改tsconfig场景） #

如果项目有历史兼容要求不能开启esModuleInterop，可以使用 TypeScript 原生的特殊导入语法，TS 编译时会自动根据目标模块规范生成对应兼容代码：

import dayjs = require('dayjs')

该写法同样可以同时兼容调试和构建场景，但不符合标准 ESM 书写习惯，优先推荐第一种方案。

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