Phoenix框架下esbuild引入jQuery后datepicker报未定义如何解决

报错原因 #

ES 模块的import语句存在提升特性，所有导入操作会优先于模块内其余同步代码执行。你在app.js中挂载window.jQuery的代码实际执行顺序晚于datepicker-nl-BE模块的加载逻辑，而jquery-ui的语言包默认依赖全局作用域下的jQuery变量，因此抛出未定义错误。

解决方案 #

方案一：使用esbuild内置inject配置（推荐，等效webpack的ProvidePlugin） #

该方案不需要修改业务代码，esbuild会自动为所有依赖jQuery的模块注入全局变量：

1. 在assets目录下新建jquery-shim.js文件，内容如下：

import jquery from 'jquery'
export const jQuery = jquery
export const $ = jquery

2. 修改esbuild.js的配置项，新增inject字段：

let opts = {
  entryPoints: ['js/app.js'],
  bundle: true,
  logLevel: 'info',
  target: 'es2016',
  outdir: '../priv/static/assets',
  loader,
  plugins: [sassPlugin()],
  // 新增inject配置，自动注入全局jQuery变量
  inject: ['./jquery-shim.js']
}

3. 重启Phoenix开发服务即可生效。

方案二：修改导入方式绕过import提升 #

如果不想调整esbuild配置，可将datepicker的导入语句从import改为require，取消导入提升，确保挂载window.jQuery的代码先执行：
修改app.js代码如下：

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

// 将import改为require，不会被提升执行
const datepicker = require("jquery-ui/ui/i18n/datepicker-nl-BE")

内容的提问来源于stack exchange，提问作者Kristof van Woensel