Невозможно установить свойство createElement #<Object>, которое является только получателем

Question

Описание

Что вы сообщаете: я следую этому набору инструкций по настройке горячего загрузчика React. Но когда я перехожу к шагу 3, где я ставлю патч, он врывается в тот, что ниже.

Ожидаемое поведение

Что, по вашему мнению, должно произойти: должно работать правильно

Фактическое поведение

Среда

Версия React Hot Loader: следующая

Запустите эти команды в папке проекта и заполните их результаты:

1. node -v: 7.9.0
2. npm -v: 4.2.0

Затем укажите:

1. Операционная система: Windows 10
2. Браузер и версия: последний Chrome

Воспроизводимая демонстрация

https://github.com/abarcenas29/preact-sandbox-v0/blob/wip/hot-reloader/src/main.js

ветка: wip-hot-reloader

Инструкции:

• yarn
• yarn run postinstall
• yarn run start:dev

Answer 1

У меня недостаточно репутации, чтобы оставлять комментарии, поэтому я должен написать ответ, который не совсем решает проблему, но все же...

Ошибка, которую вы получаете из-за react-hot-loader/patch требуя фактического react модуль и исправление его createElement функция с новым. Смотрите это здесь: react-hot-loader/lib/patch.dev.js:179

Основная проблема в том, что в конфиге webpack react модуль разрешен в preact-compat что, по-видимому, не позволяет устанавливать новые значения и поэтому Hot Reload не может работать все вместе.

Надеюсь, что это ответ на ваш вопрос. Быть как есть - я думаю, что горячая перезагрузка не будет работать в этой настройке.

РЕДАКТИРОВАТЬ: нашел простое решение. Изменить webpack.config.js разрешить блок к этому, чтобы указать react на ваш собственный сценарий:

// resolve for preact
webpack.resolve = {
  alias: {
    react: path.resolve(__dirname, 'react.js')
    // the rest goes as before
  }
}

Теперь создайте react.js файл и поместите это внутрь (измените пути и имена, как считаете нужным):

var preact = require('preact-compat');

var react = {};
// Copy object properties to a new object which will allow react-hot-loader to do its magic
Object.keys(preact).forEach(function(key) {
    react[key] = preact[key];
});

module.exports = react;

И сделано! HMR сейчас работает.