Duplicate module name: react-animated

[r-bman]

When attempting to install highcharts-react-native I get the following error in terminal:

npm WARN deprecated react-native-cache-image@1.0.0: this package has been deprecated
npm ERR! path /Users/dev/Documents/Projects/my-project/client/node_modules/react-native-push-notification
npm ERR! code EISGIT
npm ERR! git /Users/dev/Documents/Projects/my-project/client/node_modules/react-native-push-notification: Appears to be a git repo or submodule.
npm ERR! git     /Users/dev/Documents/Projects/my-project/client/node_modules/react-native-push-notification
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dev/.npm/_logs/2019-05-10T14_20_05_980Z-debug.log

After uninstalling react-native-push-notification I was able to install highcharts-react-native, however after installing react-native-push-notification again I continually receive the following error in the react-native-packager:

Error: jest-haste-map: Haste module naming collision:
  Duplicate module name: react-animated
  Paths: /Users/dev/Documents/Projects/my-project/client/node_modules/@highcharts/highcharts-react-native/node_modules/react-native/Libraries/Animated/release/package.json collides with /Users/dev/Documents/Projects/my-project/client/node_modules/react-native/Libraries/Animated/release/package.json

This error is caused by `hasteImpl` returning the same name for different files.
    at setModule (/Users/dev/Documents/Projects/my-project/client/node_modules/jest-haste-map/build/index.js:569:17)
    at workerReply (/Users/dev/Documents/Projects/my-project/client/node_modules/jest-haste-map/build/index.js:641:9)
    at processTicksAndRejections (internal/process/next_tick.js:81:5)
::1 - - [10/May/2019:14:24:05 +0000] "POST /symbolicate HTTP/1.1" 500 - "-" "my-project/1 CFNetwork/978.0.7 Darwin/18.5.0"

[r-bman]

After some more troubleshooting and running rm -rf node_modules/*/.git as suggested here I'm no longer having issues with react-native-push-notification and I can install highcharts-react-native however I still receive the following error in the react native packager when running react-native start --reset-cache:

(node:7017) UnhandledPromiseRejectionWarning: Error: jest-haste-map: Haste module naming collision:
  Duplicate module name: react-native
  Paths: /Users/dev/Documents/Projects/my-project/client/node_modules/react-native/package.json collides with /Users/dev/Documents/Projects/my-project/client/node_modules/@highcharts/highcharts-react-native/node_modules/react-native/package.json

This error is caused by `hasteImpl` returning the same name for different files.
    at setModule (/Users/dev/Documents/Projects/my-project/client/node_modules/jest-haste-map/build/index.js:569:17)
    at workerReply (/Users/dev/Documents/Projects/my-project/client/node_modules/jest-haste-map/build/index.js:641:9)
    at processTicksAndRejections (internal/process/next_tick.js:81:5)

[sebastianbochan]

At this moment its experimental version of package and we are still developing package for npm and live demos.

[sebastianbochan]

Hi @r-bman Currently we released new stable varsion of highcharts-react-native. Could you confirm that the problem is resolved in your application with the current version?

[r-bman]

@sebastianbochan Thanks for the replies.

I'm now able to install the library successfully, however I run into the following errors in the iOS simulator:

[Error] Did not parse stylesheet at 'http://localhost:8081/assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/css/styles.css' because non CSS MIME types are not allowed when 'X-Content-Type: nosniff' is given.
[Error] Refused to execute http://localhost:8081/assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/js/message.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.
[Error] Refused to execute http://localhost:8081/assets/node_modules/@highcharts/highcharts-react-native/highcharts-files/highcharts.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.

When I've used iOS webviews in the past, I've had to copy local static files into the Resources folder in Xcode. If you can find a way to overcome this, that would be great but I haven't found a way myself.

[sebastianbochan]

Will check it on Monday.

[sebastianbochan]

@r-bman, Do you use production mode or expo build:ios ? How you run your app, because Im not able to reproduce the issue, being honest.

[r-bman]

@sebastianbochan It's an ejected App and I'm running in debug mode. Perhaps it's an issue with my project configuration but I don't know what's causing it. I run the App by clicking the run button in XCode.

[r-bman]

@sebastianbochan I've managed to get the library working by adding the highcharts-layout & highcharts-files directories into the Copy Bundles Resources section in Build Phases within Xcode, and changing the webview source prop to source={{ uri: 'highcharts-layout/index.html' }}. I guess expo allows access to static files, whereas an ejected App does not. The only problem with this is that I've had to amend node_modules/highcharts-react-native/highcharts/src/HighchartsReactNative.js locally so I'll probably fork the library to commit my changes.

[sebastianbochan]

Hi @r-bman, Thank you for your valuable feedback and help. Im just waiting for your final notes (if worked or not) and then I think will update docs (and test your soltuion with expo) to avoid confusions among other users.

[r-bman]

@sebastianbochan I can confirm that this library works with the method I outlined. Granted, it's not ideal having to copy the files within Xcode but I haven't found a better solution yet.

[sebastianbochan]

Hi @r-bman, Im still developing big update of the package, but would be really helpful if you could test using:

HighchartsReactNative

source={require(../highcharts-layout/index.html)}

In my scenario works properly, but the source: uri seems to be broken in expo native apps and some xcode demos (domain problem -1100).

index.html add script like

<script>
alert('wrapper')
</script>

[r-bman]

@sebastianbochan I'm having issues running my App after installing this library again due to the following error: Module @highcharts/HighchartsReactNative does not exist in the Haste module map

I don't see how your suggestion to use source={require(../highcharts-layout/index.html)} is any different to how the library currently works (see HighchartsReactNative.js:12). Doing this just results in the errors described here.

In your Xcode tests, you must follow my instructions here. You will notice that after you add files from Copy Bundles Resources it actually moves them into the root of the project so the files will need dragging down to the Resources directory in Xcode. You must also re-run the project from Xcode whenever you add or change files in the Resources directory in Xcode.

I can't comment on Expo because we don't use it but @zuozhuo may be able to help.

[sebastianbochan]

Thank you for the feedback.

Im considering to rebuild the wrapper and inject all files (css, html, js) inline in HTML string, instead of adding references. As a result we avoid these errors and problems with paths.

Tomorrow will do some tests.

[sebastianbochan]

@r-bman, Please let me know which version of xCode / os do you have.

I did steps:

1. Clone repo of wrapper
2. run yarn
3. run in expo, all works properly
4. call expo eject to have correct ios and android native apps
5. run the project (ios) in xCode and then in simulator
6. As a result all worked properly (withtout errors which you experienced).

ps. Im in the process of creating docs about your case, but was not forced to do your steps to run the right demo. Did I miss something?

[sebastianbochan]

Im closing it as duplicate of https://github.com/highcharts/highcharts-react-native/issues/4

Lets keep all inputs in one thread.