not working with react-native@0.61.4 #156

Vandanabisht17 · 2019-11-20T06:05:58Z

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 · 2019-11-23T23:52:56Z

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 · 2019-11-26T06:17:38Z

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

GrinchakAndrew · 2019-11-26T13:48:33Z

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

Rashi-jain21 · 2019-11-28T19:08:33Z

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

cuongpv219 · 2020-02-04T03:21:27Z

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 · 2020-02-10T21:16:59Z

What worked for me was:

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
      }
    })
  }
};

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

piyachetk · 2020-07-05T10:19:32Z

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 · 2020-07-05T12:42:43Z

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 · 2020-07-05T13:43:52Z

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

Mubeen07 · 2020-07-28T17:12:11Z

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
#127 (comment)
Here is the error which I'm facing with this @ottofeller/epubjs-rn package.

vitorverasm · 2020-07-28T19:43:42Z

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

Mubeen07 · 2020-07-28T20:46:48Z

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

vitorverasm · 2020-07-29T14:26:45Z

@Mubeen07 try
npx react-native link package-name

Mubeen07 · 2020-07-29T17:58:44Z

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

Cheers

muriloneo · 2020-08-02T19:24:37Z

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

muriloneo · 2020-08-03T13:25:52Z

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

vitorverasm · 2020-08-03T20:35:37Z

@muriloneo you can try to:

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
Check if the react-native-webview on your project is in the same version of the one in the epubjs-rn ``package.json
Try to dele node_modules folder in path node_modules/epubjs-rn/node_modules/
Check this comment if it helps

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

muriloneo · 2020-08-04T11:51:07Z

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 · 2020-08-04T12:08:19Z

@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

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

muriloneo · 2020-08-04T14:31:42Z

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 · 2020-08-04T14:37:33Z

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

muriloneo · 2020-08-04T14:38:27Z

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

vitorverasm · 2020-08-04T14:46:24Z

@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 · 2020-08-04T14:49:46Z

Just sent you an email! Thanks

vitorverasm · 2020-08-04T14:51:54Z

@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 · 2020-08-04T15:00:44Z

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 · 2020-08-04T15:59:40Z

@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 · 2020-08-04T18:30:49Z

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 · 2020-08-04T19:12:57Z

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

It's great!

jamal-rahimzadegan · 2020-08-06T21:20:50Z

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 · 2020-08-07T11:45:15Z

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 · 2020-08-07T12:17:03Z

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 · 2020-08-07T12:55:00Z

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

bhaskarj61 · 2020-08-09T06:10:03Z

@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 · 2020-08-09T06:40:40Z

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

it gives me no error

vitorverasm · 2020-08-09T20:41:21Z

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

muriloneo · 2020-08-10T11:42:10Z

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 · 2020-08-10T13:00:52Z

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
}
})
}
};

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

Mubeen07 · 2020-08-11T17:28:07Z

@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 · 2020-08-31T09:15:40Z

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 · 2020-08-31T11:33:22Z

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 · 2020-08-31T16:20:16Z

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 · 2020-09-01T10:15:49Z

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

giginkrishnan · 2021-02-03T21:10:26Z

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,
},
}),
},
};

DDushkin mentioned this issue May 11, 2020

Error when run on RN 0.62.2 #169

Open

tomkhenry mentioned this issue Feb 1, 2021

Unable to resolve "warnOnce" #167

Open

not working with react-native@0.61.4 #156

not working with react-native@0.61.4 #156

Comments

Vandanabisht17 commented Nov 20, 2019

GrinchakAndrew commented Nov 23, 2019

Vandanabisht17 commented Nov 26, 2019

GrinchakAndrew commented Nov 26, 2019

Rashi-jain21 commented Nov 28, 2019

cuongpv219 commented Feb 4, 2020 • edited

vitorverasm commented Feb 10, 2020

piyachetk commented Jul 5, 2020

ghost commented Jul 5, 2020

imarem commented Jul 5, 2020

Mubeen07 commented Jul 28, 2020

vitorverasm commented Jul 28, 2020 • edited

Mubeen07 commented Jul 28, 2020

vitorverasm commented Jul 29, 2020

Mubeen07 commented Jul 29, 2020

muriloneo commented Aug 2, 2020 • edited

muriloneo commented Aug 3, 2020

vitorverasm commented Aug 3, 2020

muriloneo commented Aug 4, 2020

vitorverasm commented Aug 4, 2020

muriloneo commented Aug 4, 2020

vitorverasm commented Aug 4, 2020

muriloneo commented Aug 4, 2020

vitorverasm commented Aug 4, 2020

muriloneo commented Aug 4, 2020

vitorverasm commented Aug 4, 2020 • edited

vitorverasm commented Aug 4, 2020

muriloneo commented Aug 4, 2020

muriloneo commented Aug 4, 2020

muriloneo commented Aug 4, 2020 • edited

jamal-rahimzadegan commented Aug 6, 2020 • edited

muriloneo commented Aug 7, 2020

jamal-rahimzadegan commented Aug 7, 2020 • edited

muriloneo commented Aug 7, 2020

bhaskarj61 commented Aug 9, 2020

jamal-rahimzadegan commented Aug 9, 2020 • edited

vitorverasm commented Aug 9, 2020

muriloneo commented Aug 10, 2020

jamal-rahimzadegan commented Aug 10, 2020 • edited

Mubeen07 commented Aug 11, 2020

aprofromindia commented Aug 31, 2020

muriloneo commented Aug 31, 2020

aprofromindia commented Aug 31, 2020 • edited

aprofromindia commented Sep 1, 2020

giginkrishnan commented Feb 3, 2021

cuongpv219 commented Feb 4, 2020 •

edited

vitorverasm commented Jul 28, 2020 •

edited

muriloneo commented Aug 2, 2020 •

edited

vitorverasm commented Aug 4, 2020 •

edited

muriloneo commented Aug 4, 2020 •

edited

jamal-rahimzadegan commented Aug 6, 2020 •

edited

jamal-rahimzadegan commented Aug 7, 2020 •

edited

jamal-rahimzadegan commented Aug 9, 2020 •

edited

jamal-rahimzadegan commented Aug 10, 2020 •

edited

aprofromindia commented Aug 31, 2020 •

edited