remotion-dev/remotion · error

should not have rendered this modal

Error message

should not have rendered this modal

What it means

The RenderStatusModal in Remotion Studio displays the progress of a render job (client or server). It assumes it is only ever opened for a job that is actually running or finished. If it is somehow rendered while the job's status is still 'idle', it throws 'should not have rendered this modal' as an internal invariant assertion.

Source

Thrown at packages/studio/src/components/RenderModal/RenderStatusModal.tsx:108

		} else {
			removeRenderJob(job).catch((err) => {
				showNotification(`Could not remove job: ${err.message}`, 2000);
			});
		}
	}, [job, isClientJob, removeClientJob, setSelectedModal]);

	const onClickOnCancel = useCallback(() => {
		if (isClientJob) {
			cancelClientJob(job.id);
		} else {
			cancelRenderJob(job).catch((err) => {
				showNotification(`Could not cancel job: ${err.message}`, 2000);
			});
		}
	}, [job, isClientJob, cancelClientJob]);

	if (job.status === 'idle') {
		throw new Error('should not have rendered this modal');
	}

	const errorDetails =
		job.status === 'failed'
			? job.error.stack?.split('\n')[0].includes(job.error.message)
				? job.error.stack
				: [job.error.message, job.error.stack].filter(Boolean).join('\n')
			: null;

	return (
		<ModalContainer onOutsideClick={onQuit} onEscape={onQuit}>
			<ModalHeader title={`Render ${job.compositionId}`} />
			<div style={container}>
				{job.status === 'failed' ? (
					<>
						<p>The render failed because of the following error:</p>
						<div className={HORIZONTAL_SCROLLBAR_CLASSNAME} style={codeBlock}>
							{errorDetails}

View on GitHub (pinned to a6a7485a9a)

Solutions

1. Only open RenderStatusModal after confirming the job status is not 'idle' (check job.status in the parent component)
2. Reset/close the modal whenever a job is cancelled or reset to idle
3. Reproduce in the Studio and report as a bug to Remotion if triggered by normal UI flow — this is an internal invariant
4. Ensure no stale job object is passed (e.g. cached state after reload); re-fetch the current job before rendering

Example fix

// before
<RenderStatusModal job={job} />
// after
{job.status !== 'idle' && <RenderStatusModal job={job} />}

if (job && job.status !== 'idle') {
  setModalOpen(true);
}

const isRenderableJob = (j: Job): j is Job & {status: Exclude<Job['status'], 'idle'>} =>
  j.status !== 'idle';

try {
  openRenderStatusModal(job);
} catch (err) {
  if (err instanceof Error && err.message === 'should not have rendered this modal') {
    // job was reset to idle; close the modal silently
    setModalOpen(false);
    return;
  }
  throw err;
}

When it happens

Trigger: Opening the render status modal while job.status === 'idle' — e.g. the modal is mounted before the job transitions to 'rendering', or the modal remains mounted after the job was reset to idle.

Common situations: A race where the modal opens before the render starts; cancelling/resetting a job while the modal is visible; Studio bugs after hot reload; custom extensions triggering the modal for a job that never started.

Related errors

• Expected video config
• TimelineFontWeightField rendered for non-font-weight field
• Studio server port should be a number. Got ${typeof port} ($
• Studio server port should be a number between 1 and 65535. G
• Job is not running

AI-assisted analysis of remotion-dev/remotion@a6a7485a9a (2026-09-02). Data as JSON: /api/errors/0d6ebd732eca376e. Report an issue: GitHub.