fix!(Video): upgrade react-player to v3 and split Video/Markdown out of the main barrel by dreamwasp · Pull Request #3439 · Codecademy/gamut

dreamwasp · 2026-09-23T19:33:24Z

Overview

Upgrades react-player to v3 to drop the vulnerable deepmerge@4.3.1 (CVE-2026-93753, prototype pollution, no upstream fix), and moves Video out of the main barrel so consumers who never render it, including webpack 4 apps, aren't broken by react-player v3's dependency tree. Replaces the patch-only approach in #3438.

Dependencies

react-player — bumps ^2.16.0 to ^3.4.0, which removes deepmerge from the tree (yarn why deepmerge confirms)
@vidstack/react, react-player — now peerDependencies (and devDependencies) at ~1.12.12 and ^3.4.0; consumers who use Video install them themselves
@vidstack/react — pinned to ~1.12.12 because 1.14+ uses static class blocks that break Jest in repos whose Babel config can't parse them

Video

Video — now imported from @codecademy/gamut/Video, not the main barrel; a legacy subpath package (packages/gamut/Video/package.json, no "exports") keeps it resolvable by webpack 4. Breaking: import path change for Video consumers
Video — adapts to the react-player v3 API (src replaces url, YouTube color config) and drops the removed ReactPlayerWithWrapper type
Video — sets an accessible title on the provider iframe (videoTitle, or "Video player" as a fallback) as soon as it's inserted. react-player v3 puts title on its custom element, so the inner iframe was unnamed and failed axe frame-title (e.g. portal-app's About page e2e)

Markdown

Markdown — Iframe and MarkdownVideo overrides are now opt-in via iframeOverride / videoOverride, so Markdown no longer statically imports Video. Without opting in, <iframe> and <video> tags render as plain tags. Breaking: consumers relying on the polished embed must pass the overrides
Iframe, MarkdownVideo — re-exported from @codecademy/gamut/Video so opting in doesn't touch the main barrel

Tests

Video.test.tsx — the react-player mock now mimics v3 (iframe inserted after mount, no title, onReady never called); adds a case for the default title
Markdown.test.tsx — covers the opt-in overrides

Docs / versioning

Installation.mdx, Video.mdx, Markdown.mdx — document the subpath import, peer dependencies, opt-in overrides, and Jest/Babel setup for newer vidstack
.nx/version-plans — adds a version plan

PR Checklist

Related to designs: N/A
Related to JIRA ticket: N/A
Version plan added/updated
I have run this code to verify it works
This PR includes unit tests for the code change
This PR includes testing instructions for the code change

Testing Instructions

yarn jest packages/gamut/src/Video packages/gamut/src/Markdown and yarn tsc --noEmit -p packages/gamut pass.
yarn why deepmerge shows it is no longer under react-player.
In Storybook, open Molecules / Video and play a YouTube and a Vimeo story. In DevTools, the player <iframe> has a title attribute and the Console has no errors.
In Storybook, open Organisms / Markdown and check the video override story renders the Gamut player, and that a plain markdown <iframe> renders as a bare tag.
Consumer checks against a build of this branch:
- mono (Jest): yarn nx run ui-login-or-register:test:ci passes with @vidstack/react@~1.12.12 and react-player@^3.4.0 installed.
- Codecademy (webpack 4): yarn build:app completes. It never imports Video directly, but @codecademy/brand does.
- portal-app e2e: AboutPage.cy.ts passes the axe frame-title check

Linked consumer PRs:
https://github.com/codecademy-engineering/mono/pull/13776
https://github.com/codecademy-engineering/Codecademy/pull/41230

deepmerge@4.3.1 (transitive via react-player, used in the Video component) has no upstream fix for a prototype pollution vuln. Patch mergeObject's unsafe-key check to reject __proto__/constructor/prototype keys, and pin all in-tree deepmerge ranges to the patched build via yarn resolutions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

This reverts commit 68b313c. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

