Laravel 10 + Vite环境下使用daterangepicker报moment不是函数求助

问题背景 #

在Laravel 10 + Vite环境中集成daterangepicker（或bootstrap-daterangepicker）时，已在resources/js/app.js中导入moment和daterangepicker并挂载到全局，但初始化日期选择器时触发**"moment is not a function"**错误。

现有代码片段 #

app.js #

import './bootstrap';

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

import highcharts from 'highcharts';
import highchartsmore from 'highcharts/highcharts-more';
import highchartsacessibility from 'highcharts/modules/accessibility';
highchartsmore(highcharts);
highchartsacessibility(highcharts);
window.Highcharts = highcharts;

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

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

前端初始化代码 #

<div class="form-group">
    <label for="dates">Période</label>
    <input id="dates" type="text" class="form-control" />
    <script type="module">$('#dates').daterangepicker();</script>
</div>

解决步骤 #

• 显式注入依赖给daterangepicker
  daterangepicker依赖moment，但Vite的模块隔离机制可能导致它无法自动获取全局的moment。修改app.js中daterangepicker的导入逻辑，直接传入jquery和moment实例：

  import moment from 'moment';
  window.moment = moment;
  
  import $ from 'jquery';
  window.$ = $;
  
  // 显式传递依赖
  import daterangepicker from 'daterangepicker';
  daterangepicker($, moment);
  

• 移除内联脚本的type="module"
  带有type="module"的内联脚本会运行在独立的模块作用域中，无法访问window上挂载的全局变量。将初始化脚本改为普通脚本：

  <script>$('#dates').daterangepicker();</script>
  

  或者更规范的做法：将初始化代码放到app.js末尾，或者单独的模块文件中（比如resources/js/daterangepicker-init.js），然后在app.js中导入该文件，避免内联脚本的作用域问题。

• 校验依赖版本兼容性
  确认daterangepicker、moment、jquery的版本是否匹配。部分旧版daterangepicker对moment的版本有明确要求，若使用的是依赖moment的分支，需确保moment版本符合要求；若使用的是新版（迁移到dayjs的分支），则需要替换为dayjs依赖。

• 验证全局变量有效性
  在浏览器控制台输入moment和$，确认两个变量都存在，排除Vite打包时tree-shaking误删、变量被覆盖的问题。若moment不存在，检查app.js中是否正确挂载到window，或是否有其他代码修改了window.moment。

内容的提问来源于stack exchange，提问作者Émi V