Description
- 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.