Source-map-explorer error

[gabimoncha]

Hello, Recently, we moved to yarn workspace monorepo although I'm not sure if this is happening because of it since I haven't used the library in some time.

There lib is generating the bundle and sourcemap, but it seems to be corrupted.

Generating bundle...
warning: the transform cache was reset.
                    Welcome to Metro!
              Fast - Scalable - Integrated

info Writing bundle output to:, /var/folders/z0/1fmtx0f56_z4f2mgch3tyfsm0000gn/T/react-native-bundle-visualizer/app/ios.bundle
info Writing sourcemap output to:, /var/folders/z0/1fmtx0f56_z4f2mgch3tyfsm0000gn/T/react-native-bundle-visualizer/app/ios.bundle.map
info Done writing bundle output
info Done writing sourcemap output
Bundle is 85.18 MB in size (unchanged since last run)
=== error === {
  bundles: [],
  errors: [
    {
      bundleName: '/var/folders/z0/1fmtx0f56_z4f2mgch3tyfsm0000gn/T/react-native-bundle-visualizer/app/ios.bundle',
      code: 'InvalidMappingLine',
      message: 'Your source map refers to generated line 17, but the source only contains 16 line(s).\n' +
        'Check that you are using the correct source map.',
      error: [AppError]
    }
  ]
}

[JHeigle]

Same here. Tried downgrading, but made no difference. Haven't been able to find a solution for this one.

[scrungrth]

I installed this version as a dev dependency, and ran locally to fix

+    "react-native-bundle-visualizer": "3.1.0",

[hurali97]

@JHeigle @gabimoncha Can you guys tell are you using react-native cli or expo? Also the react-native-bundle-visualizer version that is being used.

[nicolasburtey]

seen the same issue. RN 0.71.2 and react-native-bundle-visualizer 3.1.3

tried with 3.1.0 and have a different error message, so it seems there is a difference in behavior between 3.1.0 and 3.1.3:

node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<Object>".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

ok I see 3.1.3 is supposed to fix RN 0.71 compatibility, I guess this is why I had different behavior. unfortunately seems none version works for me.

@hurali97 related repo if you want to try locally: https://github.com/GaloyMoney/galoy-mobile

[hurali97]

@nicolasburtey Thanks for the repro. I briefly took a look at that and looks like it's probably related to how metro.config.js is overriden. I don't have a clear explanation of the issue yet, I will try to look for details. Probably this could be related but need to dig further. I also tried putting minifierPath to metro-minify-uglify but it doesn't seem to work.

I will try to comeback soon with an update. 👍

[arif-dewi]

