集成Slate.js Mentions示例到React项目时出现BabelLoader语法错误

你参考的官方Mentions示例是TypeScript编写的，代码里<HTMLDivElement | null>、<Range | undefined>这类尖括号包裹的内容是TS专属的泛型类型标注语法，而你自己的组件文件是.jsx后缀的JavaScript文件，Babel解析JS代码时不识别TS专属语法，碰到这类尖括号标记就会抛出「意外token」的语法错误。

把代码里所有TS专属的类型标注全部删除，改成纯JavaScript写法即可，修改后的对应代码段如下：

// 记得先从react正确导入用到的hooks
import { useRef, useState, useCallback, useMemo } from 'react'

const QueryBoxComponent = () => {
    // 移除useRef后的泛型标注，初始值传null
    const ref = useRef(null)
    // 移除useState后的泛型标注
    const [target, setTarget] = useState()
    const [index, setIndex] = useState(0)
    const [search, setSearch] = useState('')
    const renderElement = useCallback(props => <Element {...props} />, [])
    const editor = useMemo(
      () => withMentions(withReact(withHistory(createEditor()))),
      []
    )

    const chars = CHARACTERS.filter((c) =>
      c.toString().toLowerCase().startsWith(search.toLowerCase())
    ).slice(0, 10);

    // 剩余原有组件逻辑保持不变即可
}

• 如果你不想每次参考TS示例都手动删除类型标注，可以把当前.jsx文件后缀改成.tsx，给项目配置好TypeScript的Babel解析规则、安装对应TS依赖，就能直接运行原版TS示例代码。
• 改完语法后记得检查所有依赖都正确引入：withReact从slate-react导入，withHistory从slate-history导入，createEditor从slate导入，自定义的withMentions方法、Element组件、CHARACTERS常量也要确保引入路径正确，避免后续出现模块未找到的报错。

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