“这是未定义的”TypeError 在 Rails/Webpacker 环境中使用 FullCalendar 和 Flatpickr

如何解决“这是未定义的”TypeError 在 Rails/Webpacker 环境中使用 FullCalendar 和 Flatpickr

我有一个带有 FullCalendar 实例的页面（在日历上列出每天的订单）。当用户点击那一天时，它会加载那一天的部分订单信息。在带有订单信息的部分内部，有一个链接会弹出一个带有表格的模式，其中包含每个订单的更多信息和选项。选项之一是“收据”制作工具，它使用“FlatPickr”库进行日期选择输入。当弹出窗口加载此收据部分（包括 FlatPickr 的 js）时，它会中断 FullCalendar 的“dateclick”回调（链接不起作用）。在控制台中，我得到

Uncaught TypeError: this is undefined

fp_incr rakuten_orders line 5419 > injectedScript:2052
jQuery 4
dateClick fullcalendar.js:315

等

并且我收到映射的 js 文件的路由错误

源映射错误：错误：请求失败，状态为 404 资源网址：null 源地图网址：datetimepicker-e769115066d0a3757f8e.js.map

当我从收据部分删除 flatpickr 包装标签 <%= javascript_pack_tag 'datetimepicker','data-turbolinks-track': 'reload' %> 时，一切都很好。但是，当然，日期输入不再有 FlatPickr。

此特定页面的 FullCalendar 实现是：

 var calendar = new Calendar(calendarEl,{
plugins: [ dayGridPlugin,interactionPlugin ],locale: 'ja',contentHeight: 450,aspectRatio: 1,headerToolbar: {
    left: 'prevYear,prev,next,nextYear',center: '',right: 'title'
},customButtons: {
},selectable: true,events: '/rakuten_orders.json',eventClick: function(info) {
    $.ajax({
        type: "GET",url: '/fetch_rakuten_orders_list/' + encodeURI(moment(info.event.start).format('YYYY-MM-DD')),dataType: "script",data: info.event.start
    });
},dateClick: function(info) {
    $.ajax({
        type: "GET",url: '/fetch_rakuten_orders_list/' + encodeURI(moment(info.date).format('YYYY-MM-DD')),data: info.date
    });
},loading: function (loading) {
    if (loading) {
        $(calendarEl).prepend( calendar_load );
    } else {
        $('.loading_overlay').remove()
    }
}
});
};

错误似乎与第 315 行有关，其中使用 ajax 调用加载包含用户单击日期的日期数据的部分。

这是 FlatPickr 的实现

import flatpickr from "flatpickr";
window.flatpickr = flatpickr
import { Japanese } from "flatpickr/dist/l10n/ja.js"

$('.datepicker').flatpickr({
        "locale": Japanese,enableTime: false,dateFormat: "Y年m月d日",monthSelectorType: 'static',}
);

有什么方法可以将任一实现更改为不发生冲突？我对错误来源的推理是否正确？

如果我没有回应，我可能会尝试在这些特定情况下使用 FullCalendar 的另一个实例而不是 FlatPickr（避免 FlatPickr）。提前致谢！

编辑：

我尝试实现从 $.ajax 切换到 fetch() 的建议

这是（超级简单的实现）的样子：

    async function fetchByDate(url,date) {
        var requestUrl = url + encodeURI(moment(date).format('YYYY-MM-DD'));

        return await fetch(requestUrl,{
                method: 'GET',credentials: "same-origin",headers: {
                    'dataType': 'json','contentType': 'application/json; charset=utf-8','X-Requested-With': 'XMLHttpRequest','X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
                }
            })
            .then((response) => {
                response.json()
            })
            .catch((error) => {
                console.log(error);
            })
    }

和

        var calendar = new Calendar(calendarEl,{
            plugins: [ dayGridPlugin,headerToolbar: {
                left: 'prevYear,right: 'title'
            },customButtons: {
            },eventClick: function(info) {
                // $.ajax({
                //  type: "GET",//  url: '/fetch_rakuten_orders_list/' + encodeURI(moment(info.event.start).format('YYYY-MM-DD')),//  dataType: "script",//  data: info.event.start
                // });
            },dateClick: function(info) {
                fetchByDate('/fetch_rakuten_orders_list/',info.date)
                // $.ajax({
                //  type: "GET",//  url: '/fetch_rakuten_orders_list/' + encodeURI(moment(info.date).format('YYYY-MM-DD')),//  data: info.date
                // });

            },loading: function (loading) {
                if (loading) {
                    $(calendarEl).prepend( calendar_load );
                } else {
                    $('.loading_overlay').remove()
                }
            }
        });

当我点击日期时，我在控制台中得到一个 SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data，用于以下 js.erb 文件：

$("#partial").html("<%= escape_javascript(render partial: 'daily_orders',locals: { daily_orders: @daily_orders },remote: true ) %>");