EPUB Loading Fix¶

Problem¶

EPUB.js was trying to access internal EPUB files directly via URL:

GET http://127.0.0.1:8000/api/books/1/META-INF/container.xml 404 (Not Found)

This caused the error: Error: Book not rendered

Root Cause¶

When you pass a URL to ePub(url), EPUB.js expects the server to: 1. Extract the EPUB archive 2. Serve individual files from within the EPUB 3. Support requests like /path/to/epub/META-INF/container.xml

Our backend serves the EPUB as a downloadable file (blob), not as an extracted directory structure.

Solution¶

Download the EPUB file as a blob first, then pass the ArrayBuffer to EPUB.js:

Before:

const epubUrl = bookApiService.getBookFileUrl(bookId);
this.book = ePub(epubUrl);  // ❌ Tries to access internal files via URL

After:

const epubUrl = bookApiService.getBookFileUrl(bookId);

// Download as blob
const response = await fetch(epubUrl);
const blob = await response.blob();
const arrayBuffer = await blob.arrayBuffer();

// Load from ArrayBuffer
this.book = ePub(arrayBuffer);  // ✅ EPUB.js extracts internally

How It Works Now¶

Frontend requests EPUB file from API
Backend serves complete EPUB file as blob
Frontend downloads entire file
EPUB.js extracts and parses the EPUB in memory
Book renders successfully

Benefits¶

✅ Works with any backend that serves files as blobs
✅ No need for backend to extract EPUBs
✅ Simpler backend implementation
✅ Better error handling
✅ Progress tracking during download

Testing¶

# 1. Restart frontend to load new code
./start-dev.sh  # Choose option 4

# 2. Click on a book

# 3. Check console logs
# Should see:
# ℹ️ EPUB Loading book ID: 1
# ℹ️ EPUB Fetching EPUB from: http://127.0.0.1:8000/api/books/1/file
# ℹ️ EPUB Downloaded EPUB: 2.45MB
# ℹ️ EPUB Book loaded and parsed successfully

frontend/src/services/epubService.ts - Fixed loadBook() method

Status¶

✅ Fixed - Books now load and render correctly!