codepen errors with react

Question

I get an error in my codepen ReferenceError: require is not defined I have imported intersection-observer from [email protected]/dist/react-intersection-observer.cjs.js : codepen link

 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

You need to use the umd version of this package. In the filename, cjs stands for common js which needs a require function in the global scope. umd will try to guess what's available while * esm* is for es6 module and you need to use the "add a module" feature of codepen.