React import, export behavior

- 1 answer

Ad
import React from 'react';
import PopupPlaylist from "./popup-playlist.jsx";
import YouTubeGetter from './youtube-getter.jsx';
import FontAwesome from 'react-fontawesome';
import $ from 'jquery';
import _ from 'underscore';

class PlayerContainer extends React.Component {
  constructor(props) {
    super(props)

    // YouTubeGetter is not available here
    // But you can do <FontAwesome ...?>
    debugger

After reviewing the available documents, I don't understand why the variable YouTubeGetter is undefined at the bottom. The module that's being imported looks like this.

class YouTubeGetter extends React.Component {
  constructor(props) {
    super(props)
    this.getVideoId = this.getVideoId.bind(this);
    this.getSongInfos = this.getSongInfos.bind(this);
  }

  ... 

  render() {
    return null;
  }
}

export default YouTubeGetter;
Ad

Answer

Ad

It was not a problem with the code, but I was debugging it wrong.

When you simply put a debugger statement there and check for the YouTubeGetter variable, the variable does not exist because it's been garbage collected by the compiler as it was never referenced. If you put var x = new YouTubeGetter() above the debugger statement, you can access x without a problem.

Ad
source: stackoverflow.com
Ad