TypeScript+webpack引入selectize.js运行报读取undefined的'0'属性错误

你遇到的报错来自两个核心错误：

1. 依赖安装错误：安装的@types/select2是同类下拉库select2的类型定义，和selectize完全无关，不仅起不到类型校验作用，还会干扰TS的类型推断。
2. 引入逻辑错误：require("selectize")();是错误的调用方式，selectize是jQuery插件，不能作为函数直接执行；webpack环境下如果没有提前把jQuery注入全局，selectize初始化时拿不到jQuery实例，插件方法无法正确挂载到jQuery原型上，调用.selectize()时内部无法获取匹配的DOM集合，访问集合索引0时就会抛出Cannot read properties of undefined (reading '0')的错误。

1. 清理错误依赖，安装正确依赖

yarn remove @types/select2
yarn add @selectize/selectize jquery

0.13以上版本的@selectize/selectize已经内置TS类型声明，不需要额外安装第三方@types包。

2. 修改webpack配置，通过ProvidePlugin把jQuery注入全局，保证selectize能正确找到依赖：

const webpack = require('webpack');
module.exports = {
  // 你项目里原有的其他配置
  plugins: [
    // 其他原有插件
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

如果TS编译时提示找不到selectize相关方法，可以在项目全局声明文件（一般是src/global.d.ts）里补充模块声明：

declare module '@selectize/selectize' {
  interface JQuery {
    selectize(config?: Record<string, any>): JQuery;
  }
}

3. 修改业务代码的引入和初始化逻辑，去掉错误的直接调用写法，同时引入selectize的样式文件避免渲染异常：

import $ from 'jquery';
import '@selectize/selectize';
import '@selectize/selectize/dist/css/selectize.css';

// $(function(){})本身等价于document.ready监听，不需要额外嵌套一层
$(function(){
  $('.classic-select').selectize();
});

改完之后重启webpack开发服务，重新编译后报错就会消失，selectize可以正常初始化。

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