title: Uncaught Invariant Violation: Target container is not a DOM element at Object.render
body: <p>I'm trying to run the code but i'm getting <em>Uncaught Invariant Violation: Target container is not a DOM element.</em> error. I'm testing the below code</p>
  
  <p><strong>In Slider.jsx</strong></p>
  
  <pre><code>      render() {
          const { activeSlide, prevSlide, sliderReady } = this.state;
          return (
            &lt;div className={classNames('slider', { 's--ready': sliderReady })}&gt;
              &lt;p className="slider__top-heading"&gt;Travelers&lt;/p&gt;
              &lt;div className="slider__slides"&gt;
                {this.props.slides.map((slide, index) =&gt; (
                  &lt;div
                    className={classNames('slider__slide', { 's--active': activeSlide === index, 's--prev': prevSlide === index  })}
                    key={slide.city}
                    &gt;
                    &lt;div className="slider__slide-content"&gt;
                      &lt;h3 className="slider__slide-subheading"&gt;{slide.country || slide.city}&lt;/h3&gt;
                      &lt;h2 className="slider__slide-heading"&gt;
                        {slide.city.split('').map(l =&gt; &lt;span&gt;{l}&lt;/span&gt;)}
                      &lt;/h2&gt;
                      &lt;p className="slider__slide-readmore"&gt;read more&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div className="slider__slide-parts"&gt;
                      {[...Array(this.IMAGE_PARTS).fill()].map((x, i) =&gt; (
                        &lt;div className="slider__slide-part" key={i}&gt;
                          &lt;div className="slider__slide-part-inner" style={{ backgroundImage: `url(${slide.img})` }} /&gt;
                        &lt;/div&gt;
                      ))}
                    &lt;/div&gt;
                  &lt;/div&gt;
                ))}
              &lt;/div&gt;
              &lt;div className="slider__control" onClick={() =&gt; this.changeSlides(-1)} /&gt;
              &lt;div className="slider__control slider__control--right" onClick={() =&gt; this.changeSlides(1)} /&gt;
            &lt;/div&gt;
          );
        }
      }
  
      const slides = [
        {
          city: 'Paris',
          country: 'France',
          img: require('assets/images/img4.jpg'),
        },
       {
          city: 'Banglore',
          country: 'India',
          img: require('assets/images/img5.jpg'),
        },
  
      ];
  
      ReactDOM.render(&lt;Slider slides={slides} /&gt;, document.querySelector('#root'));
  </code></pre>
  
  <p><strong>In INDEX.js</strong></p>
  
  <pre><code>    ReactDOM.render(
          &lt;App&gt;
          &lt;Router history={hist}&gt;
          &lt;Switch&gt;
              &lt;Route path="/" component={Components} /&gt;
          &lt;/Switch&gt;
      &lt;/Router&gt;
      &lt;/App&gt;
      , document.getElementById("root"));
  </code></pre>
  
  <p><strong>In index.html</strong></p>
  
  <pre><code>    &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
      &lt;script src="bundle.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p><strong>In App.js</strong></p>
  
  <pre><code>    function App() {
        return (
          &lt;div className="App"&gt;
            &lt;Router history={hist}&gt;
          &lt;Switch&gt;
              &lt;Route path="/" component={Components} /&gt;
          &lt;/Switch&gt;
      &lt;/Router&gt;
      &lt;Slider/&gt;
          &lt;/div&gt;  
        );
      }
  
      export default App;
  </code></pre>
  
  <p><strong>Error showing:</strong>
      Uncaught Invariant Violation: Target container is not a DOM element.
          at invariant (<a href="http://localhost:3000/static/js/1.chunk.js:225988:19" rel="nofollow noreferrer">http://localhost:3000/static/js/1.chunk.js:225988:19</a>)
          at Object.render (<a href="http://localhost:3000/static/js/1.chunk.js:248161:40" rel="nofollow noreferrer">http://localhost:3000/static/js/1.chunk.js:248161:40</a>)
          at Module../src/index.js (<a href="http://localhost:3000/static/js/main.chunk.js:3170:50" rel="nofollow noreferrer">http://localhost:3000/static/js/main.chunk.js:3170:50</a>)
          at <strong>webpack_require</strong> (<a href="http://localhost:3000/static/js/bundle.js:782:30" rel="nofollow noreferrer">http://localhost:3000/static/js/bundle.js:782:30</a>)
          at Object.0 (<a href="http://localhost:3000/static/js/main.chunk.js:3715:18" rel="nofollow noreferrer">http://localhost:3000/static/js/main.chunk.js:3715:18</a>)
          at <strong>webpack_require</strong> (<a href="http://localhost:3000/static/js/bundle.js:782:30" rel="nofollow noreferrer">http://localhost:3000/static/js/bundle.js:782:30</a>)
          at checkDeferredModules (<a href="http://localhost:3000/static/js/bundle.js:46:23" rel="nofollow noreferrer">http://localhost:3000/static/js/bundle.js:46:23</a>)
          at Array.webpackJsonpCallback [as push] (<a href="http://localhost:3000/static/js/bundle.js:33:19" rel="nofollow noreferrer">http://localhost:3000/static/js/bundle.js:33:19</a>)</p>