remotion 4.0.177 → 4.0.178

package/dist/cjs/Composition.js

@@ -12,6 +12,7 @@ const NativeLayers_js_1 = require("./NativeLayers.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
 const delay_render_js_1 = require("./delay-render.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
+const input_props_serialization_js_1 = require("./input-props-serialization.js");
 const is_player_js_1 = require("./is-player.js");
 const loading_indicator_js_1 = require("./loading-indicator.js");
 const nonce_js_1 = require("./nonce.js");
@@ -78,7 +79,7 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, s
             id,
             folderName,
             component: lazy,
-            defaultProps: defaultProps,
+            defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)((defaultProps !== null && defaultProps !== void 0 ? defaultProps : {})),
             nonce,
             parentFolderName: parentName,
             schema: schema !== null && schema !== void 0 ? schema : null,

package/dist/cjs/ResolveCompositionConfig.js

@@ -56,7 +56,7 @@ const ResolveCompositionConfig = ({ children }) => {
             return controller;
         }
         const { signal } = controller;
-        const promOrNot = (0, resolve_video_config_js_1.resolveVideoConfig)({
+        const result = (0, resolve_video_config_js_1.resolveVideoConfigOrCatch)({
             compositionId,
             calculateMetadata,
             originalProps: combinedProps,
@@ -67,6 +67,17 @@ const ResolveCompositionConfig = ({ children }) => {
             compositionHeight,
             compositionWidth,
         });
+        if (result.type === 'error') {
+            setResolvedConfigs((r) => ({
+                ...r,
+                [compositionId]: {
+                    type: 'error',
+                    error: result.error,
+                },
+            }));
+            return controller;
+        }
+        const promOrNot = result.result;
         if (typeof promOrNot === 'object' && 'then' in promOrNot) {
             setResolvedConfigs((r) => {
                 const prev = r[compositionId];

package/dist/cjs/input-props-serialization.d.ts

@@ -13,3 +13,4 @@ export declare const serializeJSONWithDate: ({ data, indent, staticBase, }: {
     staticBase: string | null;
 }) => SerializedJSONWithCustomFields;
 export declare const deserializeJSONWithCustomFields: <T = Record<string, unknown>>(data: string) => T;
+export declare const serializeThenDeserializeInStudio: (props: Record<string, unknown>) => Record<string, unknown>;

package/dist/cjs/input-props-serialization.js

@@ -1,7 +1,8 @@
 "use strict";
 // Must keep this file in sync with the one in packages/lambda/src/shared/serialize-props.ts!
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deserializeJSONWithCustomFields = exports.serializeJSONWithDate = exports.FILE_TOKEN = exports.DATE_TOKEN = void 0;
+exports.serializeThenDeserializeInStudio = exports.deserializeJSONWithCustomFields = exports.serializeJSONWithDate = exports.FILE_TOKEN = exports.DATE_TOKEN = void 0;
+const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const static_file_js_1 = require("./static-file.js");
 exports.DATE_TOKEN = 'remotion-date:';
 exports.FILE_TOKEN = 'remotion-file:';
@@ -10,29 +11,35 @@ const serializeJSONWithDate = ({ data, indent, staticBase, }) => {
     let customFileUsed = false;
     let mapUsed = false;
     let setUsed = false;
-    const serializedString = JSON.stringify(data, function (key, value) {
-        const item = this[key];
-        if (item instanceof Date) {
-            customDateUsed = true;
-            return `${exports.DATE_TOKEN}${item.toISOString()}`;
-        }
-        if (item instanceof Map) {
-            mapUsed = true;
-            return value;
-        }
-        if (item instanceof Set) {
-            setUsed = true;
+    try {
+        const serializedString = JSON.stringify(data, function (key, value) {
+            const item = this[key];
+            if (item instanceof Date) {
+                customDateUsed = true;
+                return `${exports.DATE_TOKEN}${item.toISOString()}`;
+            }
+            if (item instanceof Map) {
+                mapUsed = true;
+                return value;
+            }
+            if (item instanceof Set) {
+                setUsed = true;
+                return value;
+            }
+            if (typeof item === 'string' &&
+                staticBase !== null &&
+                item.startsWith(staticBase)) {
+                customFileUsed = true;
+                return `${exports.FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
+            }
             return value;
-        }
-        if (typeof item === 'string' &&
-            staticBase !== null &&
-            item.startsWith(staticBase)) {
-            customFileUsed = true;
-            return `${exports.FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
-        }
-        return value;
-    }, indent);
-    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
+        }, indent);
+        return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
+    }
+    catch (err) {
+        throw new Error('Could not serialize the passed input props to JSON: ' +
+            err.message);
+    }
 };
 exports.serializeJSONWithDate = serializeJSONWithDate;
 const deserializeJSONWithCustomFields = (data) => {
@@ -47,3 +54,16 @@ const deserializeJSONWithCustomFields = (data) => {
     });
 };
 exports.deserializeJSONWithCustomFields = deserializeJSONWithCustomFields;
+const serializeThenDeserializeInStudio = (props) => {
+    // Serializing once in the Studio, to catch potential serialization errors before
+    // you only get them during rendering
+    if ((0, get_remotion_environment_js_1.getRemotionEnvironment)().isStudio) {
+        return (0, exports.deserializeJSONWithCustomFields)((0, exports.serializeJSONWithDate)({
+            data: props,
+            indent: 2,
+            staticBase: window.remotion_staticBase,
+        }).serializedString);
+    }
+    return props;
+};
+exports.serializeThenDeserializeInStudio = serializeThenDeserializeInStudio;

package/dist/cjs/resolve-video-config.d.ts

@@ -2,7 +2,7 @@ import type { AnyZodObject } from 'zod';
 import type { CalculateMetadataFunction } from './Composition.js';
 import type { InferProps } from './props-if-has-props.js';
 import type { VideoConfig } from './video-config.js';
-export declare const resolveVideoConfig: ({ calculateMetadata, signal, defaultProps, originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }: {
+type ResolveVideoConfigParams = {
     compositionId: string;
     compositionWidth: number | null;
     compositionHeight: number | null;
@@ -12,4 +12,13 @@ export declare const resolveVideoConfig: ({ calculateMetadata, signal, defaultPr
     signal: AbortSignal;
     defaultProps: Record<string, unknown>;
     originalProps: Record<string, unknown>;
-}) => VideoConfig | Promise<VideoConfig>;
+};
+export declare const resolveVideoConfig: ({ calculateMetadata, signal, defaultProps, originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }: ResolveVideoConfigParams) => VideoConfig | Promise<VideoConfig>;
+export declare const resolveVideoConfigOrCatch: (params: ResolveVideoConfigParams) => {
+    type: 'success';
+    result: VideoConfig | Promise<VideoConfig>;
+} | {
+    type: 'error';
+    error: Error;
+};
+export {};

package/dist/cjs/resolve-video-config.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveVideoConfig = void 0;
+exports.resolveVideoConfigOrCatch = exports.resolveVideoConfig = void 0;
+const input_props_serialization_js_1 = require("./input-props-serialization.js");
 const validate_default_codec_js_1 = require("./validation/validate-default-codec.js");
 const validate_dimensions_js_1 = require("./validation/validate-dimensions.js");
 const validate_duration_in_frames_js_1 = require("./validation/validate-duration-in-frames.js");
@@ -53,8 +54,8 @@ const resolveVideoConfig = ({ calculateMetadata, signal, defaultProps, originalP
                 fps,
                 durationInFrames,
                 id: compositionId,
-                defaultProps,
-                props: (_a = c.props) !== null && _a !== void 0 ? _a : originalProps,
+                defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)(defaultProps),
+                props: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)((_a = c.props) !== null && _a !== void 0 ? _a : originalProps),
                 defaultCodec: defaultCodec !== null && defaultCodec !== void 0 ? defaultCodec : null,
             };
         });
@@ -71,17 +72,33 @@ const resolveVideoConfig = ({ calculateMetadata, signal, defaultProps, originalP
         return {
             ...data,
             id: compositionId,
-            defaultProps: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {},
-            props: originalProps,
+            defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)(defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}),
+            props: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)(originalProps),
             defaultCodec: null,
         };
     }
     return {
         ...data,
         id: compositionId,
-        defaultProps: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {},
-        props: (_a = calculatedProm.props) !== null && _a !== void 0 ? _a : originalProps,
+        defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)(defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}),
+        props: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)((_a = calculatedProm.props) !== null && _a !== void 0 ? _a : originalProps),
         defaultCodec: (_b = calculatedProm.defaultCodec) !== null && _b !== void 0 ? _b : null,
     };
 };
 exports.resolveVideoConfig = resolveVideoConfig;
+const resolveVideoConfigOrCatch = (params) => {
+    try {
+        const promiseOrReturnValue = (0, exports.resolveVideoConfig)(params);
+        return {
+            type: 'success',
+            result: promiseOrReturnValue,
+        };
+    }
+    catch (err) {
+        return {
+            type: 'error',
+            error: err,
+        };
+    }
+};
+exports.resolveVideoConfigOrCatch = resolveVideoConfigOrCatch;

package/dist/cjs/use-lazy-component.js

@@ -28,7 +28,8 @@ const react_1 = __importStar(require("react"));
 // Expected, it can be any component props
 const useLazyComponent = (compProps) => {
     const lazy = (0, react_1.useMemo)(() => {
-        if ('lazyComponent' in compProps) {
+        if ('lazyComponent' in compProps &&
+            typeof compProps.lazyComponent !== 'undefined') {
             return react_1.default.lazy(compProps.lazyComponent);
         }
         if ('component' in compProps) {

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.177";
+export declare const VERSION = "4.0.178";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.177';
+exports.VERSION = '4.0.178';

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -102,9 +102,9 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
             toneMapped,
         });
     }, [toneMapped, currentTime, src, transparent]);
-    const onErr = (0, react_1.useCallback)((e) => {
+    const onErr = (0, react_1.useCallback)(() => {
         if (onError) {
-            onError === null || onError === void 0 ? void 0 : onError(e);
+            onError === null || onError === void 0 ? void 0 : onError(new Error('Failed to load image with src ' + actualSrc));
         }
         else {
             (0, cancel_render_js_1.cancelRender)('Failed to load image with src ' + actualSrc);

package/dist/cjs/video/Video.d.ts

@@ -4,7 +4,7 @@ import type { RemotionMainVideoProps } from './props';
  * @description allows you to include a video file in your Remotion project. It wraps the native HTMLVideoElement.
  * @see [Documentation](https://www.remotion.dev/docs/video)
  */
-export declare const Video: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
+export declare const Video: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onError" | "onEnded" | "autoPlay" | "controls"> & {
     name?: string | undefined;
     volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;
@@ -16,6 +16,7 @@ export declare const Video: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
     delayRenderTimeoutInMilliseconds?: number | undefined;
     loopVolumeCurveBehavior?: import("../audio/use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
     delayRenderRetries?: number | undefined;
+    onError?: ((err: Error) => void) | undefined;
 } & RemotionMainVideoProps & {
     /**
      * @deprecated For internal use only

package/dist/cjs/video/VideoForPreview.js

@@ -19,7 +19,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     const videoRef = (0, react_1.useRef)(null);
     const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration, 
     // @ts-expect-error
-    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, _remotionDebugSeeking, style, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, ...nativeProps } = props;
+    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, _remotionDebugSeeking, style, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, onError, ...nativeProps } = props;
     const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const { fps, durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
@@ -83,24 +83,32 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         }
         const errorHandler = () => {
             var _a;
-            if (current === null || current === void 0 ? void 0 : current.error) {
+            if (current.error) {
                 // eslint-disable-next-line no-console
                 console.error('Error occurred in video', current === null || current === void 0 ? void 0 : current.error);
                 // If user is handling the error, we don't cause an unhandled exception
-                if (props.onError) {
+                if (onError) {
+                    const err = new Error(`Code ${current.error.code}: ${current.error.message}`);
+                    onError(err);
                     return;
                 }
                 throw new Error(`The browser threw an error while playing the video ${src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`);
             }
             else {
-                throw new Error('The browser threw an error');
+                // If user is handling the error, we don't cause an unhandled exception
+                if (onError) {
+                    const err = new Error(`The browser threw an error while playing the video ${src}`);
+                    onError(err);
+                    return;
+                }
+                throw new Error('The browser threw an error while playing the video');
             }
         };
         current.addEventListener('error', errorHandler, { once: true });
         return () => {
             current.removeEventListener('error', errorHandler);
         };
-    }, [props.onError, src]);
+    }, [onError, src]);
     const currentOnDurationCallback = (0, react_1.useRef)();
     currentOnDurationCallback.current = onDuration;
     (0, react_1.useEffect)(() => {

package/dist/cjs/video/VideoForRendering.d.ts

@@ -1,6 +1,6 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
-export declare const VideoForRendering: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
+export declare const VideoForRendering: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onError" | "onEnded" | "autoPlay" | "controls"> & {
     name?: string | undefined;
     volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;
@@ -12,6 +12,7 @@ export declare const VideoForRendering: ForwardRefExoticComponent<Omit<React.Det
     delayRenderTimeoutInMilliseconds?: number | undefined;
     loopVolumeCurveBehavior?: import("../audio/use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
     delayRenderRetries?: number | undefined;
+    onError?: ((err: Error) => void) | undefined;
 } & {
     readonly onDuration: (src: string, durationInSeconds: number) => void;
 } & RefAttributes<HTMLVideoElement>>;

package/dist/cjs/video/VideoForRendering.js

@@ -203,6 +203,6 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             };
         }, [src, onDuration, delayRenderRetries, delayRenderTimeoutInMilliseconds]);
     }
-    return (0, jsx_runtime_1.jsx)("video", { ref: videoRef, ...props, onError: onError });
+    return (0, jsx_runtime_1.jsx)("video", { ref: videoRef, ...props });
 };
 exports.VideoForRendering = (0, react_1.forwardRef)(VideoForRenderingForwardFunction);

package/dist/cjs/video/props.d.ts

@@ -10,7 +10,7 @@ export type RemotionMainVideoProps = {
     _remotionInternalNativeLoopPassed?: boolean;
     _remotionDebugSeeking?: boolean;
 };
-export type RemotionVideoProps = Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'autoPlay' | 'controls' | 'onEnded' | 'nonce'> & {
+export type RemotionVideoProps = Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'autoPlay' | 'controls' | 'onEnded' | 'nonce' | 'onError'> & {
     name?: string;
     volume?: VolumeProp;
     playbackRate?: number;
@@ -22,6 +22,7 @@ export type RemotionVideoProps = Omit<React.DetailedHTMLProps<React.VideoHTMLAtt
     delayRenderTimeoutInMilliseconds?: number;
     loopVolumeCurveBehavior?: LoopVolumeCurveBehavior;
     delayRenderRetries?: number;
+    onError?: (err: Error) => void;
 };
 type DeprecatedOffthreadVideoProps = {
     /**
@@ -38,7 +39,7 @@ export type OffthreadVideoProps = {
     volume?: VolumeProp;
     playbackRate?: number;
     muted?: boolean;
-    onError?: React.ReactEventHandler<HTMLVideoElement | HTMLImageElement>;
+    onError?: (err: Error) => void;
     acceptableTimeShiftInSeconds?: number;
     allowAmplificationDuringRender?: boolean;
     toneFrequency?: number;
@@ -47,6 +48,7 @@ export type OffthreadVideoProps = {
     pauseWhenBuffering?: boolean;
     loopVolumeCurveBehavior?: LoopVolumeCurveBehavior;
     delayRenderTimeoutInMilliseconds?: number;
+    delayRenderRetries?: number;
     /**
      * @deprecated For internal use only
      */

package/dist/esm/index.mjs

@@ -138,7 +138,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.177";
+var VERSION = "4.0.178";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -527,6 +527,41 @@ var staticFile = (path) => {
 // src/input-props-serialization.ts
 var DATE_TOKEN = "remotion-date:";
 var FILE_TOKEN = "remotion-file:";
+var serializeJSONWithDate = ({
+  data,
+  indent,
+  staticBase
+}) => {
+  let customDateUsed = false;
+  let customFileUsed = false;
+  let mapUsed = false;
+  let setUsed = false;
+  try {
+    const serializedString = JSON.stringify(data, function(key, value) {
+      const item = this[key];
+      if (item instanceof Date) {
+        customDateUsed = true;
+        return `${DATE_TOKEN}${item.toISOString()}`;
+      }
+      if (item instanceof Map) {
+        mapUsed = true;
+        return value;
+      }
+      if (item instanceof Set) {
+        setUsed = true;
+        return value;
+      }
+      if (typeof item === "string" && staticBase !== null && item.startsWith(staticBase)) {
+        customFileUsed = true;
+        return `${FILE_TOKEN}${item.replace(staticBase + "/", "")}`;
+      }
+      return value;
+    }, indent);
+    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
+  } catch (err) {
+    throw new Error("Could not serialize the passed input props to JSON: " + err.message);
+  }
+};
 var deserializeJSONWithCustomFields = (data) => {
   return JSON.parse(data, (_, value) => {
     if (typeof value === "string" && value.startsWith(DATE_TOKEN)) {
@@ -538,6 +573,16 @@ var deserializeJSONWithCustomFields = (data) => {
     return value;
   });
 };
+var serializeThenDeserializeInStudio = (props) => {
+  if (getRemotionEnvironment().isStudio) {
+    return deserializeJSONWithCustomFields(serializeJSONWithDate({
+      data: props,
+      indent: 2,
+      staticBase: window.remotion_staticBase
+    }).serializedString);
+  }
+  return props;
+};
 
 // src/config/input-props.ts
 var didWarnSSRImport = false;
@@ -711,8 +756,8 @@ var resolveVideoConfig = ({
         fps,
         durationInFrames,
         id: compositionId,
-        defaultProps,
-        props: c.props ?? originalProps,
+        defaultProps: serializeThenDeserializeInStudio(defaultProps),
+        props: serializeThenDeserializeInStudio(c.props ?? originalProps),
         defaultCodec: defaultCodec ?? null
       };
     });
@@ -729,19 +774,33 @@ var resolveVideoConfig = ({
     return {
       ...data,
       id: compositionId,
-      defaultProps: defaultProps ?? {},
-      props: originalProps,
+      defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
+      props: serializeThenDeserializeInStudio(originalProps),
       defaultCodec: null
     };
   }
   return {
     ...data,
     id: compositionId,
-    defaultProps: defaultProps ?? {},
-    props: calculatedProm.props ?? originalProps,
+    defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
+    props: serializeThenDeserializeInStudio(calculatedProm.props ?? originalProps),
     defaultCodec: calculatedProm.defaultCodec ?? null
   };
 };
+var resolveVideoConfigOrCatch = (params) => {
+  try {
+    const promiseOrReturnValue = resolveVideoConfig(params);
+    return {
+      type: "success",
+      result: promiseOrReturnValue
+    };
+  } catch (err) {
+    return {
+      type: "error",
+      error: err
+    };
+  }
+};
 
 // src/ResolveCompositionConfig.tsx
 import {
@@ -788,7 +847,7 @@ var ResolveCompositionConfig = ({ children }) => {
       return controller;
     }
     const { signal } = controller;
-    const promOrNot = resolveVideoConfig({
+    const result = resolveVideoConfigOrCatch({
       compositionId,
       calculateMetadata,
       originalProps: combinedProps,
@@ -799,6 +858,17 @@ var ResolveCompositionConfig = ({ children }) => {
       compositionHeight,
       compositionWidth
     });
+    if (result.type === "error") {
+      setResolvedConfigs((r) => ({
+        ...r,
+        [compositionId]: {
+          type: "error",
+          error: result.error
+        }
+      }));
+      return controller;
+    }
+    const promOrNot = result.result;
     if (typeof promOrNot === "object" && "then" in promOrNot) {
       setResolvedConfigs((r) => {
         const prev = r[compositionId];
@@ -3825,7 +3895,7 @@ var portalNode = () => {
 import React16, {useMemo as useMemo23} from "react";
 var useLazyComponent = (compProps) => {
   const lazy = useMemo23(() => {
-    if ("lazyComponent" in compProps) {
+    if ("lazyComponent" in compProps && typeof compProps.lazyComponent !== "undefined") {
       return React16.lazy(compProps.lazyComponent);
     }
     if ("component" in compProps) {
@@ -3926,7 +3996,7 @@ var Composition = ({
       id,
       folderName,
       component: lazy,
-      defaultProps,
+      defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
       nonce: nonce5,
       parentFolderName: parentName,
       schema: schema ?? null,
@@ -5786,9 +5856,9 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const onErr = useCallback13((e) => {
+  const onErr = useCallback13(() => {
     if (onError) {
-      onError?.(e);
+      onError?.(new Error("Failed to load image with src " + actualSrc));
     } else {
       cancelRender("Failed to load image with src " + actualSrc);
     }
@@ -5837,6 +5907,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     pauseWhenBuffering,
     showInTimeline,
     loopVolumeCurveBehavior,
+    onError,
     ...nativeProps
   } = props2;
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
@@ -5899,21 +5970,28 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       return;
     }
     const errorHandler = () => {
-      if (current?.error) {
+      if (current.error) {
         console.error("Error occurred in video", current?.error);
-        if (props2.onError) {
+        if (onError) {
+          const err = new Error(`Code ${current.error.code}: ${current.error.message}`);
+          onError(err);
           return;
         }
         throw new Error(`The browser threw an error while playing the video ${src}: Code ${current.error.code} - ${current?.error?.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`);
       } else {
-        throw new Error("The browser threw an error");
+        if (onError) {
+          const err = new Error(`The browser threw an error while playing the video ${src}`);
+          onError(err);
+          return;
+        }
+        throw new Error("The browser threw an error while playing the video");
       }
     };
     current.addEventListener("error", errorHandler, { once: true });
     return () => {
       current.removeEventListener("error", errorHandler);
     };
-  }, [props2.onError, src]);
+  }, [onError, src]);
   const currentOnDurationCallback = useRef13();
   currentOnDurationCallback.current = onDuration;
   useEffect22(() => {
@@ -6314,8 +6392,7 @@ var VideoForRenderingForwardFunction = ({
   }
   return jsx32("video", {
     ref: videoRef,
-    ...props2,
-    onError
+    ...props2
   });
 };
 var VideoForRendering = forwardRef10(VideoForRenderingForwardFunction);

package/dist/esm/no-react.mjs

@@ -245,27 +245,31 @@ var serializeJSONWithDate = ({
   let customFileUsed = false;
   let mapUsed = false;
   let setUsed = false;
-  const serializedString = JSON.stringify(data, function(key, value) {
-    const item = this[key];
-    if (item instanceof Date) {
-      customDateUsed = true;
-      return `${DATE_TOKEN}${item.toISOString()}`;
-    }
-    if (item instanceof Map) {
-      mapUsed = true;
-      return value;
-    }
-    if (item instanceof Set) {
-      setUsed = true;
+  try {
+    const serializedString = JSON.stringify(data, function(key, value) {
+      const item = this[key];
+      if (item instanceof Date) {
+        customDateUsed = true;
+        return `${DATE_TOKEN}${item.toISOString()}`;
+      }
+      if (item instanceof Map) {
+        mapUsed = true;
+        return value;
+      }
+      if (item instanceof Set) {
+        setUsed = true;
+        return value;
+      }
+      if (typeof item === "string" && staticBase !== null && item.startsWith(staticBase)) {
+        customFileUsed = true;
+        return `${FILE_TOKEN}${item.replace(staticBase + "/", "")}`;
+      }
       return value;
-    }
-    if (typeof item === "string" && staticBase !== null && item.startsWith(staticBase)) {
-      customFileUsed = true;
-      return `${FILE_TOKEN}${item.replace(staticBase + "/", "")}`;
-    }
-    return value;
-  }, indent);
-  return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
+    }, indent);
+    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
+  } catch (err) {
+    throw new Error("Could not serialize the passed input props to JSON: " + err.message);
+  }
 };
 var deserializeJSONWithCustomFields = (data) => {
   return JSON.parse(data, (_, value) => {

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.177";
+var VERSION = "4.0.178";
 export {
   VERSION
 };

package/package.json

@@ -1,13 +1,13 @@
 {
+  "repository": {
+    "url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
+  },
   "name": "remotion",
-  "version": "4.0.177",
-  "description": "Render videos in React",
+  "version": "4.0.178",
+  "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
   "module": "dist/esm/index.mjs",
-  "repository": {
-    "url": "https://github.com/remotion-dev/remotion"
-  },
   "bugs": {
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
@@ -18,18 +18,10 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@jonny/eslint-config": "3.0.281",
     "@testing-library/react": "14.0.0",
     "@happy-dom/global-registrator": "14.5.1",
     "happy-dom": "14.5.1",
-    "@types/node": "18.14.6",
-    "@types/react": "18.3.1",
-    "@types/react-dom": "18.3.0",
-    "eslint": "8.56.0",
-    "eslint-plugin-require-extensions": "^0.1.2",
     "jsdom": "21.1.0",
-    "prettier": "3.2.5",
-    "prettier-plugin-organize-imports": "3.2.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "vitest": "0.31.1",
@@ -77,6 +69,7 @@
       ]
     }
   },
+  "homepage": "https://www.remotion.dev/docs/remotion",
   "scripts": {
     "formatting": "prettier src --check",
     "lint": "eslint src --ext ts,tsx",