Antd Mention组件异常报错：Cannot read property 'getBlockMap' of undefined

这个报错我之前在使用Antd 3.x版本的Mention组件时也碰到过，核心原因基本都是Draft.js版本不兼容或者缺失导致的——因为Antd 3.x的Mention组件底层依赖Draft.js实现富文本相关功能，下面是具体的解决步骤：

1. 安装匹配版本的Draft.js #

Antd 3.4.3对应的Draft.js兼容版本是^0.10.5，你可以直接执行以下命令安装：

npm install draft-js@^0.10.5 --save
# 或者用yarn
yarn add draft-js@^0.10.5

2. 排查重复的Draft.js依赖 #

有时候项目里的其他依赖会引入不同版本的Draft.js，导致版本冲突。你可以运行以下命令查看当前项目的Draft.js依赖树：

npm ls draft-js
# yarn用户执行
yarn list draft-js

如果输出里有多个版本的Draft.js，你可以在package.json里添加resolutions字段（yarn支持）或者用npm-force-resolutions工具强制统一版本：

// package.json（yarn环境）
"resolutions": {
  "draft-js": "^0.10.5"
}

3. 升级Antd到同大版本的最新小版本 #

Antd 3.4.3是比较早期的版本，存在一些已知的兼容问题。你可以升级到3.x系列的最新稳定版（比如3.26.20），这个版本对React 16.2.0的兼容性更好，同时不会破坏现有API：

npm install antd@^3.26.20 --save

4. 验证组件基础用法 #

虽然你的代码看起来没问题，但可以先给Mention组件添加基础配置来排除使用方式的问题：

import React, { Component } from 'react';
import { Mention } from 'antd';

class CommentInput extends Component {
  render() {
    return (
      <div className="comment-input">
        <Mention suggestions={['alice', 'bob', 'charlie']} />
      </div>
    );
  }
}

export default CommentInput;

5. 清理依赖缓存并重装 #

如果以上步骤都没解决，可能是依赖缓存导致的异常。执行以下命令清理后重新安装：

# npm用户
rm -rf node_modules package-lock.json
npm install

# yarn用户
rm -rf node_modules yarn.lock
yarn install

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