Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Source-map-explorer error #118

Open
gabimoncha opened this issue Feb 15, 2023 · 50 comments
Open

Source-map-explorer error #118

gabimoncha opened this issue Feb 15, 2023 · 50 comments

Comments

@gabimoncha
Copy link

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
Copy link

JHeigle commented Feb 16, 2023

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

@scrungrth
Copy link

scrungrth commented Feb 16, 2023

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

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

@hurali97
Copy link
Collaborator

@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
Copy link

nicolasburtey commented Feb 19, 2023

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
Copy link
Collaborator

@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
Copy link

arif-dewi commented Feb 23, 2023

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
Copy link
Author

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

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

Not working

@gabimoncha
Copy link
Author

gabimoncha commented Feb 24, 2023

@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
Copy link

This is probably related to this: #116

Try this temp fix: #116 (comment)

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
Copy link
Author

gabimoncha commented Mar 13, 2023

@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
Copy link
Collaborator

hurali97 commented Mar 14, 2023

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
Copy link
Collaborator

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
Copy link

@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
Copy link
Collaborator

hurali97 commented Mar 15, 2023

@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
Copy link
Author

I confirm that 3.1.0 is working for 0.67.5 too

@hurali97
Copy link
Collaborator

@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
Copy link
Author

Thanks. Will check that and get back to you

@gabimoncha
Copy link
Author

gabimoncha commented Mar 23, 2023

That is correct. 3.1.2 is working @hurali97

@effektsvk
Copy link

effektsvk commented Apr 4, 2023

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

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
Copy link
Collaborator

hurali97 commented Apr 5, 2023

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
Copy link

Peeeep commented Apr 10, 2023

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
Copy link

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
Copy link

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
Copy link

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
Copy link

szt217 commented Jun 15, 2023

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
Copy link

jarnove commented Jul 27, 2023

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

Any update on this?

@fatemehmarzoughi
Copy link

@hurali97 Your update also worked for me )

@minhthuhai
Copy link

minhthuhai commented Sep 5, 2023

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
Copy link

kunalphaltankar commented Sep 6, 2023

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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

@kangfenmao
Copy link

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

@jslok jslok mentioned this issue Mar 5, 2024
@misbell
Copy link

misbell commented Apr 24, 2024

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
Copy link

misbell commented Apr 24, 2024

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

@pot2mayo
Copy link

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
Copy link

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
Copy link

@kangfenmao

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

It worked, thanks 👍🏼

@sayan-avantai
Copy link

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
Copy link

devtyty commented Jun 18, 2024

Error with react-native 0.73.8

@vksgautam1
Copy link

vksgautam1 commented Jul 9, 2024

error with 0.73.8
=== error === {
bundles: [],
errors: [
{
bundleName: '/var/folders/n6/zp9z88mj2033bf9t_z5tx3qh0000gn/T/react-native-bundle-visualizer/caresm/ios.bundle',
code: 'InvalidMappingColumn',
message: 'Your source map refers to generated column 40 on line 6, but the source only contains 38 column(s) on that line.\n' +
'Check that you are using the correct source map.',
error: [AppError]
}
]
}

@Jahanzeb009
Copy link

Jahanzeb009 commented Jul 17, 2024

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

Works but empty tree map on 0.74.3

@kpose
Copy link

kpose commented Jul 23, 2024

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

Works but empty tree map on 0.74.1
Unable to map 22108684/23290850 bytes (94.92%)

@chen834921478
Copy link

添加此行:

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

这样之后我这里运行起来了

@cawfree
Copy link

cawfree commented Oct 18, 2024

It would appear that source-map-explorer is miscalculating the EOL character.

Instead of detecting \n in React Native's JavaScript bundle, it instead detected \r\n, meaning the number of lines in the bundle were underestimated. This longstanding issue is documented more thoroughly here.

Applying the following hack to node_modules/source-map-explorer/lib/explore.js appears to resolve the issue:

function computeFileSizes(sourceMapData, options, coverageRanges) {
  const { consumer, codeFileContent: fileContent } = sourceMapData;
  const sourceMapComment = getSourceMapComment(fileContent);
  const sourceContent = fileContent.replace(sourceMapComment, '').trim();
- const eol = helpers_1.detectEOL(fileContent);
+ const eol = '\n';//helpers_1.detectEOL(fileContent);
  const lines = sourceContent.split(eol);

This allows exploration of a generated bundle source map to complete without enabling noBorderChecks.

@kingjack
Copy link

same error === error === {
bundles: [],
errors: [
{
bundleName: '/var/folders/6b/p3mmjslj43v_p9jwgxpp00_80000gp/T/react-native-bundle-visualizer/ztokydcim/ios.bundle',
code: 'InvalidMappingColumn',
message: 'Your source map refers to generated column 50 on line 41, but the source only contains 45 column(s) on that line.\n' +
'Check that you are using the correct source map.',
error: [AppError]
}
]

@freeboub
Copy link

It would appear that source-map-explorer is miscalculating the EOL character.

Instead of detecting \n in React Native's JavaScript bundle, it instead detected \r\n, meaning the number of lines in the bundle were underestimated. This longstanding issue is documented more thoroughly here.

Applying the following hack to node_modules/source-map-explorer/lib/explore.js appears to resolve the issue:

function computeFileSizes(sourceMapData, options, coverageRanges) {
  const { consumer, codeFileContent: fileContent } = sourceMapData;
  const sourceMapComment = getSourceMapComment(fileContent);
  const sourceContent = fileContent.replace(sourceMapComment, '').trim();
- const eol = helpers_1.detectEOL(fileContent);
+ const eol = '\n';//helpers_1.detectEOL(fileContent);
  const lines = sourceContent.split(eol);

This allows exploration of a generated bundle source map to complete without enabling noBorderChecks.

I confirm this is fixing the error, Thank you very much !

@Grohden
Copy link

Grohden commented Nov 15, 2024

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

combining this with the EOL fix makes my tree map at least have my src folder included (as opposed to having none)

around 19% still unmaped though 😞

Edit: btw, I was curious about which parts of the sources where referencing \r\n, so I added a dump (fs.writeFileSync('dump.txt', fileContent.replaceAll('\r\n','\r\n-MARKER-R-N-'))) to that calculate part and checked.. there's a lot of license comments using that EOL 😞

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests