Laravel 9 搭配 Vite 构建时select2报default未导出错误求解决

问题原因 #

Select2的node_modules/select2/dist/js/select2.js属于UMD/IIFE格式的传统类库，而非标准ES模块，没有导出default成员。开发模式下构建工具（Vite）的宽松处理不会报错，但生产构建时Rollup的严格检查会抛出该错误。

解决方案 #

方案一：改用jQuery原型调用（推荐） #

Select2本质是jQuery插件，导入后会自动挂载到jQuery的原型上，无需单独调用导入的函数：

1. 确保jQuery已正确导入并全局挂载：

   // resources/js/app.js
   import $ from 'jquery';
   window.$ = window.jQuery = $;
   

2. 直接导入Select2模块，无需赋值变量：

   import 'select2';
   

3. 使用jQuery方式初始化Select2：

   $(document).ready(function() {
       // 针对需要初始化的select元素调用
       $('select.select2').select2();
   });
   

4. 引入Select2的样式文件，在resources/css/app.css中添加：

   @import 'select2/dist/css/select2.css';
   

方案二：配置Vite兼容非ES模块 #

如果需要保留类似原代码的调用方式，可以通过Vite配置让构建工具正确处理Select2的UMD格式：

1. 修改vite.config.js，添加依赖优化和全局变量配置：

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   
   export default defineConfig({
       plugins: [
           laravel({
               input: ['resources/css/app.css', 'resources/js/app.js'],
               refresh: true,
           }),
       ],
       optimizeDeps: {
           include: ['select2'],
           esbuildOptions: {
               define: {
                   global: 'window', // 给UMD库提供全局window对象
               },
           },
       },
       resolve: {
           alias: {
               jquery: 'jquery/src/jquery', // 确保jQuery用ES模块版本
           },
       },
   });
   

2. 修改app.js中的导入方式，用命名空间导入并传入jQuery初始化：

   import $ from 'jquery';
   window.$ = window.jQuery = $;
   
   import * as select2 from 'select2';
   select2($); // 将jQuery传入Select2完成挂载
   

验证操作 #

修改完成后，先执行npm run dev确认开发模式正常，再执行npm run build验证生产构建无错误。

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