Uncaught ReferenceError: X is not defined

[kissjakub]

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

1. create react app
2. use video.js 8>
3. write code that should play video with type: application/x-mpegURL
4. npm run build
5. serve build folder
6. 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]

👋 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]

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]

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:

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

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

[video-archivist-bot]

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]

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]

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]

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]

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]

+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]

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]

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]

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]

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]

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

1. clone ^^
2. npm i
3. npm run build
4. node server.js
5. go to: http://localhost:3000/

[mister-ben]

This is in aes-decrypter.

[tzarebczan]

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

[mister-ben]

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]

good

[simida0852]

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

[Impre-visible]

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]

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]

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

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