Laravel 9 + Vite环境下daterangepicker及moment报错问题求助

问题背景 #

在Laravel 9项目里用Vite整合daterangepicker，当前app.js配置如下：

import './bootstrap.js';
import 'daterangepicker/daterangepicker.js';
import 'moment/moment.js';

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

import moment from 'moment';
window.moment = moment;

import daterangepicker from 'daterangepicker';
window.daterangepicker = daterangepicker;   

调用daterangepicker的代码：

$('input[name="teamFilterDateRange"]').daterangepicker();

遇到的报错 #

1. 初始报错：

Uncaught TypeError: $(...).daterangepicker is not a function.

Vite构建无报错，推测包已正确导入，但window.daterangepicker未绑定到全局。将调用代码移到app.js后，出现新报错：

TypeError: moment is not a function

2. 更新尝试后：
   把初始化代码放进$(document).ready()里，解决了$(...).daterangepicker is not a function的问题，但moment相关报错依然存在：

Uncaught TypeError: moment is not a function

需求是让daterangepicker全局可用，能在外部JS文件里正常调用。

解决步骤 #

1. 修正moment的全局绑定逻辑 #

daterangepicker依赖moment，必须确保moment能被daterangepicker识别到。修改app.js：

import './bootstrap.js';

// 先导入moment并绑定到全局，同时挂载到globalThis确保依赖能读取
import moment from 'moment';
window.moment = moment;
globalThis.moment = moment;

// 导入daterangepicker并绑定到jQuery原型
import $ from 'jquery';
import 'daterangepicker';
$.fn.daterangepicker = require('daterangepicker');

// 保留bootstrap的全局绑定
import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

2. 确认jQuery全局可用 #

如果bootstrap.js里没绑定jQuery到window，就在app.js里补充：

import $ from 'jquery';
window.$ = window.jQuery = $;

3. 外部JS文件的正确调用方式 #

确保外部JS文件在app.js之后加载，并且初始化代码放在$(document).ready()中：

$(document).ready(function() {
    $('input[name="teamFilterDateRange"]').daterangepicker();
});

4. 导入daterangepicker样式 #

在resources/css/app.css里添加样式导入，否则日期选择器会显示异常：

@import 'daterangepicker/daterangepicker.css';

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