Uncaught ReferenceError: X is not defined

kissjakub commented 1 year ago

Description

video.js 8> Uncaught ReferenceError at video type: 'application/x-mpegURL' after build react-app

Packages:

"react": "^18.2.0", "react-scripts": "5.0.1", "video.js": 8>,

Description:

npm run start - WORKS WELL
npm run build - Uncaught ReferenceError
npm run build - (using video.js 7.x.x) - ALSO WORKS WELL

Code snippet:

player.src({ src: "//vjs.zencdn.net/v/oceans.mp4", type: "application/x-mpegURL", })

Reduced test case

No response

Steps to reproduce

create react app
use video.js 8>
write code that should play video with type: application/x-mpegURL
npm run build
serve build folder
Uncaught ReferenceError - when starting the video

Errors

Uncaught ReferenceError: X is not defined

What version of Video.js are you using?

8>

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

110.0.5481.178

What OS(es) and version(s) does this occur with?

Windows 11

welcome[bot] commented 1 year ago

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

mister-ben commented 1 year ago

Any MP4 wou;dn't work if you loaded it as type application/x-mpegURL. If you're actually using an HLS video, a reduced test case with an unminified Video.js would be useful.

kissjakub commented 1 year ago

Surprisingly it works in video.js 7 - mp4 video higher ^^ & application/x-mpegURL

I normaly use videojs for play application/x-mpegURL videos .. I found another example video:

player.src({ src: "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8", type: "application/x-mpegURL" })

^^ does not work in video.js 8.. but only when I build react app and serve it using express.. If I run react app on my local computer then playback works

I also tried:

clone video.js repo
change @videojs/http-streaming package to 2.16.x version
build video.js
build my react app

And it works ^^ .. So problem may be in @videojs/http-streaming 3>

video-archivist-bot commented 1 year ago

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

for https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8: say @video-archivist-bot save rEmkvw

gkatsev commented 1 year ago

I was able to player that source (player.src({ src: "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8", type: "application/x-mpegURL" })) on https://videojs-preview.netlify.app/sandbox/index.html, which uses Video.js 8 and VHS 3.0.2.

Also, player.src({ src: "//vjs.zencdn.net/v/oceans.mp4", type: "video/mp4", }) works, but player.src({ src: "//vjs.zencdn.net/v/oceans.mp4", type: "application/x-mpegURL", }) does not.

Can you provide a minimal live test case? We likely won't be able to help anymore without one.

video-archivist-bot commented 1 year ago

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

for https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8: say @video-archivist-bot save nwRgbA

kissjakub commented 1 year ago

I was able to player that source (player.src({ src: "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8", type: "application/x-mpegURL" })) on https://videojs-preview.netlify.app/sandbox/index.html, which uses Video.js 8 and VHS 3.0.2.

Also, player.src({ src: "//vjs.zencdn.net/v/oceans.mp4", type: "video/mp4", }) works, but player.src({ src: "//vjs.zencdn.net/v/oceans.mp4", type: "application/x-mpegURL", }) does not.

Can you provide a minimal live test case? We likely won't be able to help anymore without one.

Please see Steps to reproduce.. it occurs only after react app build.. you will need create react app and build it..

video-archivist-bot commented 1 year ago

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

for https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8: say @video-archivist-bot save 5wqxGj

khowling commented 1 year ago

+1. I have the same issue, upgraded to v8, and npm start works fine, but npm run build gives

Uncaught ReferenceError: C is not defined

tzarebczan commented 1 year ago

A quicker workaround may be to replace the x-mpegURL type with video/mp4, which may work per the comment above.

Running into the same issue here at https://github.com/OdyseeTeam/odysee-frontend in an uncommitted branch.

khowling commented 1 year ago

A quicker workaround may be to replace the x-mpegURL type with video/mp4, which may work per the comment above.

Running into the same issue here at https://github.com/OdyseeTeam/odysee-frontend in an uncommitted branch.

Thanks for workaround suggestion! Doesn't work for my reolink feed unfortunately CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED.

tzarebczan commented 1 year ago

We tried this too earlier today, same issue.

Hoping the team can figure this one out soon.

@gkatsev do you think it's in http-streaming or here?

mister-ben commented 1 year ago

Please add a link to a reduced test case. Here the error does not occur in a simple react app: https://codesandbox.io/s/react-videojs-strictmode-v8-gkk5eh?file=/src/App.js

kissjakub commented 1 year ago

@mister-ben https://github.com/kissjakub/videojs-testcase

clone ^^
npm i
npm run build
node server.js
go to: http://localhost:3000/

mister-ben commented 1 year ago

This is in aes-decrypter.

tzarebczan commented 1 year ago

Any more progress on this? It's holding back our upgrade to v8.

mister-ben commented 1 year ago

This is the same as the issue discussed in another project here and here: classes are transpiled in a way that results in broken code in workers. The undefined function is _createClass.

Mapbox's solutions also work here. See https://docs.mapbox.com/mapbox-gl-js/guides/install/#targeting-transpilation-to-es6-with-browserslist for details, but basically use one of these so that Babel leaves ES6 classes intact:

Set the production browserslist to

      ">0.2%",
      "not dead",
      "not op_mini all",
      "not safari < 10",
      "not chrome < 51",
      "not android < 5",
      "not ie < 12"

Or when importing videojs use the ! syntax

// eslint-disable-next-line import/no-webpack-loader-syntax
import videojs from "!video.js";

smithyj commented 1 year ago

good

simida0852 commented 1 year ago

reduced version to 8.2.0 and it works. hope it helps!

Impre-visible commented 1 year ago

reduced version to 8.2.0 and it works. hope it helps!

I just tried with version 8.2.0, same problem. I can play a video when running the app, but if the app is builded, don't work

mister-ben commented 1 year ago

See the comment above, which is also documented at https://videojs.com/guides/webpack/

You will need to ensure the build process does not break the code that is used in service workers. The react boilerplate app's default configuration will not work.

thestanislav commented 1 year ago

For vite users, adding these lines to vite.config.ts helped me

 build: {
        minify: 'terser',
        mangle : {
                toplevel: false,
        }
}

videojs / video.js