在Rails 7中用Importmap引入ts-select2遇TsSelect2未定义错误

问题根源 #

直接用 import 'ts-select2' 无法将 TsSelect2 暴露到全局作用域，因为该组件的 ES 模块采用默认导出或命名导出方式，而非全局挂载。

修复方案 #

1. 修正导入语句 #

替换 application.js 中的导入代码，根据组件导出方式选择以下任一写法：

• 默认导入（优先尝试）：

  import TsSelect2 from 'ts-select2';
  
  const select2 = new TsSelect2(document.getElementById('user_groups'), {
    minimumResultsForSearch: Infinity,
    width: `250px`
  });
  

• 命名导入（如果默认导入无效）：

  import { TsSelect2 } from 'ts-select2';
  
  const select2 = new TsSelect2(document.getElementById('user_groups'), {
    minimumResultsForSearch: Infinity,
    width: `250px`
  });
  

2. 确保 DOM 元素已加载 #

避免因元素未渲染完成导致获取失败，将代码包裹在 DOM 加载完成事件中：

import TsSelect2 from 'ts-select2';

document.addEventListener('DOMContentLoaded', () => {
  const selectEl = document.getElementById('user_groups');
  if (selectEl) {
    new TsSelect2(selectEl, {
      minimumResultsForSearch: Infinity,
      width: `250px`
    });
  }
});

3. 检查依赖完整性 #

ts-select2 依赖 jQuery 和原生 Select2 库，需确保这些依赖已正确导入：

• 先执行 pin 命令：

  ./bin/importmap pin jquery select2
  

• 再在 application.js 中导入依赖：

  import 'jquery';
  import 'select2';
  import TsSelect2 from 'ts-select2';
  

4. 验证 importmap 配置 #

确认 config/importmap.rb 中的配置无误：

pin "ts-select2", to: "https://ga.jspm.io/npm:ts-select2@0.2.5/dist/ts-select2.min.js"

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