ошибки codepen с реагировать

Question

Я получаю сообщение об ошибке в Codepen. ReferenceError: require не определен. Я импортировал наблюдателя пересечения из response-intersection-observer@5.0.5/dist/react-intersection-observer.cjs.js: ссылка codepen

 class AdImpression extends React.Component {
  state = {
    tracked: '',
  };

  handleChange = event => {
    if (event.isIntersecting && event.intersectionRatio >= 0.5) {
      this.recordedTimeout = setTimeout(() => {
        this.setState({ tracked: 'ad--tracked' });
      }, 1000);
      return;
    }
    clearTimeout(this.recordedTimeout);
  };

  render() {
    return (
      <Observer onChange={this.handleChange} threshold={0.5}>
        <div className={`ad ${this.state.tracked}`} />
      </Observer>
    );
  }
}

class ImpressionTracking extends React.Component {
  render() {
    return (
    <div>
        <div className="header visible">Criteria: 50% visible pixels + 1 continuous sec</div>
        <div className="body body--center">
            <AdImpression index={1} />
            <AdImpression index={2} />
            <AdImpression index={3} />
        </div>
    </div>
   );
  }
}

Answer 1

Вам необходимо использовать umd версию этого пакета.В имени файла cjs обозначает common js , которому требуется функция require в глобальной области видимости. umd попытается угадать, что доступно, в то время как * esm * для модуля es6, и вам нужно использовать функцию "добавить модуль" в codepen.

Answer 2

эта ошибка исходит из включенного вами файла реакции-пересечения-наблюдателя