iframe component does not render anything

[lukBakTsh]

lightbox-react:
^0.3.7

Code:

import React, { Component } from 'react';
import Lightbox from 'lightbox-react';
import 'lightbox-react/style.css';

const Video = () => (
  <iframe
    title="cats"
    width="560"
    height="315"
    src="https://www.youtube.com/embed/5dsGWM5XGdg"
    style={{
      maxWidth: '97%',
      position: 'absolute',
      left: 0,
      right: 0,
      margin: 'auto',
      top: '50%',
      transform: 'translateY(-50%)',
    }}
  />
);

const images = [
  Video,
  '//placekitten.com/1500/500',
  '//placekitten.com/4000/3000',
  '//placekitten.com/800/1200',
  '//placekitten.com/1500/1500',
];

export class LightboxComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      photoIndex: 0,
      isOpen: false,
    };
  }

  render() {
    const { photoIndex, isOpen } = this.state;

    return (
      <div>
        <button type="button" onClick={() => this.setState({ isOpen: true })}>
          Open Lightbox
        </button>

        {isOpen && (
          <Lightbox
            mainSrc={images[photoIndex]}
            nextSrc={images[(photoIndex + 1) % images.length]}
            prevSrc={images[(photoIndex + images.length - 1) % images.length]}
            onCloseRequest={() => this.setState({ isOpen: false })}
            onMovePrevRequest={() =>
              this.setState({
                photoIndex: (photoIndex + images.length - 1) % images.length,
              })
            }
            onMoveNextRequest={() =>
              this.setState({
                photoIndex: (photoIndex + 1) % images.length,
              })
            }
          />
        )}
      </div>
    );
  }
}

export default LightboxComponent;

Effect:
images inside ril-inner are rendered correctly, but div with iframe does not appear inside ril-inner.

<div class="ril-inner ril__inner">

  <!-- <div> with <iframe> does not appear here -->

  <img class="ril-image-current ril__image" ... />
  <img class="ril-image-prev ril__imagePrev ril__image" ... />
</div>

Everything works fine on the demo page (iframe with div appear inside ril-inner) http://treyhuffine.com/lightbox-react/

<div class="inner ril-inner inner___1rfRQ">
  <img class="image-next ril-image-next imageNext___1uRqJ image___2FLq2" ... />

  <!-- it is OK! -->
  <div class="image-current ril-image-current image___2FLq2">
    <iframe ...></iframe>
  </div>

  <img class="image-prev ril-image-prev imagePrev___F6xVQ image___2FLq2" .../>
</div>

I can not tell what are the differences between the version presented on the demo and v0.3.7. If anyone knows, please let me know :)

[treyhuffine]

Hi @lukBakTsh, just to confirm, you are importing the CSS right?

[wwwhatley]

@treyhuffine I'm having the same issue, what is even weirder, is that it works on local, but not on the server. When I inspect the asset that is supposed to be present, it doesn't even show the iframe, whereas it does on local.... I am importing the css files as well.

[treyhuffine]

@wwwhatley when you say on the server, do you mean the HTML that is sent from SSR?

[jzfre]

nope, it can be served statically with NGINX (build with CRA). It's hard to debug as package is downloaded and source is not part of the code in node_modules.

[jzfre]

You can see the error, when you serve the demo with build:demo of the project with NGINX. Modify /etc/hosts, create some dummy domain and create NGINX config

[jzfre]

The code is acting differently on localhost and "production" (server build) probably because of compiling.

Problematic part of code is in "addItem" function

if (isReact.component(DisplayItem) || isReact.element(DisplayItem)) {
addComponent(srcType, imageClass, baseStyle);
}

it eveluates as "false" when builded for production when rendering iframe, so nothing is rendered.

Simple solution is not to render iframe as functional component const Video = () => {...}
But as a PureComponent - class Video extends React.PureComponent...