renderMedia() inputProps not passed to Composition, skips to Composition's Component

[frussodesigns]

Bug Report 🐛

I am trying to pass Composition-level props dynamically (width, height, fps) from my entry.js.

My inputProps are accessible and work fine in the Composition's component, but are undefined when I try to use them in the ([TypeError]: Cannot read properties of undefined (reading 'fps'))

Here is a minimal version of my setup:

entry.js:

`
const {renderMedia, selectComposition} = require('@remotion/renderer');
const {bundle} = require('@remotion/bundler');
const path = require('path');

const renderVideo = async () => {

// The Config:

const compositionId = 'LyricVideo';

const outputPath = path.join(__dirname, 'output.mp4');

const inputProps = {
    textParameters: {
        textSize: 50,
        textColor: 'rgb(255, 255, 255)',
        glow: true,
        glowAmount: 40,
        glowColor: 'rgb(0, 0, 255)',
        stroke: true,
        strokeColor: 'rgb(0, 255, 0)',
    },
    videoPresets: {
        width: 1920,
        height: 1080,
        fps: 60
    }
}

// #region The Process:

console.log('⏳ Bundling project...');
const bundleLocation = await bundle({
    entryPoint: path.resolve('./src/index.js')
});

console.log('🎬 Rendering video...');

const composition = await selectComposition({
    serveUrl: bundleLocation, // connects to entry composition
    id: compositionId,
    inputProps,
});

await renderMedia({
    composition,
    serveUrl: bundleLocation,
    codec: 'h264',
    outputLocation: outputPath,
    inputProps
});

// #endregion

console.log('✅ Video rendered! Saved to:', outputPath);
};

// Run the render function
renderVideo();
`

VideoMain.js:

`
const {Composition, OffthreadVideo, Audio, staticFile, AbsoluteFill} = require('remotion');
// const {videoPresets, renderVideo} = require('../render')
const {LyricText} = require('./LyricTextComponent');

// Composition to render the lyric video
const LyricVideo = (props) => {
return (
<Composition
component={MainVideo}
durationInFrames={60 * 5} // Placeholder 10s video
fps={props.videoPresets.fps}
width={props.videoPresets.width}
height={props.videoPresets.height}
id="LyricVideo"
{...props}
/>
);
};

const MainVideo = ({textParameters, mediaCdnLinks, animationPreset}) => {
return (

     {/* Background Video */}
     <OffthreadVideo src={mediaCdnLinks.videoFile} loop />
     
     {/* Lyric Layer */}
     <LyricText textParameters={textParameters} animationPreset={animationPreset} />

     
  </AbsoluteFill>

);
};

module.exports = {LyricVideo};
`

My issue is my inputProps work fine in MainVideo() but aren't accessible in the LyricVideo() layer. I need to drive my render's width, height, and fps from my entry.js as per users' presets.

Any help is much appreciated.

[frussodesigns]

An alternative approach I tried is exporting with module.exports my inputProps, but Node doesn't seem to be able to both export via module.exports and run my main render function.