React native web will not compile with react-native-video

[hellolgl]

ERROR in ./node_modules/react-native-video/Video.js 55:7
Module parse failed: Unexpected token (55:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
|

seek = (time, tolerance = 100) => {
| if (isNaN(time)) {throw new Error('Specified time is not a number');}
|

package.json

"react-native-video": "^5.2.0",

[hueniverse]

We are removing support for DOM.

[Leena-Sharma-rsys]

Can you add support for react-native web instead of having React-native-dom as this library is not maintained now.

[haveamission]

@hueniverse React Native Web is not React Native DOM. React Native Web is much more strongly supported and used, including by large orgs such as Twitter.

[haveamission]

@Leena-Sharma-rsys Expo supports expo-av, which seems to have video support:

https://docs.expo.dev/versions/v46.0.0/sdk/av/

[realchrisolin]

How is "we are removing support for DOM" a valid resolution for this issue?

The 5.2.0 version of this plugin is effectively broken and throws this "Unexpected token (55:7)" error without any clear or intuitive resolution. Please provide a viable workaround or reopen this issue so a fix can be prioritized.

[freeboub]

@realchrisolin i agree, please provide a fix for this issue...

[joshlbaker]

Bump! Should I downgrade or what?

[evoactivity]

At some point in the future I am going to want react-native-web support. I'm willing to work on that myself, but it is 100% a spare time thing so if anyone else needs support and can work on it straight away go ahead. I'll keep an eye on this issue and update if I make any progress.

[framerate]

To anyone seeing this issue, what is the fix in 2024?

Have some platform checks and load a different video player for the web?

[joshlbaker]

To anyone seeing this issue, what is the fix in 2024?

Have some platform checks and load a different video player for the web?

Yep this is what my team had to do. Cleanest way is to create a Video.web.tsx file and add your web-only logic there.

import {createElement} from 'react-native-web';

export default function Video({src, height, width}) {
  const attrs = {
    src,
    height,
    width,
    controls: true,
    autoPlay: false,
    ...
  };

  return createElement('video', attrs);
}

[freeboub]

@joshlbaker if you can open a pull request for that, it wouild be wonderfull !

[zoriya]

I wrote a video.web component that is mostly a 1to1 mapping of rnv props, if there is interest I can upstream it, but it does not contain all features of rnv (no ads or drm support for example).
I also need HLS and advanced subtitles support, so I use hls.js and some subtitle renderer in js. I think subtitles renderer don't need to be integrated here as long as a HTMLVideoElement ref is still available, but I think having hls built-in is good.