Using epubjs in ionic

I get this error:

Uncaught Error: Module parse failed: /... /node_modules/@ionic/app-scripts/dist/webpack/transpile-loader.js!/.../node_modules/epubjs/server.js Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #!/usr/bin/env node
| var connect = require('connect'),
| 	colors = require('colors'),
    at Object.<anonymous> (vendor.js:109785)
    at __webpack_require__ (bootstrap 84bf25b…:54)
    at Object.28 (main.js:38)
    at __webpack_require__ (bootstrap 84bf25b…:54)
    at webpackJsonpCallback (bootstrap 84bf25b…:25)
    at main.js:1

What is epubjs? Provide a link.
How did you integrate it into your app?
Provide your ionic info output.

epubjs link: https://github.com/futurepress/epub.js

Steps I’ve taken:

  1. ionic start epubjs-sample blank
  2. npm install epubjs
  3. Edit my home.ts as:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import  Epub  from 'epubjs';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
    var book = Epub("https://s3-us-west-2.amazonaws.com/pressbooks-samplefiles/MetamorphosisJacksonTheme/Metamorphosis-jackson.epub");
  }

}

my ionic info:
global packages:

@ionic/cli-utils : 1.4.0
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 2.0.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Ionic Framework                 : ionic-angular 3.5.0

System:

Node       : v6.10.3
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.1
ios-sim    : 6.0.0
npm        : 3.10.10

How are yu running/building your app?

by running : ionic serve

Hmm, seems like the server.js is inside the npm package and Webpack doesn’t know what to do with it - as it is specific code for nodejs, not for the client side.

Do you have any examples of this library being used in Angular/Ionic projects?

Sadly no, I’m stuck.

I have no experience with this stuff as well, so what comes now is pure flub with no idea if this is a good idea:

I copied the build folder from node_modules/epubjs to /assets/epubjs and included the .min.js in index.html directly, then I can use an ePub in home.ts to render a book (switched to local book because CORS stuff with remote book - remote should be fine on devices but not for ionic serve where I was testing). This actually renders the book! (although a bit broken because size doesn’t match - but that is details.

Here is the code: GitHub - janpio/ionic-epubjs: Ionic 3 app using Epub.js

2 Likes

Dude you are a miracle worker :wink: thanks a lot.

Feel free to submit PRs if you improve the rendering, add functionality etc :wink:

Sure, we will make it simple and usable, dude I’m so relieved right now, God bless you :pray:

1 Like

hi all,

many thank for this project.

How does the search engine work? do I use search-engine from epubjs or from ionic?

cheers
nawid

1 Like

Hi,

I haven’t got the time to work on search, but I think we should use epubjs for searching.

cheers.

1 Like

@kama1petiak

I add more lib, now you can open and read a “epub” file :slight_smile:

I actually haven’t merged that pull request yet :wink:

1 Like

Small project update for https://github.com/janpio/ionic-epubjs:

  • new README
  • new HomePage in app to select different books
  • Cleaned up a lot of code
  • Added lots of TODOs into the code
  • Created lots if Github issues for current bugs and needed enhancement