Проблемы с ReactJS. Как решить?

Question

[AnjeyTsibylskij]

Начал изучения React и появились проблемы, решение которых не могу найти уже пару дней.

Все манипуляции делаю с этим кодом

import React, {Component} from 'react';
import {render} from 'react-dom';

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

class App extends Component {
    onClickHandler(e){
        console.log('click', e);
    }

    onTouchTapHandler(){
        console.log('touch', e);
    }

    render(){
        return (
            <button onClick={this.onClickHandler} onTouchTap={this.onTouchTapHandler}>Test</button>
        );
    }
}

render(<App />, document.getElementById('page'));

1. Написал простой компонент, который выводит кнопку на страницу. После чего хочу собрать скрипт для production, воспользовался лучшими практиками для webpack и на выходе в консоли получаю такую ошибку
   
   

   Uncaught Error: Minified React error #37; visit facebook.github.io/react/docs/error-decoder.html?i... for the full message or use the non-minified dev environment for full errors and additional helpful warnings

   
   Как я понял, это что-то связано с минификацией. Проясните для меня этот момент.
   
   
2. Есть такой плагин react-tap-event-plugin, который добавляет события по клику для моб устройств, так вот, во всех статьях та и в самом примере на GitHub сказано делать так
   

   import injectTapEventPlugin from 'react-tap-event-plugin';
   injectTapEventPlugin();

   
   делаю все как в примере, но все ровно получаю ошибку
   
   

   Warning: Unknown prop `onTouchTap` on tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

   

На Тостере нет ни одного вопроса по этой теме, надеюсь, у всех все работает, и вы подскажете мне куда двигаться

Answer 1

[Александр Мастеров]

1. минимально рабочий пример: (см. комментарий к ответу)

git clone -b stack/material-ui https://github.com/AlexMasterov/webpack-kit.git material-ui-example
cd material-ui-example
yarn install & yarn serve

http://localhost:3000

2. injectTapEventPlugin добавить в конструктор:

class App extends Component {
  constructor(props) {
    injectTapEventPlugin();
    super(props);
  }

Comments

[AnjeyTsibylskij]

1. Конфиг - https://github.com/callemall/material-ui-webpack-e...

2. написал, но все ровно ошибка. + я еще добавил super(props) в конструктор, а то при сборке ошибки были

[Александр Мастеров]

Ваши "лучшие практики" устарели еще на момент коммита.
Тут достаточно нюансов, которые нет желания выпытывать.
Мне проще собрать минимально рабочий вариант, но это если никто другой не ответит.

[AnjeyTsibylskij]

Александр Мастеров: да, дайте пожалуйста минимальный рабочий вариант. Думаю, у Вас уже есть проекты, с который можно просто скопировать и вставить сюда. Спасибо.

[Александр Мастеров]

AnjeyTsibylskij: обновил ответ.
Ступайте протоптанной дорогой :)

Answer 2

[kahi4]

По поводу второго вам уже ответили. По поводу первого: открываем ссылку, которую дал нам сам реакт, читаем, понимаем, что нужно выключить продакшен мод в вебпаке в девелоп-режиме (если пока не знаете как это сделать -- просто удалите строчку

new webpack.DefinePlugin({
      'process.env':{
        'NODE_ENV': JSON.stringify('production')
      }
    }),,```

Он напишет, что ему не нравится.
P.S. Если вопрос почему так в принципе происходит, то ответ написан внутри этой самой ссылки. Коротко: для оптимизации размера пакета, в продакшен режиме внутри реакта удаляются все описания ошибок, поэтому он кидает стандартную (эту) ошибку на все возникающие.

Конкретно в вашем случае ошибка:

_registerComponent(...): Target container is not a DOM element.

Что, вероятно, возникает из-за того, что
document.getElementById('page')
возвращает undefined (то бишь на странице нет такого id, что, к слову, правда, судя по тому репозиторию, что вы скинули. У вас не #page, а #app.)

Comments

[kahi4]

По поводу второго: https://github.com/zilverline/react-tap-event-plug... вот ишью, которая закрыта без решения проблемы. Судя по всему, всем плевать и вы выбрали не лучшую библиотеку. Можете либо снизить версию реакта, либо ... я не знаю, подождать чуда.