Internal server error: Failed to resolve import "@revideo/renderer/lib/client/render" using SaaS Template

[EthanL06]

Issue Description

After cloning the SaaS template, running the project, and attempting use the “Render” feature, the following error occurs:

6:43:53 PM [vite] Internal server error: Failed to resolve import "@revideo/renderer/lib/client/render" from "virtual:renderer". Does the file exist?  
  Plugin: vite:import-analysis  
  File: virtual:renderer:1:35  
  1  |              import {render} from '@revideo/renderer/lib/client/render';  
     |                                    ^  
  2  |              import {Vector2} from '@revideo/core';  
  3  |              import project from './revideo/project.ts';  

Adding "@revideo/renderer": "0.10.1" to the dependencies section of the package.json resolves the issue.

Steps to Reproduce

1. Run npm init @revideo@latest and run npm install.
2. Run npm run dev and npm run revideo:serve in separate terminal windows.
3. Navigate to localhost:3000 and click the “Render” button.
4. Observe the error in the server terminal:

6:43:53 PM [vite] Internal server error: Failed to resolve import "@revideo/renderer/lib/client/render" from "virtual:renderer". Does the file exist?  
  Plugin: vite:import-analysis  
  File: virtual:renderer:1:35  

Proposed Fix

Add the "@revideo/renderer": "0.10.1" dependency to the package.json file.

Updated package.json (dependencies section):

{
  // ... existing code ...
  "dependencies": {
    "@revideo/2d": "0.10.1",
    "@revideo/core": "0.10.1",
    "@revideo/player-react": "0.10.1",
    "@revideo/renderer": "0.10.1",  // Add this line
    // ... rest of dependencies ...
  },
  // ... rest of file ...
}

After adding this dependency, run npm install again. The error should no longer occur.

Additional Context

Here is the complete package.json file for reference:

Click to expand

{
	"name": "revideo",
	"version": "0.1.0",
	"private": true,
	"scripts": {
		"dev": "next dev",
		"build": "next build",
		"start": "next start",
		"lint": "next lint",
		"revideo:serve": "revideo serve --projectFile ./revideo/project.ts",
		"revideo:editor": "revideo editor --projectFile ./revideo/project.ts"
	},
	"dependencies": {
		"@radix-ui/react-navigation-menu": "^1.1.4",
		"@revideo/2d": "0.10.1",
		"@revideo/core": "0.10.1",
		"@revideo/player-react": "0.10.1",
		"@revideo/renderer": "0.10.1",
		"class-variance-authority": "^0.7.0",
		"lucide-react": "^0.378.0",
		"next": "^14.2.13",
		"p-limit": "^3",
		"react": "^18",
		"react-dom": "^18",
		"tailwind-merge": "^2.3.0",
		"tailwindcss-animate": "^1.0.7"
	},
	"devDependencies": {
		"@revideo/cli": "0.10.1",
		"@revideo/ui": "0.10.1",
		"@types/node": "^20",
		"@types/react": "^18",
		"@types/react-dom": "^18",
		"autoprefixer": "^10.4.19",
		"eslint": "^8",
		"eslint-config-next": "14.2.3",
		"postcss": "^8",
		"tailwindcss": "^3.4.3",
		"typescript": "^5"
	}
}