… dependency react-player@2.x pulled in deepmerge@4.3.1, which has a prototype pollution vuln (CVE-2026-93753, CVSS 8.7) with no upstream fix. react-player@3 dropped deepmerge entirely in favor of native media elements, so upgrading removes the vulnerable dependency from @Codecademy/gamut's tree rather than patching it. - url prop renamed to src; youtube config no longer nests under playerVars; vimeo's config.title is now a boolean (native title overlay toggle), not a string, so the accessible video title is carried solely by the existing title prop - dropped the dead ReactPlayerWithWrapper type (v3's ref now forwards to the underlying HTMLVideoElement, not a wrapper element) - react-player is ESM-only in v3, so Jest needs it in transformIgnorePatterns; Video.test.tsx now mocks react-player directly (matching the existing pattern in Markdown.test.tsx) instead of rendering the real Vimeo/YouTube custom elements, which don't mount under jsdom Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

nx-cloud · 2026-09-23T19:34:29Z

View your CI Pipeline Execution ↗ for commit 2a7ffd6

☁️ Nx Cloud last updated this comment at 2026-10-09 19:25:39 UTC

…onsumers react-player@3's dependency tree (tiktok-video-element, vimeo-video-element, etc.) relies on package.json "exports" subpaths that legacy bundlers like webpack 4 can't resolve. Because @Codecademy/gamut's main entry re-exports every component from one flat barrel, ANY consumer resolving '@Codecademy/gamut' was forced to resolve react-player's exports-map-only subpaths at build time, even if they never rendered <Video> - this is what broke Codecademy's build despite it not importing Video anywhere. - Remove `export * from './Video'` from the main barrel; add a legacy subpath package (packages/gamut/Video/package.json, no "exports" field needed) so `@Codecademy/gamut/Video` still resolves via plain Node resolution. Consumers using Video need this one import path change. - Markdown's Iframe/MarkdownVideo overrides also statically imported Video via a relative path, so any Markdown consumer was equally exposed regardless of the Video split. Made these opt-in via new `iframeOverride`/`videoOverride` props instead of always-on defaults; without opting in, <iframe>/<video> tags in markdown now render as plain tags rather than the polished Video component. Iframe/MarkdownVideo are re-exported from the Video subpath so opting in doesn't touch the main barrel either. - Updated gamut's own internal Video usages (styleguide stories, code-connect) to the new subpath import. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

…verrides Video.mdx now points at '@Codecademy/gamut/Video' instead of the main barrel, and explains why. Markdown.mdx gets a new Video overrides section covering iframeOverride/videoOverride, corrects the outdated skipDefaultOverrides claim about iframe, and adds stories/example.md copy showing both the opted-in and bare-tag fallback states. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

codecov · 2026-09-24T13:16:46Z

⚠️ JUnit XML file not found

The CLI was unable to find any JUnit XML files to upload.
For more help, visit our troubleshooting guide.

Now that Video lives behind the @Codecademy/gamut/Video subpath, the main barrel no longer imports either player library, so consumers who don't use Video shouldn't have to install them. - Move @vidstack/react and react-player from dependencies to optional peerDependencies; keep them as devDependencies for the repo's own build, tests, and styleguide. - Document the install step in the Video docs and the version plan, and add a pointer comment at the top of src/Video/index.tsx for anyone following a "Can't resolve" bundler error.

LinKCoding

Nice!
I left some comments, nothing's blocking, but I do think some points could be touched up :)

LinKCoding · 2026-10-07T20:42:22Z

-        createVideoOverride('video', {
-          component: MarkdownVideo,
-        }),
+      videoOverride && createVideoOverride('video', videoOverride),


Not sure the state of markdown updates, but would rather use objects to supply arguments.
esp for this one since the function would imply the 'video' is always the tag that is being supplied to createVideoOverride (as compared to more generic createTagOverride)

LinKCoding · 2026-10-07T20:43:16Z

  it('loads a video with a vimeo URL', async () => {
    const { view } = renderView({
-      videoUrl: 'https://vimeo.com/145702525',
+      videoUrl: 'https://vimeo.com/1218916076',


lol this is so funny
optionally: update videoTitle here 😂

LinKCoding · 2026-10-08T13:46:32Z


+### Installation
+
+`Video`'s player libraries are peer dependencies of `@codecademy/gamut`, so they aren't installed automatically. They're only needed if you import from `@codecademy/gamut/Video`; the main `@codecademy/gamut` barrel never loads them, so apps that don't use `Video` can skip them. Add them alongside Gamut to use `Video` (or the Markdown `Iframe`/`MarkdownVideo` overrides):


I think this language can be cleaned up a bit by explicitly stating what "they" are, and seems to repeat itself a bit. Something like:

Video's player libraries are peer dependencies of @codecademy/gamut, so they aren't installed automatically. If the Video component is needed, then import from @codecademy/gamut/Video. Add the following packages alongside Gamut to use Video (or the Markdown Iframe/MarkdownVideo overrides):

LinKCoding · 2026-10-08T13:59:17Z

+yarn add @vidstack/react@~1.12.12 react-player@^3.4.0
+```
+
+Pin the versions: `@vidstack/react`'s npm `latest` tag still points to 0.6.x (1.x is published under `next`), so a bare `yarn add @vidstack/react` installs 0.6, which lacks the `@vidstack/react/player/layouts/default` subpath `Video` imports and fails with `Module not found`. Versions 1.14+ use static class blocks, which break Jest in repos whose Babel config can't parse them (see "Babel and newer syntax" on the Installation page).


Maybe add a sample package.json for what a user should expect and do after installing vidstack and react-player?

// package.json ... "dependencies": { ... "@vidstack/react": "~1.12.12", } "resolutions": { ... "@vidstack/react": "~1.12.12", } ...

is the resolution something that gamut should also do?

i don't even think we need the resolution at all tbh, i;ll add an example though!

LinKCoding · 2026-10-08T14:10:03Z

+import { Video } from '@codecademy/gamut/Video';
+```
+
+`Video` is imported from `@codecademy/gamut/Video`, not the main `@codecademy/gamut` barrel. It depends on `react-player`, whose own dependency tree relies on package.json `"exports"` subpaths that legacy bundlers (e.g. webpack 4) can't resolve — keeping it off the main barrel means consumers who don't use `Video` never need to resolve that tree. To render video content embedded in `Markdown` text, see the [Video overrides](../Organisms/Markdown/Markdown.mdx#video-overrides) section on the Markdown docs page instead of importing `Video` directly.


Video is imported from @codecademy/gamut/Video, not the main @codecademy/gamut barrel.

This repeats a lot of info in the first newly added paragraph (where imports are happening)

It depends on react-player, whose own dependency tree relies on package.json "exports" subpaths that legacy bundlers (e.g. webpack 4) can't resolve — keeping it off the main barrel means consumers who don't use Video never need to resolve that tree.

Adding a sample package.json could potentially remove the need for this explanation.

Video overrides

This linking doesn't work for me :\

codecademydev · 2026-10-09T19:26:36Z

📬 Published Alpha Packages:

Package	Version	npm	Diff
`@codecademy/gamut`	`73.6.3-alpha.2b3b95.0`	npm	diff
`@codecademy/gamut-icons`	`10.2.1-alpha.2b3b95.0`	npm	diff
`@codecademy/gamut-illustrations`	`1.1.1-alpha.2b3b95.0`	npm	diff
`@codecademy/gamut-kit`	`3.0.26-alpha.2b3b95.0`	npm	diff
`@codecademy/gamut-patterns`	`1.1.1-alpha.2b3b95.0`	npm	diff
`@codecademy/gamut-styles`	`21.2.1-alpha.2b3b95.0`	npm	diff
`@codecademy/gamut-tests`	`7.1.1-alpha.2b3b95.0`	npm	diff
`@codecademy/variance`	`1.1.1-alpha.2b3b95.0`	npm	diff
`eslint-plugin-gamut`	`3.1.1-alpha.2b3b95.0`	npm	diff

github-actions · 2026-10-09T19:29:27Z

🚀 Styleguide deploy preview ready!

Preview URL: https://6ac9408d6d030ce5cd615f47--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/6ac9408d6d030ce5cd615f47

dreamwasp and others added 4 commits September 23, 2026 12:41

Revert "fix(deepmerge): patch prototype pollution CVE-2026-93753"

004a882

This reverts commit 68b313c. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

test(Video): swap vimeo fixture url in test and story

3c31d4d

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

dreamwasp mentioned this pull request Sep 23, 2026

fix(deepmerge): patch prototype pollution CVE-2026-93753 #3438

Draft

2 of 3 tasks

dreamwasp changed the title ~~fix(Video): upgrade react-player to v3 to remove vulnerable deepmerge dependency~~ fix(Video): upgrade react-player to v3 and split Video/Markdown out of the main barrel Sep 24, 2026

sh0ji mentioned this pull request Sep 24, 2026

fix: narrow sideEffects globs so unused components tree-shake #3436

Closed

3 of 7 tasks

dreamwasp and others added 6 commits October 5, 2026 12:09

Merge branch 'main' into cass-gmt-react-player-v3

a1e01ce

version plan

b5b49c7

peer deps back

4999da4

add back title

1f4bcbc

more tweaks to title

55c00d0

dreamwasp changed the title ~~fix(Video): upgrade react-player to v3 and split Video/Markdown out of the main barrel~~ fix!(Video): upgrade react-player to v3 and split Video/Markdown out of the main barrel Oct 7, 2026

dreamwasp marked this pull request as ready for review October 7, 2026 18:42

dreamwasp requested a review from a team as a code owner October 7, 2026 18:42

dreamwasp requested review from jakemhiller and sh0ji October 7, 2026 19:50

LinKCoding approved these changes Oct 8, 2026

View reviewed changes

dreamwasp added 4 commits October 9, 2026 09:29

remove workaround for now

c9c440d

shadow-root-aware

e45a0da

swap markdown videos

70ba9ac

swap stories

2a7ffd6

dreamwasp requested a review from LinKCoding October 9, 2026 19:29


		### Installation

		`Video`'s player libraries are peer dependencies of `@codecademy/gamut`, so they aren't installed automatically. They're only needed if you import from `@codecademy/gamut/Video`; the main `@codecademy/gamut` barrel never loads them, so apps that don't use `Video` can skip them. Add them alongside Gamut to use `Video` (or the Markdown `Iframe`/`MarkdownVideo` overrides):

Conversation

dreamwasp commented Sep 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

PR Checklist

Testing Instructions

Uh oh!

nx-cloud Bot commented Sep 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Sep 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ JUnit XML file not found

Uh oh!

LinKCoding left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecademydev commented Oct 9, 2026

Uh oh!

github-actions Bot commented Oct 9, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dreamwasp commented Sep 23, 2026 •

edited

Loading

nx-cloud Bot commented Sep 23, 2026 •

edited

Loading

codecov Bot commented Sep 24, 2026 •

edited

Loading