not working with react-native@0.61.4

[Vandanabisht17]

hii, I am using this library but it's not working with react-native@0.61.4. I am getting this error "Cannot find module 'warnOnce' from 'react-native-implementation.js' ".

[GrinchakAndrew]

https://stackoverflow.com/questions/58716199/react-native-unable-to-resolve-module-warnonce Try by editing the your metro.config.js to

module.exports = {
  resolver: {
    blacklistRE: blacklist([
      /node_modules\/.*\/node_modules\/react-native\/.*/,
    ])
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};```

[Vandanabisht17]

@GrinchakAndrew Hi thank you for your reply I already tried that but then i am getting this error

[GrinchakAndrew]

Uninstall the npm-cli: https://facebook.github.io/react-native/docs/getting-started

[Rashi-jain21]

Yes I am getting the same error in react-naive 0.61.3.Please help !!

[cuongpv219]

I resolved by edit metro.config.js to: module.exports = { resolver: { blacklistRE: blacklist([ /node_modules\/.\/node_modules\/react-native\/./, /node_modules\/.\/node_modules\/react\/./, ]) }, ....... };

[vitorverasm]

What worked for me was: 1) Change the metro.config.js to:

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = {
  resolver: {
    blacklistRE: blacklist([/node_modules\/.*\/node_modules\/react-native\/.*/])
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false
      }
    })
  }
};

2) Change my react-native-webview dependency to the same version of the epubjs-rn 3) Double check the configuration section of the react-native-orientation for Android and iOS. 4) Then run project

[piyachetk]

I was having these exact same problems (although I was using react-native 0.62.2) and was stuck with the Element Ref error. I switched to @ottofeller/epubjs-rn and all the problems went away.

[ghost]

I was having these exact same problems (although I was using react-native 0.62.2) and was stuck with the Element Ref error. I switched to @ottofeller/epubjs-rn and all the problems went away.

Were you able to make it work in IOS? using @ottofeller/epubjs-rn? Because I am using that also, but the problem is, in IOS, the paginated flow doesn't work.

[imarem]

Could you try to delete the epubjs-rn/node-modules/react-native.

[Mubeen07]

I was having these exact same problems (although I was using react-native 0.62.2) and was stuck with the Element Ref error. I switched to @ottofeller/epubjs-rn and all the problems went away.

@piyachetk can you guide me about the @ottofeller/epubjs-rn as I'm using this one, It's work fine for only opf source but when I use the code to load .epub then error occurred https://github.com/futurepress/epubjs-rn/issues/127#issuecomment-664597544 Here is the error which I'm facing with this @ottofeller/epubjs-rn package.

[vitorverasm]

@Mubeen07 This could be a link issue with the react-native-zip-archive library, make sure your follow all the installation steps

[Mubeen07]

Thank you @vitorverasm I'm on latest react-native version and it's not support link command anymore. any other workarounds?

[vitorverasm]

@Mubeen07 try npx react-native link package-name

[Mubeen07]

Thanks @vitorverasm It worked for me, thank you so mush. You made my day.

Cheers

[muriloneo]

what have you done that worked? what version of react-native?

[muriloneo]

how have you linked the libs from epubjs-rn ? I cannot run the instructions to link, when using rn 0.60+.

[vitorverasm]

@muriloneo you can try to:

1) Check instalation instructions and link instructions of all dependencies

• Use npx react-native-link package-name instead of react-native link directly
• All dependencies:
  • react-native-static-server
  • react-native-webview
  • react-native-zip-archive
  • rn-fetch-blob
  • react-native-orientation
  • async-storage 2) Check if the react-native-webview on your project is in the same version of the one in the epubjs-rn ``package.json 3) Try to dele node_modules folder in path node_modules/epubjs-rn/node_modules/ 4) Check this comment if it helps

I've managed to work on a private fork in my use case, good luck!

[muriloneo]

Thanks a lot @vitorverasm. I did what you said. Installed every one of these packages at epubjs-rn version (did not installed @ottofeller fork).

I also changed the metro config but on iOS the simulator stays blank, with errors:

TypeError: Cannot read property 'DocumentDir' of undefined
ExceptionsManager.js:179 TypeError: hmrClient.send is not a function
Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

using this package:

"dependencies": {
    "@lightbase/react-native-orientation": "3.2.1",
    "@react-native-community/async-storage": "1.5.0",
    "epubjs-rn": "^0.1.5",
    "react": "16.13.1",
    "react-native": "0.63.2",
    "react-native-static-server": "0.4.2",
    "react-native-webview": "5.12.0",
    "react-native-zip-archive": "4.1.1",
    "rn-fetch-blob": "0.10.15"
  },
  "devDependencies": {
    "@babel/core": "^7.11.0",
    "@babel/runtime": "^7.11.0",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.2.2",
    "eslint": "^7.6.0",
    "jest": "^26.2.2",
    "metro-react-native-babel-preset": "^0.61.0",
    "react-test-renderer": "16.13.1"
  },

Can you please share your working package.json, please?

[vitorverasm]

@muriloneo I no longer have access to the project that I used epubjs-rn. On your comment your have two problems:

• TypeError: Cannot read property 'DocumentDir' of undefined
• ExceptionsManager.js:179 TypeError: hmrClient.send is not a function

1) DocumentDir is related to rn-fetch-blob directories, you can check this part of the docs 2) Form hmrClient.send I don't remember exactly what I did, but it was related to metro version, you can check that

[muriloneo]

Thanks @vitorverasm. I think I'm going somewhere! lol.

I have to install ottofeller package. epubjs-rn has a ref problem but I'm getting:

error: Error: While trying to resolve module @ottofeller/epubjs-rn from file App.js, the package /node_modules/@ottofeller/epubjs-rn/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/node_modules/@ottofeller/epubjs-rn/components/index.js..

How to install a forked project?

[vitorverasm]

@muriloneo Did you install with? It should've worked :thinking: npm i @ottofeller/epubjs-rn

[muriloneo]

Yeah, I did just like that. with '@' without, with NPM and YARN!

[vitorverasm]

@muriloneo if you'd like I can send you a documentation I've made when I was working with a fork of epujs-rn in a project. Just leave your email.

[muriloneo]

Just sent you an email! Thanks

[vitorverasm]

@muriloneo I've created a gist for this maybe it helps others beyond yourself, but feel free to send me an email if wanted Check it out

[vitorverasm]

It's a pity that a library that helps several people does not have adequate maintenance, currently in react-native there is no concrete way to view epub files and this library facilitates this process. However, more and more people continue to create library forks, as the basic structure of the library does not meet the needs.

I don't feel that I have the capacity to help maintain the library, but I can help with documentation and help wanted questions.

[muriloneo]

@vitorverasm with your @vitorverasm/react-native-static-server the project did not build. I've installed "react-native-static-server": "0.4.2" and now it does build, but it has the same problem as the actual project, which ottofeller has it right.

Error: Element ref was specified as a string (framer) but no owner was set. 

Rendition (at Epub.js:320)

[muriloneo]

This works (on mac):

package.json

"dependencies": {
    "@lightbase/react-native-orientation": "^3.2.1",
    "@ottofeller/epubjs-rn": "^0.2.41",
    "@react-native-community/async-storage": "^1.5.0",
    "core-js": "^3.6.5",
    "react": "16.13.1",
    "react-native": "0.63.2",
    "react-native-static-server": "^0.4.2",
    "react-native-vector-icons": "^7.0.0",
    "react-native-webview": "^9.4.0",
    "react-native-zip-archive": "^4.1.1",
    "rn-fetch-blob": "^0.12.0"
  },
  "devDependencies": {
    "@babel/core": "^7.11.0",
    "@babel/runtime": "^7.11.0",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.2.2",
    "eslint": "^7.6.0",
    "jest": "^26.2.2",
    "metro-react-native-babel-preset": "^0.61.0",
    "react-test-renderer": "16.13.1"
  },

npx react-native link react-native-static-server && npx react-native link react-native-webview && npx react-native link react-native-zip-archive && 
RNFB_ANDROID_PERMISSIONS=truenpx react-native link rn-fetch-blob && npx react-native link @lightbase/react-native-orientation && npx react-native link @react-native-community/async-storage

npx pod-install

[muriloneo]

Using Ottofeller fork he uses another props like pagingEnabled, which is fine.

It's great!

[jamal-rahimzadegan]

npx react-native link react-native-static-server && npx react-native link react-native-webview && npx react-native link react-native-zip-archive && 
RNFB_ANDROID_PERMISSIONS=truenpx react-native link rn-fetch-blob && npx react-native link @lightbase/react-native-orientation && npx react-native link @react-native-community/async-storage

after doing this, the error is gone but the screen is blank and doesn't show anything (sometimes a loading indicator) edit: it gives me this warning: require cycle @ottofeller/epubjs-rn

[muriloneo]

npx react-native link react-native-static-server && npx react-native link react-native-webview && npx react-native link react-native-zip-archive && 
RNFB_ANDROID_PERMISSIONS=truenpx react-native link rn-fetch-blob && npx react-native link @lightbase/react-native-orientation && npx react-native link @react-native-community/async-storage

after doing this, the error is gone but the screen is blank and doesn't show anything (sometimes a loading indicator) edit: it gives me this warning: require cycle @ottofeller/epubjs-rn

have you used npm or yarn? I suggest you install all dependencies with NPM. Don't know why, for me, with yarn, it does not install forked repo the right way.

[jamal-rahimzadegan]

npx react-native link react-native-static-server && npx react-native link react-native-webview && npx react-native link react-native-zip-archive && 
RNFB_ANDROID_PERMISSIONS=truenpx react-native link rn-fetch-blob && npx react-native link @lightbase/react-native-orientation && npx react-native link @react-native-community/async-storage

after doing this, the error is gone but the screen is blank and doesn't show anything (sometimes a loading indicator) edit: it gives me this warning: require cycle @ottofeller/epubjs-rn

have you used npm or yarn? I suggest you install all dependencies with NPM. Don't know why, for me, with yarn, it does not install forked repo the right way.

ok I'll test it with npm again and share the result edit: same again here is my code: import React from 'react'; import { StyleSheet, ScrollView, View, Text, StatusBar,} from 'react-native';

import {Epub} from '@ottofeller/epubjs-rn';

const App: () => React$Node = () => { return ( <Epub src={"https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf"}/> ); };

export default App;

[muriloneo]

Run debug and show the error. Sometimes it does not show the error in console.

[bhaskarj61]

@vitorverasm i have installed @vitorverasm/epubjs-rn successfully but loader keeps loading and then giving me error (screenshot above). Any idea how can I resolve it ?

[jamal-rahimzadegan]

Run debug and show the error. Sometimes it does not show the error in console.

it gives me no error

[vitorverasm]

@bhaskarj61 try removing node_modules inside node_modules/epubjs-rn.

[muriloneo]

Run debug and show the error. Sometimes it does not show the error in console.

it gives me no error

try using this metro.config

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = { resolver: { blacklistRE: blacklist([/node_modules\/.\/node_modules\/react-native\/./]) }, transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: false } }) } };

[jamal-rahimzadegan]

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = { resolver: { blacklistRE: blacklist([/nodemodules/./nodemodules/react-native/./]) }, transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: false } }) } };

thank you. I'll test it Update: it's worked thank you

[Mubeen07]

@muriloneo you can try to:

1. Check instalation instructions and link instructions of all dependencies

   * Use `npx react-native-link package-name` instead of `react-native link` directly
   * All dependencies:
     - [react-native-static-server](https://github.com/futurepress/react-native-static-server)
     - [react-native-webview](https://github.com/react-native-community/react-native-webview)
     - [react-native-zip-archive](https://github.com/mockingbot/react-native-zip-archive)
     - [rn-fetch-blob](https://github.com/joltup/rn-fetch-blob)
     - [react-native-orientation](https://github.com/lightbasenl/react-native-orientation#readme)
     - [async-storage](https://github.com/react-native-community/async-storage)

2. Check if the `react-native-webview` on your project is in the same version of the one in the `` epubjs-rn ``package.json ``

3. Try to dele `node_modules` folder in path `node_modules/epubjs-rn/node_modules/`

4. Check [this comment](https://github.com/futurepress/epubjs-rn/issues/156#issuecomment-584358529) if it helps

I've managed to work on a private fork in my use case, good luck!

@vitorverasm Hope you are doing fine.

Is there any way to load files which required authentication as well in epubjs-rn, like loading file from nextcloud or required auth headers or username/password?

[aprofromindia]

getting this error after typing yarn add @ottofeller/epubjs-rn : -

An unexpected error occurred: "could not find a copy of react-native to link in node_modules/@ottofeller/epubjs-rn/node_modules"

any solutions please?

[muriloneo]

getting this error after typing yarn add @ottofeller/epubjs-rn : -

An unexpected error occurred: "could not find a copy of react-native to link in node_modules/@ottofeller/epubjs-rn/node_modules"

any solutions please?

Try with npm. I got this error using yarn. Don't know why.

Change the metro.config.js to:

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = {
  resolver: {
    blacklistRE: blacklist([/node_modules\/.*\/node_modules\/react-native\/.*/])
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false
      }
    })
  }
};

[aprofromindia]

getting this error after typing yarn add @ottofeller/epubjs-rn : - An unexpected error occurred: "could not find a copy of react-native to link in node_modules/@ottofeller/epubjs-rn/node_modules" any solutions please?

Try with npm. I got this error using yarn. Don't know why.

Change the metro.config.js to:

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = {
  resolver: {
    blacklistRE: blacklist([/node_modules\/.*\/node_modules\/react-native\/.*/])
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false
      }
    })
  }
};

Thanks for the update, it did work with npm. Now it loads as I see a spinner for a sec and then the white screen and see a log message in metro stating its downloading https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf.

Any idea, how do i see the epub book view please?

[aprofromindia]

I think its important to add height and width props to show the epub, which is missing from the documentation.

[giginkrishnan]

For me

removed react-native-cli and

add metro.config.js with below script

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = { resolver: { blacklistRE: blacklist([ /node_modules\/.\/node_modules\/react-native\/./, ]), }, transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: false, }, }), }, };