Next 13 /app directory minification bug with hls.js

[Puharesource]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.2.0: Tue Nov  8 21:14:19 PST 2022; root:xnu-8792.60.55.131.1~1/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.11.0
      npm: 8.19.2
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.0.6-canary.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

Not relevant

How are you deploying your application? (if relevant)

next start

Describe the Bug

When using hls.js with the new /app directory, videos played no longer work, because of a syntax error in a blob file, presumable caused by a minification bug.

Running the reproduction project using yarn dev works as expected, it's only when running the project in production that the problem occurs, using yarn build && yarn start.

It looks to me that it's a bug with minifying the project, but turning setting swcMinify to false in next.config.js file changes nothing.

Here's the generated blob resource link generated by hls.js:

blob:http://localhost:3000/ad2e6aa9-8f44-49e6-8925-af7919a1744b

It succeeds with an ok status code of 200, but when parsing the file it encounters issues as it it seems like it's got a syntax error.
Here's the contents of the file:

((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){a.logger[t]=function(e){r("workerLog",{logType:t,message: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);

And the browser console simply logs this error:

ad2e6aa9-8f44-49e6-8925-af7919a1744b:1 Uncaught SyntaxError: Unexpected token '{' (at ad2e6aa9-8f44-49e6-8925-af7919a1744b:1:98)

Expected Behavior

When using hls.js with the new /app directory, videos should work as they did before in the /pages directory and have the same behaviour in both the development server and the production build.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/Puharesource/next-app-directory-with-hls-bug

To Reproduce

1. Build the project

yarn build

2. Run the project

yarn start

3. Navigate to the index page

http://localhost:3000

4. Failure

The video element won't load the video and the console throws an error.

[Puharesource]

This is still an issue on v13.0.6-canary.0. I've updated the reproduction code & original issue to the latest release.

[balazsorban44]

When using hls.js with the new /app directory, videos should work as they did before in the /pages directory and have the same behaviour in both the development server and the production build.

It looks to me that it's a bug with minifying the project, but turning setting swcMinify to false in next.config.js file changes nothing.

These seemed to be incorrect, I could reproduce the problem, and it is an SWC Minifier bug. swcMinify: false should resolve it for now, but we will look into fixing the minifier bug. Thanks for reporting.

[Puharesource]

Hmm strange, I realised I only tested the swcMinify: false on my project and not on the reproduction project, but thanks for looking into it!

[kdy1]

I'm working on this at swc-project/swc#6507 , but I'm not sure how I should create a test case for it.

[kdy1]

Oh seems like this is a same issue as #43292

[kdy1]

This will be fixed by swc-project/swc#6521

[balazsorban44]

Closing as duplicate of #43292

[Puharesource]

@balazsorban44 @kdy1 You closed the issue, because it's the duplicate of this very issue 😅

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.