TOAST UI Grid datePicker编辑器报错：tui_date_picker_1.default不是构造函数

问题原因 #

你遇到的Uncaught TypeError: tui_date_picker_1.default is not a constructor错误，本质是TOAST UI Grid的日期选择器编辑器未正确加载依赖的TOAST UI DatePicker组件，或者组件的引入方式与Grid的期望不匹配。Grid的datePicker编辑器并非内置功能，必须依赖独立的DatePicker库才能工作。

解决方案 #

1. 补充引入TOAST UI DatePicker的脚本和样式 #

在页面中需先引入DatePicker的资源，再加载Grid资源，且确保两者版本兼容（建议使用同大版本号）：

<!-- DatePicker样式 -->
<link rel="stylesheet" href="https://uicdn.toast.com/tui-date-picker/latest/tui-date-picker.css">
<!-- DatePicker脚本 -->
<script src="https://uicdn.toast.com/tui-date-picker/latest/tui-date-picker.js"></script>
<!-- Grid样式 -->
<link rel="stylesheet" href="https://uicdn.toast.com/grid/latest/tui-grid.css">
<!-- Grid脚本 -->
<script src="https://uicdn.toast.com/grid/latest/tui-grid.js"></script>

2. 验证编辑器配置正确性 #

你的列配置本身无问题，但需确保DatePicker组件全局可用。若使用模块化环境（如ES6 import），需注意正确引入方式：

// 模块化环境下的正确引入方式
import Grid from '@toast-ui/grid';
import DatePicker from '@toast-ui/date-picker';

// 手动注册DatePicker编辑器（部分场景需要）
Grid.use('datePicker', DatePicker);

3. 版本兼容性检查 #

避免混用不同大版本的Grid和DatePicker，比如Grid 4.x需对应DatePicker 4.x，版本不匹配会直接导致构造函数引用错误。

测试修正效果 #

完成依赖资源的正确引入后，原有Grid配置即可正常运行，点击日期列时DatePicker编辑器会正常初始化，不会再抛出构造函数错误。

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