如何在Laravel/Livewire/AlpineJS项目中正确集成配置Pikaday日期选择器

你最初的错误来自导入逻辑错误：你将Pikaday的CSS文件作为JS模块导入，没有引入Pikaday的核心JS逻辑，同时直接给window.Pikaday赋值了未定义的Pikaday变量，才触发了引用错误。
你后续在resources/js/bootstrap.js中添加的JS导入逻辑是正确的，已经解决了JS模块的导入问题：

var Pikaday = require('pikaday');
window.Pikaday = Pikaday;

额外提示：如果需要使用你代码中用到的getMoment()方法，需要将导入的moment也挂载到window对象上，在bootstrap.js中添加以下代码即可：

import * as moment from 'moment-timezone';
window.moment = moment;

你的CSS导入语法有误，根因是相对路径指向错误：你写的./node_modules/是相对于当前bootstrap.js所在的resources/js目录的相对路径，而node_modules实际存放在项目根目录，所以webpack找不到对应文件。

修复方案（二选一即可） #

• 方案1：保持在JS文件中导入CSS，直接删除路径前缀即可，webpack默认会自动到node_modules目录下查找对应资源：

import 'pikaday/css/pikaday.css';

• 方案2：将CSS导入逻辑放到样式文件中（更符合资源分离规范），在resources/css/app.css中添加以下导入语句即可，~是webpack css-loader约定的、代表从node_modules目录查找资源的前缀：

@import '~pikaday/css/pikaday.css';

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