Attempted import error: 'hls.js' does not contain a default export

[laugharn]

Link to the code that reproduces this issue

https://github.com/laugharn/next-mux-repro

To Reproduce

1. Start the application in development (pnpm run dev)
2. Go to http://localhost:3000
3. See the import in in app/page.jsx causes the compile error

Current vs. Expected behavior

The export from hls.js should be detected correctly. I'm using the @muxinc library for demo purposes because that's how this emerged in our project, but importing hls.js directly has the same effect.

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.6.0: Fri Sep 15 13:41:28 PDT 2023; root:xnu-8796.141.3.700.8~1/RELEASE_ARM64_T6020
Binaries:
  Node: 18.18.2
  npm: 9.8.1
  Yarn: N/A
  pnpm: 8.10.0
Relevant Packages:
  next: 14.0.2-canary.9
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Additional context

This looks like it was introduced in 14.0.2-canary.1 and my assumption is #57784 specifically.

[EliHood]

@laugharn wouldn't it make sense for muxinc library to be compatible with next 14, not the other way around ? also don't think this is a next js specific issue... but i could be wrong.

[laugharn]

It is compatible with Next 14 up to 14.0.2-canary.0 and then the bundling behavior changes. It stands to reason that other packages besides hls.js (the actual problem dependency) are breaking. If the end result is these packages should change their build process fair enough but the outcome here is the result of a change in Next.

[EliHood]

I reproduced your issue successfully.... hmm will poke around with this...

Update: This issue exists for next 14 as well, not just canary.

{
  "dependencies": {
    "@mux/mux-video-react": "0.8.0",
    "next": "14.0.0",
    "react": "^18.2.0",
    "react-dom": "latest"
  },
  "scripts": {
    "build": "next build",
    "dev": "next",
    "start": "next start"
  }
}

Failed to compile
./node_modules/@mux/playback-core/dist/index.mjs
Attempted import error: 'hls.js' does not contain a default export (imported as 'ue').
This error occurred during the build process and can only be dismissed by fixing the error.

I downgraded to mux-video-react 0.7.0, and the error is not happening (i see hello world now),

{
  "dependencies": {
    "@mux/mux-video-react": "0.7.0",
    "next": "14.0.2-canary.1",
    "react": "^18.2.0",
    "react-dom": "latest"
  },
  "scripts": {
    "build": "next build",
    "dev": "next",
    "start": "next start"
  }
}

Just not convinced if this is a next js issue, it seems like a mux-video-react issue. But maybe im missing something.

[skworden]

I forgot to add "use client"; and it caused the same error.

[luwes]

thanks @laugharn!

#57784 seems to be causing Next.js builds to fail with some packages

hls.js does have a default export as you can see here
https://cdn.jsdelivr.net/npm/hls.js@1.4.12/dist/hls.mjs

[LiamWinterton]

Also experiencing this issue

[Vintotan]

I also experience this issue when using next.js version 14.0.2. Downgrading to next.js version 13.5.6 fixed this issue for me.

[GabrielDucharme]

Downgrading to 14.0 worked for me

…

On Tue, Nov 14, 2023 at 11:55 AM Vintotan ***@***.***> wrote: I also experience this issue when next.js version 14.0.2. Downgrading to next.js version 13.5.6 fixed this issue for me. — Reply to this email directly, view it on GitHub <#57964 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABREILQ72BIKTL6TMIOITMTYEOPA7AVCNFSM6AAAAAA63VB4BSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMJQGY4DQOJZGQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

-- *Gabriel Ducharme* (246) 233 8002

[hyperapps]

OK... I had this same problem. I systematically backed down mux player version by version... the last stable release of mux player that does not have this error is 1.11.3 (1.11.4 is where the break starts). This is true of all version of nextjs (13 and 14 work fine with 1.11.3 or earlier). For now, I backed down to 1.11.3 until this gets fixed.

[timomedia]

Same bug with nextjs 14.0.3

[EliHood]

So is it agreed that this is a mux video issue, not a next js issue ? or were not sure yet ?

[timomedia]

So is it agreed that this is a mux video issue, not a next js issue ? or were not sure yet ?

It's not a mux problem, I use another player rather than mux and it has the same error. Version 14.0.1 does not have this error

[baltie]

Same problem with @arcgis/core library. Works fine in v14.0.1, but not since v14.0.2. Same error regarding missing a default export, but the default export is there.

[lukasIO]

pretty sure that this is the same issue as I raised in #58592 and is also outlined in #57962.
Details in are in the issue.
I checked the dist of hls.js and it has that same pattern of a scoped module.exports that seems to cause this, starting with 14.0.2

[vatoer]

downgrading to 14.01 worked form

[mitchuman]

issue still persists on 14.0.3. Downgrading to 14.0.1 worked

[maxhelsel]

stepped down to version 14.0.1 and the error is gone, mux player works fine now.

@EliHood The issue is Next.js, and the version to blame is 14.0.2; this problem will prevent many people from keeping up with current versions and bugfixes - this issue has been open for weeks, it's been reproduced, it's affecting multiple libraries, and it would be really great if this could be given some level of priority

[EliHood]

Thanks for all of these findings guys, will try to investigate / debug this issue further.

[lukasIO]

Someone opened a PR already with a potential fix #58572

[EliHood]

Yeah Lukas, we can wait for that to get merged, i think that might resolve it. Thanks for sharing that.

[mfwgenerics]

Also seeing this with @arcgis/core. Presents as:

./node_modules/@arcgis/core/widgets/support/widgetUtils.js
Attempted import error: '@esri/arcgis-html-sanitizer' does not contain a default export 

Boy did this ruin my afternoon! Downgrading to 14.0.1 has fixed it.

[muhaimincs]

Also seeing this with @arcgis/core. Presents as:

./node_modules/@arcgis/core/widgets/support/widgetUtils.js
Attempted import error: '@esri/arcgis-html-sanitizer' does not contain a default export 

Boy did this ruin my afternoon! Downgrading to 14.0.1 has fixed it.

How do you solve this? Downgrade to 14.0.1?

[jamesvclements]

@muhaimincs should be fixed in next@v14.0.4-canary.33

[ode96-dev]

@jamesvclements upgrading to next@v14.0.4 solved the issue. Thanks

[github-actions]

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