Liferay 7.4 GA105升级报错：A.LiferayItemSelectorDialog不是构造函数

问题根源 #

Liferay 7.4 彻底废弃了基于AUI的LiferayItemSelectorDialog构造函数，改用Liferay.Util.openItemSelector全局工具方法实现文档和媒体选择器调用，这是7.3版本后的API变更，导致你的7.2旧代码无法兼容。

修正后的JSP代码 #

替换原有的<aui:script>块内容为以下代码：

<%@ taglib prefix="aui" uri="http://liferay.com/tld/aui" %>
<%@ taglib prefix="portlet" uri="http://java.sun.com/portlet_2_0" %>

<%
String itemSelectorURL = GetterUtil.getString(request.getAttribute("itemSelectorURL"));
%>

<aui:script>
    console.log("test");
    let parsedHtmlGeneratorId = '';
    
    jQuery('.chooseImage').on('click', function(event) {
        parsedHtmlGeneratorId = event.currentTarget.dataset.parsedid;
        
        Liferay.Util.openItemSelector({
            eventName: 'ItemSelectedEventName',
            onSelect: function(selectedItem) {
                if (selectedItem) {
                    const itemSrc = selectedItem.value;
                    const parsedItemId = '<portlet:namespace />' + parsedHtmlGeneratorId;
                    document.getElementById(parsedItemId).value = itemSrc;
                }
            },
            title: 'Select Image',
            url: '<%= itemSelectorURL.toString() %>'
        });
    });
</aui:script>

按钮代码保持不变：

<aui:button data="<%=dataMap%>" name="chooseImage"
            value="Browse" cssClass="chooseImage btn-primary mt-1" />

关键说明 #

1. API替换：用Liferay.Util.openItemSelector替代原构造函数调用，参数结构调整后，将selectedItemChange事件处理直接放在onSelect回调中。
2. 后端兼容性：确保后端生成的itemSelectorURL符合7.4规范，7.4对Item Selector的权限验证和URL参数有细微调整，需确认portlet代码适配新要求。
3. 缓存清理：测试前务必清除浏览器缓存，避免旧AUI组件文件干扰新代码执行。
4. 可选优化：若项目正在迁移到现代前端架构，也可通过导入@liferay/item-selector模块实现模块化调用，传统JSP场景下全局工具方法更便捷。

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