Same here, no metro overrides, completely new project =(

Bundle is 4.75 MB in size (unchanged since last run)
=== error === {
  bundles: [],
  errors: [
    {
      bundleName: '/var/folders/24/31vn44z11c3b363x4p5pd6bw0000gp/T/react-native-bundle-visualizer/app/ios.bundle',
      code: 'InvalidMappingLine',
      message: 'Your source map refers to generated line 3, but the source only contains 2 line(s).\n' +
        'Check that you are using the correct source map.',
      error: [AppError]
    }
  ]
}

[gabimoncha]

I installed this version as a dev dependency, and ran locally to fix

+    "react-native-bundle-visualizer": "3.1.0",

Not working

[gabimoncha]

@JHeigle @gabimoncha Can you guys tell are you using react-native cli or expo? Also the react-native-bundle-visualizer version that is being used.

I'm using react-native-cli and "react-native-bundle-visualizer": "^3.1.3"

[frankcalise]

This is probably related to this: https://github.com/IjzerenHein/react-native-bundle-visualizer/issues/116

Try this temp fix: https://github.com/IjzerenHein/react-native-bundle-visualizer/issues/116#issuecomment-1427042593

The latest metro has a fix for this issue. see the linked PR on the above issue here (although I don't know what it means for in terms of a new release for this package)

[gabimoncha]

@frankcalise thanks for the the comment. But I'm not sure I understand what should I do? The branch #fix-set-minify-to-false doesn't exist anymore and my version of metro isn't using terser as a minifier

[hurali97]

Hey folks,

Sorry for not being active. But I think I can devote some time to it now. I will be testing this on:

• react-native 0.71.3

Let's see how far do I get in terms of investigating and then getting it fixed 🤞

[hurali97]

Hi guys,

I have a few comments to discuss:

• The original issue was addressed in metro here.
• That fix was then updated in react-native-cli in 10.2.0 release here.
• Finally, the react-native-cli was updated here in the latest react-native version i.e: 0.71.4

I need some confirmation from the community, does latest react-native 0.71.4 works for you with latest react-native-bundle-visualizer 3.1.3 ?

I tried on my system and it works without any fuss.

So I will wait until I get some confirmations if that's the case for others and then reverting the changes of setting minification to false in this PR, so that we benefit from minification while visualizing the bundles.

[scrungrth]

@hurali97 thanks for looking into it some, I am not sure if that's the only issue as it's stated it started w/ RN 70 version but at least in my case my project is still on RN 68. I was able to work around the issue though as noted in my previous comment above.

[hurali97]

@scrungrth Okay, so 3.1.0 works for you on react-native 0.68 ? 🤔 So it's probably possible that 3.1.3 doesn't work for some folks and it's ideally safe to revert that change. Given that, if things work for you on 3.1.0, you should be good with the new release of this package which will revert the changes introduced in the last 3.1.3 release.

As far as I have researched and investigated minification changes by metro is the root cause of this issue and should be fine with latest RN but let's see.

[gabimoncha]

I confirm that 3.1.0 is working for 0.67.5 too

[hurali97]

@gabimoncha Thanks for verifying that 🎉 . I believe 3.1.2 will be fine as well. Since it doesn't introduce any new API. We can revert 3.1.3 which sets minify false. And then we will be good to go. I will test some pieces again, and will try to do a release in a couple days.

[gabimoncha]

Thanks. Will check that and get back to you

[gabimoncha]

That is correct. 3.1.2 is working @hurali97

[effektsvk]

I found out that it works fine on version 3.1.3 with React Native v0.71.4 when you disable the minify flag, I just commented this line in node_modules https://github.com/IjzerenHein/react-native-bundle-visualizer/blob/097c49bbf029909c4bb9a91c8e1951643260c80a/src/react-native-bundle-visualizer.js#L98

edit: Oh, I see there was a PR that actually added the minify flag in last version 😅 So I'm not sure if that's okay or not. btw. I have a bare RN project (non-Expo).

[hurali97]

Hey folks,

I have pushed a fix, which reverts the minify flag introduced in PR.

If someone wants to help in testing, please remove the existing package and install it from the following command:

yarn add -D "https://github.com/IjzerenHein/react-native-bundle-visualizer.git#fix-remove-minify-false"

I tested this on the latest react-native: 0.71.6 and expo SDK: 48.0.10, and it works fine.

I have also added a troubleshooting section to use v3.1.3, if they encounter negative line error, which may appear in versions around >=0.70.0 & <=0.71.3.

Also, tested on RN64 and expo SDK 42, all green there as well.

I will be releasing a new version with this fix soon 🤞

[Peeeep]

If someone wants to help in testing, please remove the existing package and install it from the following command:

CRNA RN 0.71.6 and it works great, thank you!

[wSedlacek]

I was running into Error parsing mappings (code 1): the mappings contained a negative line, column, source index, or name index and using fix-remove-minify-false did not resolve the issue.

My environment is a bit complex being expo in nx via @nx/expo combined with a dozen or so in house libraries and using pnpm as the package manager. So there could be a dozen or so things that are throwing it off.

Just interested if anyone has any ideas with how to troubleshoot this.

[jake-carpenter]

If someone wants to help in testing, please remove the existing package and install it from the following command:

This worked for me with Expo SDK 48 and RN 0.71.8.

[lfoliveir4]

Hey folks,

I have pushed a fix, which reverts the minify flag introduced in PR.

If someone wants to help in testing, please remove the existing package and install it from the following command:

yarn add -D "https://github.com/IjzerenHein/react-native-bundle-visualizer.git#fix-remove-minify-false"

I tested this on the latest react-native: 0.71.6 and expo SDK: 48.0.10, and it works fine.

I have also added a troubleshooting section to use v3.1.3, if they encounter negative line error, which may appear in versions around >=0.70.0 & <=0.71.3.

Also, tested on RN64 and expo SDK 42, all green there as well.

I will be releasing a new version with this fix soon 🤞

Works for me Thanks! 🥰🥰🏆

[szt217]

yarn add -D "https://github.com/IjzerenHein/react-native-bundle-visualizer.git#fix-remove-minify-false"

This works for me on Expo SDK 48.0.19 and RN 0.71.8. Thanks!

Will the new version be released soon?

[jarnove]

It also works for me with the fix of @hurali97.

Any update on this?

[fatemehmarzoughi]

@hurali97 Your update also worked for me )

[minhthuhai]

react-native: 0.72.^ yahh i same issue, and we can comment line '--minify', in /node_modules/react-native-bundle-visualizer/src/react-native-bundle-visualizer.js to solved.

const commands = [
  'bundle',
  '--platform',
  platform,
  '--dev',
  dev,
  '--entry-file',
  entryFile,
  '--bundle-output',
  bundleOutput,
  '--sourcemap-output',
  bundleOutputSourceMap,
  // '--minify',
  isExpo
];

[kunalphaltankar]

I installed this version as a dev dependency, and ran locally to fix

+    "react-native-bundle-visualizer": "3.1.0",

You can also run npx react-native-bundle-visualizer@3.1.0. If you don't want to save it as dev dependency.

[WangShayne]

react-native: 0.72.^ 是的，我有同样的问题，我们可以注释行“--minify”来/node_modules/react-native-bundle-visualizer/src/react-native-bundle-visualizer.js解决。

const commands = [
  'bundle',
  '--platform',
  platform,
  '--dev',
  dev,
  '--entry-file',
  entryFile,
  '--bundle-output',
  bundleOutput,
  '--sourcemap-output',
  bundleOutputSourceMap,
  // '--minify',
  isExpo
];

work for me

[chhornponleu]

react-native: 0.72.^ yahh i same issue, and we can comment line '--minify', in /node_modules/react-native-bundle-visualizer/src/react-native-bundle-visualizer.js to solved.

const commands = [
  'bundle',
  '--platform',
  platform,
  '--dev',
  dev,
  '--entry-file',
  entryFile,
  '--bundle-output',
  bundleOutput,
  '--sourcemap-output',
  bundleOutputSourceMap,
  // '--minify',
  isExpo
];

not work for Expo 49

[sanduluca]

react-native: 0.72.^ yahh i same issue, and we can comment line '--minify', in /node_modules/react-native-bundle-visualizer/src/react-native-bundle-visualizer.js to solved.

const commands = [
  'bundle',
  '--platform',
  platform,
  '--dev',
  dev,
  '--entry-file',
  entryFile,
  '--bundle-output',
  bundleOutput,
  '--sourcemap-output',
  bundleOutputSourceMap,
  // '--minify',
  isExpo
];

Confirm that this is working for react-native: 0.72.4 react-native-bundle-visualizer: 3.1.3

[camilossantos2809]

I'm using react-native-cli and I ran npx react-native-bundle-visualizer@3.1.3 --dev false --platform ios --bundle-output ./cache/target.ios.bundle, but it resulted in an error. How can I disable the 'minify' option? Also, I'm using react-native version 0.72.7.

errors: [
    {
      bundleName: './cache/target.ios.bundle',
      code: 'InvalidMappingColumn',
      message: 'Your source map refers to generated column 14 on line 15, but the source only contains 4 column(s) on that line.\n' +
        'Check that you are using the correct source map.',
      error: [AppError]
    }
  ]

[kiprijonas]

It started working for me after I've upgraded react-redux from 8 to 9.

[kangfenmao]

Add this line:

node_modules/react-native-bundle-visualizer/src/react-native-bundle-visualizer.js

return explore(
  {
    code: bundleOutput,
    map: bundleOutputSourceMap
  },
  {
    onlyMapped,
    noBorderChecks: true, // <----------- Add this line
    output: {
      format,
      filename: bundleOutputExplorerFile,
    },
  }
);

react-native-bundle-visualizer-npm-3.1.3-5b29b2c181.patch

[misbell]

3.1.3 fails with react native 0.73.6, same kind of error.

npx react-native-bundle-visualizer Need to install the following packages: react-native-bundle-visualizer@3.1.3 Ok to proceed? (y) y Generating bundle... Welcome to Metro v0.80.8 Fast - Scalable - Integrated

info Writing bundle output to:, /var/folders/f3/z6y52mn91vv4bgtp0qsk7tvr0000gn/T/react-native-bundle-visualizer/modalview/ios.bundle info Writing sourcemap output to:, /var/folders/f3/z6y52mn91vv4bgtp0qsk7tvr0000gn/T/react-native-bundle-visualizer/modalview/ios.bundle.map info Done writing bundle output info Done writing sourcemap output Bundle is 10.04 MB in size (+++ has increased with 4 bytes since last run) === error === { bundles: [], errors: [ { bundleName: '/var/folders/f3/z6y52mn91vv4bgtp0qsk7tvr0000gn/T/react-native-bundle-visualizer/modalview/ios.bundle', code: 'InvalidMappingColumn', message: 'Your source map refers to generated column 40 on line 13, but the source only contains 37 column(s) on that line.\n' + 'Check that you are using the correct source map.', error: [AppError] } ] }

[misbell]

I added the noBorderChecks line and it runs, but there's no treemap, pretty much a blank window

[pot2mayo]

Same here. No details in the tree structure even after applying the patch.

"react-native-bundle-visualizer": "^3.1.3",
"react-native": "0.73.6",

[kangfenmao]

Same here. No details in the tree structure even after applying the patch.

"react-native-bundle-visualizer": "^3.1.3",
"react-native": "0.73.6",

npx source-map-explorer ios.bundle --no-border-checks

[pot2mayo]

@kangfenmao

npx source-map-explorer ios.bundle --no-border-checks

It worked, thanks 👍🏼

[sayan-wholewave]

nothing worked for me. "react-native": "0.74.2",

devDependencies "react-native-bundle-visualizer": "^3.1.3",

after running this : npx react-native-bundle-visualizer --platform android

Generating bundle... Welcome to Metro v0.80.9 Fast - Scalable - Integrated

info Writing bundle output to:, /var/folders/f3/nd_q0dz1475_r3z6hbmh_3zh0000gp/T/react-native-bundle-visualizer/AwesomeProject/android.bundle info Writing sourcemap output to:, /var/folders/f3/nd_q0dz1475_r3z6hbmh_3zh0000gp/T/react-native-bundle-visualizer/AwesomeProject/android.bundle.map info Done writing bundle output info Done writing sourcemap output Bundle is 8.85 MB in size (unchanged since last run) === error === { bundles: [], errors: [ { bundleName: '/var/folders/f3/nd_q0dz1475_r3z6hbmh_3zh0000gp/T/react-native-bundle-visualizer/AwesomeProject/android.bundle', code: 'InvalidMappingColumn', message: 'Your source map refers to generated column 6 on line 11, but the source only contains 4 column(s) on that line.\n' + 'Check that you are using the correct source map.', error: [AppError] } ] }

[devtyty]

Error with react-native 0.73.8