@AnjeyTsibylskij

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

Начал изучения 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
    60cdde6ec22446b4a7d9c722f84a5c9e.png
    Как я понял, это что-то связано с минификацией. Проясните для меня этот момент.

  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
    c716c552ce1e44e2b5d5213bb81a0e9e.png


На Тостере нет ни одного вопроса по этой теме, надеюсь, у всех все работает, и вы подскажете мне куда двигаться
  • Вопрос задан
  • 3274 просмотра
Пригласить эксперта
Ответы на вопрос 2
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);
  }
Ответ написан
@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.)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы