javascript - 使用 Rollup 构建自定义 npm 包中的 react-select 崩溃

Question

在这里，我为我的公司（服务器端表）创建了一个自定义 npm 包，在这个包中我使用 react-select 来显示排序。

在开发过程中（使用一个旧项目来做），一切正常。只有在使用 Rollup 创建了我的构建包后，我才意识到，只要我将 props 放入排序表，应用程序崩溃就会出现此错误

我坚持这样一个事实，即一切都适用于我未编译的组件，并且无论我在 Select 中放入什么，只要它显示的条件是好的，应用程序就会崩溃。

这是一个使用我的组件代码的沙箱：https ://codesandbox.io/s/happy-morning-d6jmn?file=/src/ServerSideTable.tsx

在 App.js 中，我使用 sortSelect 调用 ServerSideTable，它是一个值/标签数组。

在组件 ServerSideTable 中，我有一个 useEffect 来转换这个数组以添加一个图标：

useEffect(() => {
        try{
            if(props.isSorter && !!props.sorterSelect)
                setSorterOptions(props.sorterSelect.flatMap(filter => {
                    return ([
                        {
                            value: filter.value+",asc",
                            label: filter.label,
                            icon: <FontAwesomeIcon icon={faAngleDown} size="lg" style={{paddingLeft: 5}} color="#57606f" />
                        },
                        {
                            value: filter.value+",desc",
                            label: filter.label,
                            icon: <FontAwesomeIcon icon={faAngleUp} size="lg" style={{paddingLeft: 5}} color="#57606f"/>,
                        }])
                    }))
        } catch {
            console.log("Error when try to create sorter array")
        }
    }, [props.sorterSelect]) 

然后在下面调用 Select ：

   {props.isSorter &&
        <div className="selectContainer">
            <Select 
                options={sorterOptions}
                components={{ Option: CustomSelectOption, SingleValue: CustomSelectValue }}
                isClearable
                onChange={(e, triggeredAction) => {
                    if(triggeredAction.action === "clear") {
                        props.onDataChange({offset,perPage,filters})
                        setSorterValue(null)
                    }
                    else {
                        setSorterValue(e)
                    }
                }}
                value={sorterValue}
                classNamePrefix="ServerSideTableFilterSelect"
                placeholder="Trier par..."/>
        </div>
    }

如果我注释掉应用程序不会崩溃我承认我不明白为什么，因为我使用这个库时，我找不到问题出在哪里......非常感谢！

标签： javascriptreactjsreact-select