Необычная ошибка с компонентом antd Mention

Question

Я использую компонент Antd Mention.Использование очень тривиально.

import React, { Component } from 'react';
// import PropTypes from 'prop-types';
// import { connect } from 'react-redux';
import { Mention } from 'antd';

class CommentInput extends Component {
    render() {
        return (
            <div className="comment-input">
                <Mention />
            </div>
        );
    }
}

export default CommentInput;

Но я получаю необычную ошибку в консоли: не удается прочитать свойство 'getBlockMap' неопределенного

Похоже, что ошибка связана с зависимостями пакетов в моем проекте:

"dependencies": {
        "antd": "^3.4.3",
        "axios": "^0.17.1",
        "d3": "^4.13.0",
        "email-validator": "^2.0.3",
        "firebase": "^4.12.0",
        "history": "^4.7.2",
        "lodash": "^4.17.5",
        "moment": "^2.21.0",
        "query-string": "^6.1.0",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "react-faux-dom": "^4.1.0",
        "react-icons": "^2.2.7",
        "react-redux": "^5.0.7",
        "react-router-dom": "^4.2.2",
        "redux": "^3.7.2",
        "redux-logger": "^3.0.6",
        "redux-thunk": "^2.2.0"
    },

Я собрал git repo , который показывает, что существует проблема с зависимостями моего проекта.

Есть идеи, чтобы решить эту проблему?

Answer 1

Краткий ответ :

обновить react-hot-loader до 3.1.3 до 4.2.0

1. Установить ncu: npm install -g npm-check-updates

2. Обновление react-hot-loader: ncu -u react-hot-loader

3. Установить пакеты: npm install

4. Rerunnpm run start

Подробный ответ

Если вы поместите разрыв в эту строку кода, вы увидите, что contentState не определено,

Затем, используя Call Stack DevTools Chrome, вы можете отследить, где будет определено это contentState:

и в конечном итоге вы перемещаетесь в то место, где react-hot-loader пытается вызвать toString() метод Mention:

Обычно toString() просто возвращает строку, но в этом случае он пытается на самом деле построить Mention.

Поиск в гугле не дает много, но мыобнаружил тот факт, что проблема находится между react-hot-loader и Mention инициализацией.

Удаление react-hot-loader обертывания, показывает, что Mention продолжает работать.

кстати: вы, кажется, имеетевводит в заблуждение комментарий о том, что вы ничего не пропускаете, потому что в проекте вы заключаете его в react-hot-laoder s AppContainer

. Это дает возможность проверить, не устарела ли текущая версия react-hot-loader (прочитайтекак "содержит ошибку и может быть обновлен")

Проверка package.json проекта с помощью npm-check-update показывает, что он может бытьоценивается от 3.1.3 до 4.2.0.Это обновление основной версии, которое звучит довольно многообещающе

Запуск ncu -u react-hot-loader, затем yarn / npm install, а затем повторный запуск yarn start / npm run start устраняет проблему

Обновление

Просто из любопытства мы можем проверить react-hot-loader страницу релизов , и мы видим, что версия 3.1.3 прыгнула прямо к v4.0.0-beta.1.

Проверяя исходные коды обеих версий, мы видим, что содержимое функции resolveType полностью изменилось.Более глубокие исследования доказывают, что toString не вызывается из проверенных типов, а вместо него используется createProxy из react-stand-in.

Теперь мы можем быть уверены, что обновление версии было правильным решением.