Bug: Component crashes since 2.5 update

[KubaniGal]

Is there an existing issue for this?

• I have searched the existing issues

Which Mux Elements/Packages does this apply to? Select all that apply

mux-player-react

Which browsers are you using?

Chrome

Which operating systems are you using?

macOS

Description

Hi, ever since mux player react version updated to 2.5 (4 days ago) the component fails, i reverted back to 2.4.1 for now, but i wanted to report this to make sure it handled, this happens both locally and when running github checks.
when i reverted back to 2.4.1 the issue was resolved so it must have been the latest version update
this is the call stack and error:

mux.cjs.js:1 Uncaught TypeError: ue.default.getLevel is not a function
at ../node_modules/mux-embed/dist/mux.cjs.js (mux.cjs.js:1:17456)
at options.factory (react refresh:6:1)
at webpack_require (bootstrap:24:1)
at fn (hot module replacement:61:1)
at ../node_modules/@mux/playback-core/dist/index.cjs.js (index.cjs.js:1:1777)
at options.factory (react refresh:6:1)
at webpack_require (bootstrap:24:1)
at fn (hot module replacement:61:1)
at ../node_modules/@mux/mux-player-react/dist/index.cjs.js (index.cjs.js:1:801)
at options.factory (react refresh:6:1)

Thanks in advance.

Reduced test case

No response

Steps to reproduce

1. delete and reinstall node modules(if needed) with version 2.5
2. run locally and open localhost
3. should see the error

Current Behavior

fails to navigate to app

Expected Behavior

should work as it did in previous versions

Errors

mux.cjs.js:1 Uncaught TypeError: ue.default.getLevel is not a function
at ../node_modules/mux-embed/dist/mux.cjs.js (mux.cjs.js:1:17456)
at options.factory (react refresh:6:1)
at webpack_require (bootstrap:24:1)
at fn (hot module replacement:61:1)
at ../node_modules/@mux/playback-core/dist/index.cjs.js (index.cjs.js:1:1777)
at options.factory (react refresh:6:1)
at webpack_require (bootstrap:24:1)
at fn (hot module replacement:61:1)
at ../node_modules/@mux/mux-player-react/dist/index.cjs.js (index.cjs.js:1:801)
at options.factory (react refresh:6:1)

What version of the package are you using?

2.5

[cjpillsbury]

Hey @KubaniGal we may need some more details to be able to help investigate this, since we have many use cases of mux player react and haven't yet run into this problem. Is there any chance you can share a simplified reproduction case, like a github repo, codesandbox, or the like?

[KubaniGal]

Hey, thanks for the reply..
i hope this will help, this is how we use the player in our project:

  <MuxPlayer
    data-hook={"mux-player"}
    style={{ height: "100%" }}
    streamType="on-demand"
    playbackId={recordedId}
  />

not sure i have more to provide, this works fine in any version that isnt 2.5, in 2.5 the error shows as i attached above

[scmilee]

We are also experiencing this issue when bumping to 2.5.0 from 2.4.x . We are bundling the mux-player-react in with our internal components library and when consuming the library from either our main React app or a create-react-app --template typescript we get the same type error as above.

Interestingly enough, when we directly import and consume mux-player-react in the create-react-app, everything works fine. Additionally, everything works fine in both scenarios when rolling back to 2.4.2. I see in the release for 2.5.0 a d.ts file was removed for mux-embed and maybe that has something to do with it?

Not exactly sure what would cause this nested dependency type issue.

note: mux-player-react is listed as a peerDependency in our internal component library if that makes a difference

[cjpillsbury]

@KubaniGal @scmilee If either of you can share a codebase + steps to reproduce (codesandbox, stackblitz, public github repo) for the issue, that would go a long way. We and our customers use Mux Player across many react setups that appear to be working fine, so there's almost definitely some other detail in the setup (react versions, build tools, etc. etc.) that's causing the issue to show up.

[scmilee]

Here is the sandbox, if the runtime error isn't covering the preview page it's in the terminal. And as mentioned before, direct usage of the lib will work, only seems to be an issue when it's bundled a level down.

Lib repo
ts react app repo

[abhisheklalnediya]

I am also facing this issue.

[czynskee]

I ran into the same issue here. I was able to fix it by adding this to my webpack config:

const config = {
  resolve: {
    extensions: [".js", ".ts", ".tsx"],
    alias: {
      "@mux/mux-player-react": pathLib.resolve(__dirname, "../node_modules/@mux/mux-player-react/dist/index.mjs"),
      }
   }
}

[czynskee]

I ran into this issue as well.

I fixed the problem with this:

const config = {
  resolve: {
    alias: {
      "@mux/mux-player-react": pathLib.resolve(__dirname, "../node_modules/@mux/mux-player-react/dist/index.mjs")
     }
  }
}

I have multiple sub-packages in my project which is why node_modules is one level up from the webpack config. Not sure if that's related to the root cause.

[cjpillsbury]

Hey there folks! We finally were able to prioritize this and dig into root cause. The short version:

• Root cause was actually due to changes in our data sdk library, mux-embed, which have been resolved and released in mux-embed@5.3.1
• You should be able to resolve right now by upgrading to the current latest version of Mux Player (or Mux Player React) and just making sure mux-embed@5.3.1 is installed (aka make sure any yarn.lock, package-lock.json, or npm-shrinkwrap.json don't unintentionally block installing the latest patch of mux-embed).
  • You can confirm the version using npm ls --all mux-embed or yarn list mux-embed
• Although this is a major version bump, it's basically fully backwards compatible, with the following exceptions
  • We've added basic tooltip support, which is on by default. If you want tooltips disabled, set no-tooltips attr or noTooltips prop.
  • "under the hood" with our UI, our menus have been completely rearchitected. There's one advanced use case backwards compatibility bug that's on our radar that we will be resolving ASAP: we do not currently have player-specific css vars if you want to hide any menu item controls. There are currently workarounds if you use this advanced feature: just let me know!
• In our next release of Mux Player, mux-embed@^5.3.1 will be enforced (see PR mentioned here) and the aforementioned menu css var bug will be resolved. This should happen sometime next week, if you just wanted to wait.

Let me know if there are any questions/comments/concerns here or if you're still having issues after doing ☝️. Sorry for the delay on us being able to prioritize this one!