Repository navigation
npm run render results in: new Error('Navigating frame was detached') with the provided installation #353
Description
Failing to render
Running the provided npm init @revideo@latest and, installing dependencies and then running npm run render I get:
MINGW64 /d/Projects/revideo-test
$ npm run render
> revideo-test@0.0.0 render
> tsc && node dist/render.js
Rendering video...
D:\Projects\revideo-test\node_modules\puppeteer-core\lib\cjs\puppeteer\cdp\LifecycleWatcher.js:103
this.#terminationDeferred.resolve(new Error('Navigating frame was detached'));
^
Error: Navigating frame was detached
at #onFrameDetached (D:\Projects\revideo-test\node_modules\puppeteer-core\lib\cjs\puppeteer\cdp\LifecycleWatcher.js:103:47)
at D:\Projects\revideo-test\node_modules\puppeteer-core\lib\cjs\third_party\mitt\mitt.js:62:7
at Array.map (<anonymous>)
at Object.emit (D:\Projects\revideo-test\node_modules\puppeteer-core\lib\cjs\third_party\mitt\mitt.js:61:20)
at CdpFrame.emit (D:\Projects\revideo-test\node_modules\puppeteer-core\lib\cjs\puppeteer\common\EventEmitter.js:83:23)
at #removeFramesRecursively (D:\Projects\revideo-test\node_modules\puppeteer-core\lib\cjs\puppeteer\cdp\FrameManager.js:451:15)
at #onClientDisconnect (D:\Projects\revideo-test\node_modules\puppeteer-core\lib\cjs\puppeteer\cdp\FrameManager.js:94:42)
Node.js v20.18.0My installation:
Using npm init @revideo@latest, and the npm i
I get:
up to date, audited 288 packages in 2s
43 packages are looking for funding
run `npm fund` for details
4 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.npm audit:
esbuild <=0.24.2
Severity: moderate
esbuild enables any website to send any requests to the development server and read the response - https://github.com/advisories/GHSA-67mh-4wv8-2f99
fix available via `npm audit fix --force`
Will install @revideo/renderer@1.6.0, which is a breaking change
node_modules/esbuild
vite <=6.1.1
Depends on vulnerable versions of esbuild
node_modules/@revideo/renderer/node_modules/vite
node_modules/vite
@revideo/renderer 0.5.11-alpha.1100 - 0.10.4
Depends on vulnerable versions of vite
node_modules/@revideo/renderer
@revideo/cli >=0.5.11-alpha.1100
Depends on vulnerable versions of @revideo/renderer
node_modules/@revideo/cliBeen trying to solve this with ChatGPT for hours but I'm going in circles...
It's obvious that Puppeteer is crashing but I don't understand why.
I also noticed that in https://docs.re.video/installation-and-setup/ the code provided in the page is different than the two files (specifically project.tsx) that are generated when installing via npm init @revideo@latest.
This is my file:
import {makeProject} from '@revideo/core';
import {Audio, Img, makeScene2D, Video} from '@revideo/2d';
import {all, chain, createRef, waitFor} from '@revideo/core';
/**
* The Revideo scene
*/
const scene = makeScene2D('scene', function* (view) {
const logoRef = createRef<Img>();
yield view.add(
<>
<Video
src={'https://revideo-example-assets.s3.amazonaws.com/stars.mp4'}
size={['100%', '100%']}
play={true}
/>
<Audio
src={'https://revideo-example-assets.s3.amazonaws.com/chill-beat.mp3'}
play={true}
time={17.0}
/>
</>,
);
yield* waitFor(1);
view.add(
<Img
width={'1%'}
ref={logoRef}
src={
'https://revideo-example-assets.s3.amazonaws.com/revideo-logo-white.png'
}
/>,
);
yield* chain(
all(logoRef().scale(40, 2), logoRef().rotation(360, 2)),
logoRef().scale(60, 1),
);
});
/**
* The final revideo project
*/
export default makeProject({
scenes: [scene],
settings: {
// Example settings:
shared: {
size: {x: 1920, y: 1080},
},
},
});And this is the file provided in the "Quickstart" page. It's also a .ts and not a .tsx file:
import {Audio, Img, Video, makeScene2D} from '@revideo/2d';
import {all, chain, createRef, waitFor} from '@revideo/core';
export default makeScene2D(function* (view) {
const logoRef = createRef<Img>();
yield view.add(
<>
<Video
src={'https://revideo-example-assets.s3.amazonaws.com/stars.mp4'}
play={true}
size={['100%', '100%']}
/>
<Audio
src={'https://revideo-example-assets.s3.amazonaws.com/chill-beat.mp3'}
play={true}
time={17.0}
/>
</>,
);
yield* waitFor(1);
view.add(
<Img
width={'1%'}
ref={logoRef}
src={
'https://revideo-example-assets.s3.amazonaws.com/revideo-logo-white.png'
}
/>,
);
yield* chain(
all(logoRef().scale(40, 2), logoRef().rotation(360, 2)),
logoRef().scale(60, 1),
);
});Anyone had this problem before?
Activity
Levezze commentedon Mar 17, 2025
I'll add that I installed Chromium, the Puppeteer versions were different between the project and the
@revideo/renderer@0.10.4I made sure that the versions are the same:
Also checked the puppeteer executable:
$ node -e "console.log(require('puppeteer').executablePath())" C:/Users/levzh/.cache/puppeteer/chrome/win64-131.0.6778.204/chrome-win64/chrome.exeStill running into the exact same error:
derhuebiii commentedon Apr 2, 2025
Same error here. Any hints? :) I used the YouTube shorts demo and it's giving me that error.
derhuebiii commentedon Apr 3, 2025
@Levezze This actually worked:
#343
But it's a manual change in the npm package :(