not working with react-native@0.61.4

Question

not working with react-native@0.61.4

Vandanabisht17 opened this issue 5 years ago · 44 comments

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' ".

Answer 1 · 2019-11-23T23:52:56.000Z

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

Answer 2 · 2019-11-26T06:17:38.000Z

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

Answer 3 · 2019-11-26T13:48:33.000Z

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

Answer 4 · 2019-11-28T19:08:33.000Z

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

Answer 5 · 2020-02-04T03:21:27.000Z

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

Answer 6 · 2020-02-10T21:16:59.000Z

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

Answer 7 · 2020-07-05T10:19:32.000Z

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.

Answer 8 · 2020-07-05T12:42:43.000Z

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.

Answer 9 · 2020-07-05T13:43:52.000Z

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

Answer 10 · 2020-07-28T17:12:11.000Z

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.

Answer 11 · 2020-07-28T19:43:42.000Z

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

Answer 12 · 2020-07-28T20:46:48.000Z

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

Answer 13 · 2020-07-29T14:26:45.000Z

@Mubeen07 try
npx react-native link package-name

Answer 14 · 2020-07-29T17:58:44.000Z

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

Cheers

Answer 15 · 2020-08-02T19:24:37.000Z

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

Answer 16 · 2020-08-03T13:25:52.000Z

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

Answer 17 · 2020-08-03T20:35:37.000Z

@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!

Answer 18 · 2020-08-04T11:51:07.000Z

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?

Answer 19 · 2020-08-04T12:08:19.000Z

@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

Answer 20 · 2020-08-04T14:31:42.000Z

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?

Answer 21 · 2020-08-04T14:37:33.000Z

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

Answer 22 · 2020-08-04T14:38:27.000Z

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

Answer 23 · 2020-08-04T14:46:24.000Z

@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.

Answer 24 · 2020-08-04T14:49:46.000Z

Just sent you an email! Thanks

Answer 25 · 2020-08-04T14:51:54.000Z

@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

Answer 26 · 2020-08-04T15:00:44.000Z

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.

Answer 27 · 2020-08-04T15:59:40.000Z

@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)

Answer 28 · 2020-08-04T18:30:49.000Z

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

Answer 29 · 2020-08-04T19:12:57.000Z

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

It's great!

Answer 30 · 2020-08-06T21:20:50.000Z

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

Answer 31 · 2020-08-07T11:45:15.000Z

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.

Answer 32 · 2020-08-07T12:17:03.000Z

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;

Answer 33 · 2020-08-07T12:55:00.000Z

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

Answer 34 · 2020-08-09T06:10:03.000Z

@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 ?

Answer 35 · 2020-08-09T06:40:40.000Z

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

it gives me no error

Answer 36 · 2020-08-09T20:41:21.000Z

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

Answer 37 · 2020-08-10T11:42:10.000Z

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

Answer 38 · 2020-08-10T13:00:52.000Z

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

Answer 39 · 2020-08-11T17:28:07.000Z

@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?

Answer 40 · 2020-08-31T09:15:40.000Z

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?

Answer 41 · 2020-08-31T11:33:22.000Z

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

Answer 42 · 2020-08-31T16:20:16.000Z

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?

Answer 43 · 2020-09-01T10:15:49.000Z

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

Answer 44 · 2021-02-03T21:10:26.000Z

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