Move @mux/mux-player-react from dependencies to optional peerDependency

The wildcard `"*"` in dependencies caused consumers to silently resolve
to old mux-player versions where subtitles don't load on Chrome.

Now consumers who use <VideoPlayer/> must explicitly install
@mux/mux-player-react (>=2.5.0), ensuring they get a working version.
Consumers who don't use <VideoPlayer/> won't pull in mux at all.

Other changes needed to support mux v3 in devDependencies:
- Update devDependencies to ^3.11.4
- Switch moduleResolution to "Bundler" (mux v3 uses package.json exports)
- Add paths mapping in CJS tsconfig (CommonJS can't use Bundler resolution)
- Fix import paths to use .js extensions consistently
- Enable skipLibCheck (mux v3 types reference untyped mux-embed)

Author: stefanoverna

package-lock.json

@@ -111,7 +111,7 @@
   "homepage": "https://github.com/datocms/react-datocms",
   "devDependencies": {
     "@biomejs/biome": "^1.6.3",
-    "@mux/mux-player-react": ">=2.5.0 <3",
+    "@mux/mux-player-react": "^3.11.4",
     "@types/enzyme": "^3.10.8",
     "@types/enzyme-to-json": "^1.5.4",
     "@types/jest": "^29.5.11",
@@ -147,11 +147,16 @@
     "tsc:esm": "tsc --project ./tsconfig.esnext.json"
   },
   "peerDependencies": {
+    "@mux/mux-player-react": ">=2.5.0",
     "react": ">= 16.12.0"
   },
+  "peerDependenciesMeta": {
+    "@mux/mux-player-react": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@datocms/content-link": "^0.3.13",
-    "@mux/mux-player-react": "*",
     "datocms-listen": "^1.0.2",
     "datocms-structured-text-generic-html-renderer": "^5.0.0",
     "datocms-structured-text-utils": "^5.1.6",

package.json

@@ -5,3 +5,4 @@ declare module 'react' {
     fetchPriority?: 'auto' | 'low' | 'high';
   }
 }
+

react-extras.d.ts

@@ -1,6 +1,6 @@
 // biome-ignore lint/style/useImportType: wrong warning
 import React, { HTMLAttributeReferrerPolicy } from 'react';
-import type { ResponsiveImageType } from '../Image';
+import type { ResponsiveImageType } from '../Image/index.js';
 import { buildRegularSource, buildWebpSource, priorityProp } from './utils.js';
 
 export type SRCImagePropTypes = {

src/SRCImage/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ResponsiveImageType } from '../Image';
+import type { ResponsiveImageType } from '../Image/index.js';
 
 export function priorityProp(
   fetchPriority?: string,

src/SRCImage/utils.tsx

@@ -1,6 +1,6 @@
-import type { MuxPlayerProps } from '@mux/mux-player-react/.';
+import type { MuxPlayerProps } from '@mux/mux-player-react';
 
-import type { Video } from '../VideoPlayer';
+import type { Video } from '../VideoPlayer/index.js';
 
 type Maybe<T> = T | null;
 type Possibly<T> = Maybe<T> | undefined;

src/useVideoPlayer/index.ts

@@ -8,6 +8,13 @@
     "declaration": false,
 
     "module": "CommonJS",
+    "moduleResolution": "Node",
+    "paths": {
+      "@mux/mux-player-react": ["./node_modules/@mux/mux-player-react/dist/types/index.d.ts"],
+      "@mux/mux-player-react/lazy": ["./node_modules/@mux/mux-player-react/dist/types/lazy.d.ts"],
+      "@mux/mux-player": ["./node_modules/@mux/mux-player/dist/types/index.d.ts"]
+    },
+    "skipLibCheck": true,
 
     "isolatedModules": true
   }

tsconfig.commonjs.json

@@ -30,12 +30,12 @@
     "target": "ES2016",
 
     // Module resolution
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
     "esModuleInterop": true,
 
     // Type-checking
     "strict": true,
-    "skipLibCheck": false,
+    "skipLibCheck": true,
     "noImplicitAny": true,
     "resolveJsonModule": true,
     "strictNullChecks": true,