.babelrc overrides test not called for every file

[LinusU]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.5
      CPU: x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
      Memory: 26.12 MB / 16.00 GB
      Shell: 5.5.1 - /usr/local/bin/zsh
    Binaries:
      Node: 10.5.0 - /usr/local/bin/node
      Yarn: 1.7.0 - /usr/local/bin/yarn
      npm: 6.1.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        Build Tools: 23.0.1, 26.0.3, 27.0.3
        API Levels: 19, 23, 26
    IDEs:
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      @types/react: ^16.4.6 => 16.4.6 
      @types/react-native: ^0.55.26 => 0.55.26 
      react: 16.4.1 => 16.4.1 
      react-native: 0.56.0 => 0.56.0 
    npmGlobalPackages:
      babel-preset-react-native-typescript: 1.0.0-rc.1
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1

Description

The overrides block of .babelrc doesn't seem to be respected for files in node_modules/. I'm trying to apply one config for .ts files, and another one for all other files. Unfortunately, it seems like the overrides block isn't called at all when transpiling e.g. the react-native lib itself.

Reproducible Demo

Create an empty React Native project, and replace the .babelrc with this .babelrc.js file:

const fs = require('fs')

function log (line) {
  fs.appendFileSync('babel.log', line + '\n')
}

module.exports = {
  "presets": [],
  "plugins": [],
  "overrides": [
    {
      "test": a => { log(a); return a.endsWith('.ts') || a.endsWith('.tsx') },
      "presets": ["react-native-typescript"]
    },
    {
      "test": a => { log(a); return !a.endsWith('.ts') && !a.endsWith('.tsx') },
      "presets": ["react-native"]
    }
  ]
}

When bundling you can observe the problem by seeing this error message instead of a successful build:

error: bundling failed: SyntaxError: /Users/linus/coding/ctrlpanel-android/node_modules/react-native/Libraries/Lists/FlatList.js: Unexpected token (21:12)

  19 | const invariant = require('fbjs/lib/invariant');
  20 | 
> 21 | import type {DangerouslyImpreciseStyleProp} from 'StyleSheet';
     |             ^
  22 | import type {
  23 |   ViewabilityConfig,
  24 |   ViewToken,

As that file name did not end with .ts or .tsx it should have gotten the preset with the Flow plugin, but alas it didn't.

Opening up the babel.log file we can see that there are only entries for index.js and App.js. No entries for e.g. node_modules/react-native/Libraries/Lists/FlatList.js.

[react-native-bot]

I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

[kelset]

Note: this has been fixed in Babel 7.0.0-beta.48. See this comment for more details.