(index):1 Uncaught SyntaxError: Unexpected token ( 08:10:52.316 (index):1 Uncaught SyntaxError: Unexpected token ( 08:10:52.353 (index):1 Uncaught SyntaxError: Unexpected token (

[jfrux]

So I'm getting these hard to track down errors when working with video.
Wondering if there is a way you guys have found to find the issue or track it down?
Can't find a place to put a breakpoint really so not sure how to approach it.

Uncaught SyntaxError: Unexpected token ( (index):1

When switching to react-dom it seems to work okay. Guessing its something specific to the limitations of the renderer but I'm not quite sure where to debug it.

[raphamorim]

Hi @joshuairl, Can you share with me the code for it and the webpack config?
I'll try to reproduce it locally.

[jfrux]

Gah… I found the problem! Was a plugin that was using like umm somehow `<video oncanplay=function ( ) { } />`. Hmm It didn’t like that syntax in development it failed, but in production it worked.  Guessing its doing something specific for development.

…

On Apr 30, 2018, 9:34 AM -0400, Raphael Amorim ***@***.***>, wrote: Hi @joshuairl, Can you share with me the code for it and the webpack config? I'll try to reproduce it locally. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[raphamorim]

Maybe worked only in PROD because Webpack with PROD environment tries to uglify and sometimes change the reference of functions/variables and fixed that automatically. I don't know exactly why. It's just a guess.

Since we discovered it's not related with React-TV. I'm closing this issue 👍
thx

[jfrux]

import React, { Component, createElement } from 'react'
import PropTypes from 'prop-types'
import { findDOMNode } from 'react-tv'
import vendorPropTypes from './vendor-prop-types'

class HTML5 extends Component {
  static propTypes = vendorPropTypes

  get instance() {
    return this._player
  }

  get node() {
    return findDOMNode(this._player)
  }

  play() {
    return this._player.play()
  }

  pause() {
    this._player.pause()
  }

  stop() {
    this._player.pause(0)
    this._player.currentTime = 0
  }

  seekTo(currentTime) {
    if (this._player.readyState > 0) {
      this._player.currentTime = currentTime
    }
  }

  mute(muted) {
    this._player.muted = muted
  }

  setVolume(volume) {
    this._player.volume = volume
  }

  get _playerEvents() {
    return {
      onCanPlay: this._handleCanPlay,
      onPlay: this._handlePlay,
      onPlaying: this._isNotLoading,
      onPause: this._handlePause,
      onEnded: this._handleEnded,
      onWaiting: this._isLoading,
      onError: this._handleError,
      onProgress: this._handleProgress,
      onLoadedMetadata: this._handleDuration,
      onTimeUpdate: this._handleTimeUpdate,
      onVolumeChange: this._handleVolumeChange,
    }
  }

  _isLoading = () => {
    this.props.isLoading(true)
  }

  _isNotLoading = () => {
    this.props.isLoading(false)
  }

  _handleCanPlay = () => {
    this.props.onReady()
  }

  _handlePlay = () => {
    this.props.onPlay(true)
    this._isNotLoading()
  }

  _handlePause = () => {
    this.props.onPause(false)
  }

  _handleEnded = () => {
    this.props.onEnded(false)
  }

  _handleError = e => {
    this.props.onError(e)
    this._isNotLoading()
  }

  _handleProgress = ({ target: { buffered, duration } }) => {
    let progress = 0

    if (duration > 0 && buffered.length) {
      progress = buffered.end(buffered.length - 1) / duration
    }

    this.props.onProgress(progress)
  }

  _handleDuration = ({ target: { duration } }) => {
    this.props.onDuration(duration)
  }

  _handleTimeUpdate = ({ target: { currentTime } }) => {
    this.props.onTimeUpdate(currentTime)
  }

  _handleVolumeChange = ({ target: { volume, muted } }) => {
    this.props.onMute(muted)
    this.props.onVolumeChange(volume)
  }

  render() {
    const { vendor, src, extraProps } = this.props

    return createElement(vendor, {
      ref: c => (this._player = c),
      src,
      ...extraProps,
      ...this._playerEvents,
    })
  }
}

export default HTML5

Is there a better way to do this for react-tv compatibility?
I'm new to react.