#Module not found: Can't resolve '@remotion/compositor-darwin-x64'

11 messages · Page 1 of 1 (latest)

jagged fiber
#

hey,
im using shipfast saas template together with some remotion code from other projects. the remotion code worked by itself, but since i merged it with shipfast, it stopped working.

error from browser console (error in webstorm is in the file):

Module not found: Can't resolve '@remotion/compositor-linux-arm64-gnu'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@remotion/renderer/dist/index.js
./node_modules/@remotion/lambda/dist/api/download-media.js
./node_modules/@remotion/lambda/dist/index.js
./deploy/regions.ts
./libs/remotion/get-render-or-make.ts
./app/api/render/route.ts
hydration-error-info.js:63 ./node_modules/@remotion/studio/dist/components/get-zod-if-possible.js:41:1
Module not found: Can't resolve '@remotion/zod-types'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@remotion/studio/dist/components/EditorContexts.js
./node_modules/@remotion/studio/dist/Studio.js
./node_modules/@remotion/studio/dist/previewEntry.js
./node_modules/@remotion/cli/dist/studio.js
./node_modules/@remotion/cli/dist/index.js
./node_modules/@remotion/lambda/dist/cli/index.js
./node_modules/@remotion/lambda/dist/internals.js
./node_modules/@remotion/lambda/dist/index.js
./deploy/regions.ts
./libs/remotion/get-render-or-make.ts
./app/api/render/route.ts
hydration-error-info.js:63 ./node_modules/esbuild/lib/main.d.ts
Module parse failed: Unexpected token (1:7)
> export type Platform = 'browser' | 'node' | 'neutral'
| export type Format = 'iife' | 'cjs' | 'esm'
| export type Loader = 'base64' | 'binary' | 'copy' | 'css' | 'dataurl' | 'default' | 'empty' | 'file' | 'js' | 'json' | 'jsx' | 'text' | 'ts' | 'tsx'


my code:
api/render/route.ts```
import { getRenderOrMake } from "@/libs/remotion/get-render-or-make";
import {NextResponse} from 'next/server'
import {createRouteHandlerClient} from '@supabase/auth-helpers-nextjs'
import {cookies} from 'next/headers'

export async function POST(req) {
console.log("inside render api")

const supabase = createRouteHandlerClient({ cookies });
const { data } = await supabase.auth.getSession();
const { session } = data;

if (session) {
const body = await req.json();
// const body = JSON.parse(req.body);

try {
  console.log(body)
  const { inputId, compId, inputProps } = body;

  console.log("success1")
  const prog = await getRenderOrMake({ inputId, compId, inputProps });
  // res.status(200).json(prog);
  return NextResponse.json(prog, { status: 200 });
} catch (e) {
  console.error(e);
  return NextResponse.json(
      { error: "Something went wrong" },
      { status: 500 }
  );
}

} else {
// Not Signed in
NextResponse.json({ error: "Not signed in" }, { status: 401 });
}
}


RenderHandler.ts is in file
📎 message.txt 📎 message.txt
#

get-render-or-make.ts

import {getFunctions, renderMediaOnLambda, speculateFunctionName} from '@remotion/lambda/client'
import {
  getRender,
  lockRender,
  saveRender,
  updateRenderWithFinality,
} from "@/libs/db/renders";
import { getRenderProgressWithFinality } from "./get-render-progress-with-finality";
import { getRandomRegion } from "@/deploy/regions";

export const getRenderOrMake = async ({ inputId, compId, inputProps }) => {
  console.log('ASDASDASDASDASDASDASDASDDSA')
  const cache = await getRender(inputId);
  let _renderId = cache?.renderId ?? null;
  let _region = cache?.region ?? null;
  try {
    if (cache) {
      const progress = await getRenderProgressWithFinality(cache);
      return progress;
    }
    const region = getRandomRegion();

    const [first] = await getFunctions({
      compatibleOnly: false,
      region,
    });
    console.log(`Username=${inputId} Region=${region}`);
    await lockRender({
      region,
      inputId,
      inputProps,
      compId,
      functionName: first.functionName,
    });

/*
    const { renderId, bucketName } = await renderMediaOnLambda({
      region,
      functionName: first.functionName,
      serveUrl: process.env.REMOTION_SITE_ID,
      composition: compId,
      inputProps,
      codec: "h264",
      imageFormat: "jpeg",
      maxRetries: 1,
      framesPerLambda: 80,
      privacy: "public",
      deleteAfter: '30-days',
      downloadBehavior: {
        type: 'download',
        fileName: null
      }
    });
*/
    const { renderId, bucketName } = await renderMediaOnLambda({
      codec: "h264",
      functionName: speculateFunctionName({
        diskSizeInMb: "2048",
        memorySizeInMb: "3008",
        timeoutInSeconds: "240",
      }),
      region: "eu-central-1",
      serveUrl: "remotion1",
      composition: compId,
      inputProps: inputProps,
      framesPerLambda: 10,
      deleteAfter: '30-days',
      downloadBehavior: {
        type: "download",
        fileName: "video.mp4",
      },
    });

    _renderId = renderId;
    _region = region;
    await saveRender({
      region,
      inputId,
      renderId,
      bucketName,
    });
    const render = await getRender(inputId);
    if (!render) {
      throw new Error(`Didn't have render for ${inputId}`);
    }
    const progress = await getRenderProgressWithFinality(render);
    return progress;
  } catch (err) {
    console.log(`Failed to render video for ${inputId}`, err.stack);
    if (_renderId && _region) {
      await updateRenderWithFinality(_renderId, inputId, _region, {
        type: "error",
        errors: err.stack,
      });
    }
    return {
      finality: {
        type: "error",
        errors: err.stack,
      },
      type: "finality",
    };
  }
};

export const getFinality = (renderProgress) => {
  if (renderProgress.outputFile) {
    return {
      type: "success",
      url: renderProgress.outputFile,
    };
  }
  if (renderProgress.fatalErrorEncountered) {
    return {
      type: "error",
      errors: renderProgress.errors[0].stack,
    };
  }
  return null;
};
glass fable
#

Oh shoot, I'm about to do the exactly the same so leaving my comment here to subscribe in case I get the same error...

jagged fiber
glass fable
#

Yeah, I got a working project in the Remotion Next.js template and I've just got the ShipFast boilerplate. I was just about to start moving stuff form the Remotion template into the ShipFast one. I'll let you know if I was able to get it working.

jagged fiber
#

my code is just more modified now

jagged fiber
#

i figured it out

#

the issue was: i was using things from @remotion/lambda that weren't availbable in @remotion/lambda/client

#

maybe @raw forge can take a look at this

# 
import {getFunctions} from '@remotion/lambda'``` these 2 i was using and weren't available in lambda/client