v1.2.5 throws an error in a next.js production build

[iscekic]

What version of Hls.js are you using?

v1.2.5

What browser (including version) are you using?

Chrome Version 107.0.5304.87 (Official Build) (x86_64)

What OS (including version) are you using?

MacOS Ventura 13.0

Test stream

/

Configuration

{
  maxBufferSize: 10 * 1000 * 1000,
}

Additional player setup steps

/

Checklist

• The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• The issue occurs in the stable client (latest release) on https://hls-js.netlify.com/demo and not just on my page
• The issue occurs in the latest client (main branch) on https://hls-js-dev.netlify.com/demo and not just on my page
• The stream has correct Access-Control-Allow-Origin headers (CORS)
• There are no network errors such as 404s in the browser console when trying to play the stream

Steps to reproduce

1. Add hls.js as a dependency
2. Lazy load the video component using hls.js (https://nextjs.org/docs/advanced-features/dynamic-import)
3. Attempt to play a stream

Expected behaviour

Stream plays

What actually happened?

Stream does not play

Console output

_app-cdf6bbbc63cadad3.js:196 [log] > Debug logs enabled for "Hls instance"
_app-cdf6bbbc63cadad3.js:196 [log] > attachMedia
_app-cdf6bbbc63cadad3.js:196 [log] > [buffer-controller]: Media source opened
_app-cdf6bbbc63cadad3.js:196 [log] > [subtitle-stream-controller]: STOPPED->IDLE
_app-cdf6bbbc63cadad3.js:196 [log] > stopLoad
_app-cdf6bbbc63cadad3.js:196 [log] > [subtitle-stream-controller]: IDLE->STOPPED
_app-cdf6bbbc63cadad3.js:196 [log] > loadSource:REDACTED_URL
_app-cdf6bbbc63cadad3.js:196 [log] > [stream-controller]: Trigger BUFFER_RESET
_app-cdf6bbbc63cadad3.js:196 [log] > [level-controller]: manifest loaded, 3 level(s) found, first bitrate: 2450000
_app-cdf6bbbc63cadad3.js:196 [log] > 1 bufferCodec event(s) expected
_app-cdf6bbbc63cadad3.js:196 [log] > startLoad(-1)
_app-cdf6bbbc63cadad3.js:196 [log] > [level-controller]: switching to level 2 from -1
_app-cdf6bbbc63cadad3.js:196 [log] > [level-controller]: Attempt loading level index 2 with URL-id 0 REDACTED_URL
_app-cdf6bbbc63cadad3.js:196 [log] > [stream-controller]: STOPPED->IDLE
_app-cdf6bbbc63cadad3.js:196 [log] > [subtitle-stream-controller]: STOPPED->IDLE
_app-cdf6bbbc63cadad3.js:196 [log] > [stream-controller]: Level 2 loaded [0,226], cc [0, 0] duration:1357.287
_app-cdf6bbbc63cadad3.js:196 [log] > [buffer-controller]: Updating Media Source duration to 1357.287
_app-cdf6bbbc63cadad3.js:196 [log] > [stream-controller]: Loading fragment 0 cc: 0 of [0-226] level: 2, target: 0
_app-cdf6bbbc63cadad3.js:196 [log] > [stream-controller]: IDLE->FRAG_LOADING
_app-cdf6bbbc63cadad3.js:196 [log] > demuxing in webworker
_app-cdf6bbbc63cadad3.js:196 [log] > [transmuxer-interface, main]: Starting new transmux session for sn: 0 p: -1 level: 2 id: 1
        discontinuity: true
        trackSwitch: true
        contiguous: false
        accurateTimeOffset: true
        timeOffset: 0
        initSegmentChange: true
_app-cdf6bbbc63cadad3.js:196 [log] > [stream-controller]: Loaded fragment 0 of level 2
_app-cdf6bbbc63cadad3.js:196 error Error: mse hls error - otherError - internalException
    at t.<anonymous> (7541.e9af46aaa854771f.js:1:1647)
    at o.emit (ddc9e94f.1b6b059d26ad8f5d.js:1:368752)
    at y.emit (ddc9e94f.1b6b059d26ad8f5d.js:1:238332)
    at y.trigger (ddc9e94f.1b6b059d26ad8f5d.js:1:238402)
    at c.onerror (ddc9e94f.1b6b059d26ad8f5d.js:1:206007)

The exception itself is:

Error: Uncaught SyntaxError: Unexpected token '{'  (blob:http://localhost:3000/4ac92d4b-88cd-4f3e-adbc-04d3746f5906:1)
    at c.onerror (http://localhost:3000/_next/static/chunks/ddc9e94f.1b6b059d26ad8f5d.js:1:206140)

Contents of http://localhost:3000/_next/static/chunks/ddc9e94f.1b6b059d26ad8f5d.js:

((function(){var t={"./src/demux/transmuxer-worker.ts": "./src/demux/transmuxer-worker.ts"(t,e,r){"use strict";r.r(e),r.d(e,{default:()=>o});var i=r(/*! ../demux/transmuxer */ "./src/demux/transmuxer.ts"),n=r(/*! ../events */ "./src/events.ts"),a=r(/*! ../utils/logger */ "./src/utils/logger.ts"),s=r(/*! eventemitter3 */ "./node_modules/eventemitter3/index.js");function o(t){var e=new s.EventEmitter,r=function(e,r){t.postMessage({event:e,data:r})};e.on(n.Events.FRAG_DECRYPTED,r),e.on(n.Events.ERROR,r);var o=function(){var t=function(t){var e=function(e){r("workerLog",{logType:t,message:e})};a.logger[t]=e};for(var e in a.logger)t(e)};t.addEventListener("message",function(n){var s=n.data;switch(s.cmd){case"init":var u=JSON.parse(s.config);t.transmuxer=new i.default(e,s.typeSupported,u,s.vendor,s.id),(0,a.enableLogs)(u.debug,s.id),o(),r("init",null);break;case"configure":t.transmuxer.configure(s.config);break;case"demux":var c=t.transmuxer.push(s.data,s.decryptdata,s.chunkMeta,s.state);(0,i.isPromise)(c)?c.then(function(e){l(t,e)}):l(t,c);break;case"flush":var h=s.chunkMeta,f=t.transmuxer.flush(h);(0,i.isPromise)(f)?f.then(function(e){d(t,e,h)}):d(t,f,h)}})}function l(t,e){if(!(r=e.remuxResult).audio&&!r.video&&!r.text&&!r.id3&&!r.initSegment)return!1;var r,i=[],n=e.remuxResult,a=n.audio,s=n.video;return a&&u(i,a),s&&u(i,s),t.postMessage({event:"transmuxComplete",data:e},i),!0}function u(t,e){e.data1&&t.push(e.data1.buffer),e.data2&&t.push(e.data2.buffer)}function d(t,e,r){e.reduce(function(e,r){return l(t,r)||e},!1)||t.postMessage({event:"transmuxComplete",data:e[0]}),t.postMessage({event:"flush",data:r})}}},e={};function r(i){var n=e[i];if(void 0!==n)return n.exports;var a=e[i]={exports:{}};return t[i].call(a.exports,a,a.exports,r),a.exports}r.m=t,r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,{a:e}),e},r.d=function(t,e){for(var i in e)r.o(e,i)&&!r.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var i=r("./src/demux/transmuxer-worker.ts");return i.default||i})())(self);

Chrome media internals output

No response

[iscekic]

Other notes:

• no issues in v1.2.4
• next.js v13.0.2

If this is as issue for the next.js team, please let me know and close this issue. Thanks! 👍

[robwalch]

Probably a result of upgrading to Webpack 5 (webworkify-webpack) #5007.

Looks like you re-bundling hls.js?

Can you provide a sample page that isolates/reproduces the issue? @iscekic I am not familiar with next.js setup so the steps to reproduce set a pretty high bar. If provided a page that reproduces the issue, I can debug through how the worker JS is composed here, and may be able to come up with a fix.

Workarounds for v1.2.5: disable worker enableWorker: false, or use hls.min.js without re-bundling it.

[robwalch]

Not a fix for the Webpack 5 webworkify port (#5007), but it will at least keep playback running in the event of an exception like this #5016

[iscekic]

Here's a minimal reproduction repo (default nextjs config): https://github.com/iscekic/hlsjs-repro

yarn build
yarn start

It does look like some sort of transformation is happening. I'll look into whether it's possible to selectively disable it for a package.

[iscekic]

Looks like this is an issue with the swc minifier next.js uses. Setting swcMinify: false in next.config.js fixes the issue (see vercel/next.js#42852).

[robwalch]

Hi @iscekic,

Looks like this is an issue with the swc minifier next.js uses.

Thanks for looking in to it and finding a workaround for v1.2.7.

#5036 fixes the issue with your sample app. The code that extracts required module js from runtime exports and injects it into a worker did not expect for the modules to have named functions with quotes ("__wp_module.name"(req){}). The fix replaces the quoted name with function.

[iscekic]

Thank you @robwalch 🙏

[karlhorky]

The new Next.js 13.0.5 version is supposed to fix this, but it seems it does not, the Uncaught SyntaxError: Unexpected token '{' error is still there.

Also reported over here: vercel/next.js#42852 (comment)

[karlhorky]

It seems that @kdy1 made an issue in the SWC repo to track this: swc-project/swc#6504

[kdy1]

This is tracked at swc-project/swc#6504

[kdy1]

Oh 🤣

[kdy1]

I'll fix this within next week

[karlhorky]

New PR in Next.js to update to fixed SWC version (SWC fixed in swc-project/swc#6504):

• chore(next-swc): Update swc_core to v0.45.3 vercel/next.js#43449

[karlhorky]

Looks like the SWC update change was merged to the Next.js canary branch here:

• build(cargo): bump up swc_core, turbopack vercel/next.js#43652

Released in next@13.0.7-canary.4 (probably will be a part of next@13.0.7 stable release):

• https://github.com/vercel/next.js/releases/tag/v13.0.7-canary.4

[iDVB]

Sorry, was there a fix there that now allows HLS.js to work with nextjs without error? @karlhorky
We're using "next": "13.1.6", and getting....

TypeError: hls_js__WEBPACK_IMPORTED_MODULE_1___default(...) is not a constructor

[karlhorky]

That error seems unrelated to the others in this issue. Latest hls.js with latest Next.js version working fine for us since the Next.js version mentioned above.

@iDVB maybe search for related issues or open a new issue with a reproduction on StackBlitz or CodeSandbox?

[robwalch]

Hello!

Version 1.4 is in beta now. We've switched from webpack to rollup for packaging. There are also a few changes to prevent throwing in Node/next.js environments.

Please give it a try an provide feedback. If you are still running into issues with this release let us know and consider providing a sample we can use to reproduce the issue:

https://github.com/video-dev/hls.js/releases/tag/v1.4.0-beta.2

Thanks 👋