在Stencil框架中使用easepick时间选择器出现异常

错误原因 #

该错误本质是easepick依赖的date-fns库中的clone方法无法被正确调用。在Stencil的Shadow DOM环境下，上下文被隔离，加上打包工具的tree-shaking优化，导致easepick无法找到该方法的有效引用，最终触发初始化失败。

解决方案 #

方案一：手动传入date-fns实例 #

通过手动导入date-fns并注入到easepick配置中，确保方法引用有效：

1. 安装date-fns依赖：

npm install date-fns

2. 修改组件代码：

import { Component, h } from "@stencil/core";
import { easepick } from "@easepick/bundle";
import * as dateFns from 'date-fns';

@Component({
  tag: "my-component",
  styleUrl: "my-component.css",
  shadow: true,
})
export class MyComponent {
  datepicker!: HTMLInputElement;

  componentDidLoad() {
    const pickerNew = new easepick.create({
      element: this.datepicker,
      css: [
        "https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css",
      ],
      dateFns: dateFns, // 手动传入date-fns实例
    });

    console.log("DEBUG pickerNew:", pickerNew);
  }

  render() {
    return (
      <div class="date-picker-container">
        <input id="datepicker" ref={(el) => (this.datepicker = el)} />
      </div>
    );
  }
}

方案二：关闭Shadow DOM（业务允许时） #

如果不需要Shadow DOM的隔离特性，可直接关闭该选项，让easepick在全局上下文正常访问依赖：

@Component({
  tag: "my-component",
  styleUrl: "my-component.css",
  shadow: false, // 禁用Shadow DOM
})

方案三：确保CSS正确加载到Shadow DOM #

虽然不是直接引发错误的原因，但Shadow DOM下外部CSS加载异常可能间接影响功能，可通过Stencil的@Import装饰器导入样式：

import { Component, h, Import } from "@stencil/core";
import { easepick } from "@easepick/bundle";
import * as dateFns from 'date-fns';

@Component({
  tag: "my-component",
  styleUrl: "my-component.css",
  shadow: true,
})
@Import({
  url: "https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css",
})
export class MyComponent {
  // 其余代码保持不变
}

内容的提问来源于stack exchange，提问作者Fabio Ribeiro de Carvalho