How to configure this so it actually works?

[skizzo]

Hi,

I'm trying visualize my app bundle (duh) and followed your instructions of npm install --save-dev react-native-bundle-visualizer and then ./node_modules/.bin/react-native-bundle-visualizer for my React Native (0.59.10) app.

Unfortunately, all that happens is that I get about a kazillion errors instead of a result, although my project runs fine on both iOS and Android. The terminal output doesn't really help me figure out what's going on since it's about 80.000 lines long (yeah, it's quite a huge project).

My .babelrc file looks like this:

{
  "presets": ["module:metro-react-native-babel-preset"],
  "env": {
    "production": {
      "plugins": [ ["transform-remove-console", { "exclude": [ "error", "warn"] }] ]
    }
  }  
}

Any ideas what's going on here? Thanks.

[IjzerenHein]

Hi, I just ran a test on an extensive project running react-native 0.59.10 and that ran fine on my machine. So it doesn't seem to be related with react-native 0.59.10.

In order to isolate the problem, can you provide the following information:

• Are you using typescript?
• Are you using Windows or a Mac?
• Which node.js version are you using?
• Do you have a haul-config file in your project, and if so please share it here?

In the log it says it can't find Screen.js. Can you confirm that this file indeed exists and that it has the exact same casing in the file-name as is used in the import statement?

[skizzo]

Hi @IjzerenHein, thanks for your quick reply. To answer your questions:

Are you using typescript? - Nope.

Are you using Windows or a Mac? - Mac.

Which node.js version are you using? - v8.12.0

Do you have a haul-config file in your project, and if so please share it here? - Not as far as I know.

Yes, the Screen.js file exists, as I said, I'm able to use all of these files mentioned in the errors in my app perfectly. Any other ideas? :)

[IjzerenHein]

Okay.

How did you create your project, did you use react-native init or some other template?

[skizzo]

I used react-native init.

[IjzerenHein]

I see. Well we're not getting closer that's for sure. :) Is there anything specific about your project that is worth mentioning? Or is there anything specific in the files that are failing that you could think of? Can you share one of the failing files (including filename)?

[IjzerenHein]

Hi, a new release has been published: https://github.com/IjzerenHein/react-native-bundle-visualizer/releases/tag/v1.4.2 Could you check whether that solves any problems for you?

[skizzo]

Hello good Sir! Thanks very much for the update, but unfortunately it doesn't work with v1.4.2 either, the terminal output is in this gist and looks pretty similar to the one from v1.4.1. Don't know, it must be something with the way my project is set up, I probably fucked up somewhere. If you don't think we can narrow down what's going wrong here, feel free to close this issue!

[IjzerenHein]

Alright, too bad! No lets keep this open for now. I'm sure there is a good reason why stuff is breaking for you. Could you perhaps share the dependencies that you are using, perhaps that can shed light on the situation. Also, are you targeting any other platforms than Android and iOS?

[IjzerenHein]

Hi, a new version of react-native-bundle-visualizer is in the works which no longer uses Haul and should solve your problems as well (and is also a lot faster). Could you try installing react-native-bundle-visualizer@next and see whether that solves your problem?

[lucianomlima]

My .babelrc file looks like this:

{
  "presets": ["module:metro-react-native-babel-preset"],
  "env": {
    "production": {
      "plugins": [ ["transform-remove-console", { "exclude": [ "error", "warn"] }] ]
    }
  }  
}

Are you not missing the @babel/env inside presets?

[skizzo]

Hi, a new version of react-native-bundle-visualizer is in the works which no longer uses Haul and should solve your problems as well (and is also a lot faster). Could you try installing react-native-bundle-visualizer@next and see whether that solves your problem?

Hi and thanks for the update! I npm installed the @next version, and it works like a charm now! I'm not getting the beautiful graphic shown in your README, but that doesn't matter to me at all.

Thanks so much!

[lucianomlima]

Hi and thanks for the update! I npm installed the @next version, and it works like a charm now! I'm not getting the beautiful graphic shown in your README, but that doesn't matter to me at all.

It's because use different approaches. V1 uses webpack + Haul bundler. V2 uses metro bundler + source-map-explorer.

[skizzo]

Ah, thanks for the insight @lucianomlima!

[IjzerenHein]

Hi. V2 has been released as official, I'm closing this now