Metro bundler failure in Libraries/Animated/src/nodes/AnimatedSubtraction.js

[fungilation]

🐛 Bug Report

After upgrading my app from RN 0.57.8 to 0.59.4, in Metro Bundler output, on launch of my app:

::1 - - [10/Apr/2019:23:19:06 +0000] "GET /debugger-ui/debuggerWorker.js HTTP/1.1" 404 168 "http://localhost:8081/debugger-ui/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36"
 BUNDLE  [android, dev] ../../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1)::1 - - [10/Apr/2019:23:19:06 +0000] "GET /index.delta?platform=android&dev=true&minify=false HTTP/1.1" 500 - "http://localhost:8081/debugger-ui/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36"
error: bundling failed: SyntaxError: [APP]/node_modules/react-native/node_modules/react-native/Libraries/Animated/src/nodes/AnimatedSubtraction.js: Unexpected token (17:12)

  15 | const AnimatedWithChildren = require('./AnimatedWithChildren');
  16 | 
> 17 | import type {InterpolationConfigType} from './AnimatedInterpolation';
     |             ^
  18 | 
  19 | class AnimatedSubtraction extends AnimatedWithChildren {
  20 |   _a: AnimatedNode;
    at Parser.raise ([APP]/node_modules/@babel/parser/lib/index.js:3831:17)
    at Parser.unexpected ([APP]/node_modules/@babel/parser/lib/index.js:5143:16)
    at Parser.expectContextual ([APP]/node_modules/@babel/parser/lib/index.js:5115:41)
    at Parser.parseImport ([APP]/node_modules/@babel/parser/lib/index.js:8565:12)
    at Parser.parseStatementContent ([APP]/node_modules/@babel/parser/lib/index.js:7341:27)
    at Parser.parseStatement ([APP]/node_modules/@babel/parser/lib/index.js:7243:17)
    at Parser.parseBlockOrModuleBlockBody ([APP]/node_modules/@babel/parser/lib/index.js:7810:25)
    at Parser.parseBlockBody ([APP]/node_modules/@babel/parser/lib/index.js:7797:10)
    at Parser.parseTopLevel ([APP]/node_modules/@babel/parser/lib/index.js:7181:10)
    at Parser.parse ([APP]/node_modules/@babel/parser/lib/index.js:8660:17)
 BUNDLE  [android, dev] ../../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.

To Reproduce

• Upgraded my app from RN 0.57.8 to 0.59.4
• react-native run-android

Expected Behavior

No:

1. 404 in the debuggerWorker
2. 500 in the debugger-ui, with Metro error logged above

Code Example

I'm not sure how to best extract my app as a test case, but I'm hoping if the above error output is useful enough to trace what might be happening, and new to RN 0.59.

Environment

info 
  React Native Environment Info:
    System:
      OS: macOS 10.14.4
      CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
      Memory: 20.40 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 11.13.0 - /usr/local/bin/node
      Yarn: 1.15.2 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5314842
      Xcode: /undefined - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: ^0.59.4 => 0.59.4 
    npmGlobalPackages:
      eslint-plugin-react-native: 3.6.0
      react-native-cli: 2.0.1

[cpojer]

It seems like you are most likely overwriting your babel configuration with one that doesn't support stripping flow types.

[fungilation]

My .babelrc before upgrade (on RN 0.57.8):

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": ["idx"]
}

After upgrade to RN 0.59.4:

{
  "plugins": ["idx"]
}

Any issue with this? Is having a .babelrc at all a problem in RN 0.59?

[cpojer]

You should definitely be able to use a .babelrc so I'm not entirely sure what the problem is. I think you should probably put the preset back in. I assume that when you have a custom .babelrc, it disables all the stuff that RN comes with from the start.

I'm going to close this as it is unlikely an issue with RN itself, but feel free to keep discussing it here or somewhere else and if it turns out to be an RN issue, we can reopen it.