Metro bundle extremely slow and gets stuck with babel v7.17.x

[milos201]

Description

I had a huge issue bundling the app for development and production as soon as I updated the following packages to the latest version:

"@babel/core": "7.16.12",
"@babel/plugin-proposal-decorators": "7.16.7",
"@babel/runtime": "7.16.7",
"babel-jest": "27.5.1",
"metro-react-native-babel-preset": "0.67.0",

Basically, one of the mentioned packages is causing metro to bundle extremely slow and finally get stuck at approximately 90%. After I reverted the package.json back to an older version, it still didn't help because of the ^. I had to remove ^ from the packages I mentioned, and it was back to normal.

I'm guessing it's a babel issue (I also updated React Native to 0.67.3), but I think you guys should know, I spent all day yesterday trying to resolve this (I also looked on here) without any luck.

Also, after all of that I was required to install 2 additional packages:

"@babel/plugin-transform-arrow-functions": "7.16.7",
"@babel/plugin-transform-shorthand-properties": "7.16.7",

Version

0.67.3

Output of npx react-native info

System:
    OS: macOS 12.2.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 606.40 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.5.2 - /usr/local/bin/npm
    Watchman: 2022.02.21.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
    Android SDK:
      API Levels: 30, 31
      Build Tools: 30.0.2, 31.0.0, 32.0.0
      System Images: android-30 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: Bumblebee 2021.1.1 Patch 2 Bumblebee 2021.1.1 Patch 2
    Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.67.3 => 0.67.3
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Running npx react-native start after updating all the packages to the latest version.

Snack, code example, screenshot, or link to a repository

No response

[efstathiosntonas]

same here, being trying to solve it for 2 days, was wondering what the heck was going on.

[efstathiosntonas]

@milos201 about installing these two packages:

"@babel/plugin-transform-arrow-functions": "7.16.7",
"@babel/plugin-transform-shorthand-properties": "7.16.7",

you could just install: @babel/preset-env and @babel/preset-typescript. (regardless project is using typescript or not)

I believe you're using react-native-gesture-handler 2.x that's why those two packages you mentioned are required. Link to the issue

[cortinico]

This is probably worth to move this under github.com/facebook/metro for visibility

[efstathiosntonas]

Here's how I've fixed it on rn 0.67.3

package.json: (notice no ^)

  "devDependencies": {
    "@babel/core": "7.15.5",
    "@babel/runtime": "7.15.4",
    "@babel/preset-env": "7.15.8",
    "@babel/preset-typescript":"7.15.0",
    "metro-react-native-babel-preset": "^0.66.2"
     ...

1. Deleted node_modules
2. Deleted yarn.lockor package-lock.json in case of npm
3. Deleted yarn cache yarn cache clean or in case of npm npm clean cache --force
4. yarn install or npm install
5. run watchman watch-del-all in console
6. Cleared Derived Data on Xcode and Product -> Clean Build Folder

I've had to add 2 extra packages on devDependencies because of this: facebook/metro#781

[milos201]

@efstathiosntonas Thank you. That worked great.

[efstathiosntonas]

@milos201 please don’t close the issue as other devs might face the same. Please also consider opening an issue on facebook/metro repo.

[efstathiosntonas]

Thanks @milos201, it took us 2 days to find out what was going on, hopefully this gets fixed soon as it’s extremely hard to spot the issue.

[cortinico]

@motiz88 @rh389 I've moved over this from RN to Metro. Is there anything actionable on your end here?

[motiz88]

1. Does this repro in a fresh app created with the latest React Native release?
2. Alternatively, is there a link to a repo that shows this behaviour so that we can investigate?

[milos201]

1. Does this repro in a fresh app created with the latest React Native release?
2. Alternatively, is there a link to a repo that shows this behaviour so that we can investigate?

1. Yes, no matter if it's a fresh React Native app or not, the same problem occurs. The only important part is babel (and babel related modules) are updated to the latest version.
2. No, sorry, project is private. What you need to reproduce it is fresh generated React Native app with babel and babel related modules updated to the latest versions.

[renchap]

This seems to only happen for iOS release builds for me, which seems weird.

Metro takes about 40 seconds to build the bundle for Android release builds, but takes about 10 minutes for the iOS release builds. Development build times are normal.

Can this help to narrow the possible cause?

[renchap]

While trying to solve this, I switched my project to https://github.com/EvanBacon/metro-minify-esbuild and I am no longer seeing the issue.

@milos201 can you try if this fixes it as well for you? If yes, then the issue is most probably with the default Metro minifier.

[renchap]

metro-minify-esbuild generates incomplete sourcemaps.

I thought that Metro used terser as the default minifier but it does not seem to be the case. Switching the minifier to metro-minify-terser solved the slow production build issue as well, but with correct sourcemaps this time.

I think the slow production build with modern Babel is caused by the default minifier (uglify-es) not supporting some modern syntax outputted by Babel.