@haul-bundler/babel-preset-react-native can't import @react-native-community/masked-view
tkow opened this issue · comments
Environment
System:
OS: macOS 10.15.4
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Memory: 46.78 MB / 32.00 GB
Shell: 5.7.1 - /usr/local/bin/zsh
Binaries:
Node: 12.9.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.10.3 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.1
SDKs:
iOS SDK:
Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 23, 25, 26, 27, 28, 29
Build Tools: 27.0.3, 28.0.1, 28.0.3
System Images: android-28 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5692245
Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_181 - /usr/bin/javac
Python: 3.7.1
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: 0.62.2 => 0.62.2
npmGlobalPackages:
*react-native*: Not Found
Description
When I use @haul-bundler/babel-preset-react-native in babel.config.js, haul fails to bundle though module:metro-react-native-babel-preset don't.
I also found that when I specify looseMode: [/@react-native-community/masked-view/] in haul.config.js, bundle completes, but no class's exported from module.
see: https://github.com/tkow/haul-test/blob/commonjs-bug/App.tsx#L21 and https://github.com/tkow/haul-test/blob/commonjs-bug/haul.config.js#L7
Maybe it's related to MaskedView class is default exported formatted of commonjs but entrypoint is esm format.
Why it happens and mainly difference of @haul-bundler/babel-preset-react-native and module:metro-react-native-babel-preset?
Reproducible Demo
The looseMode is necessary and looking at the bundle the issue seems to be with Webpack and mixing ESM and CJS in @react-native-community/masked-view which is loosing the corrrect export along the way. This is not a Babel preset issue pre se. The reason it pops up when using @haul-bundler/babel-preset-react-native is because it doesn't transpile CJS to ESM and Metro's one does. You can probably workaround it by adding @babel/plugin-transform-modules-commonjs, but you'll loose some ESM optimisations like tree shaking that Webpack can do with ESM.
I see. Thanks a lot for saving my time. Exactly you're right and I found it works rewriting @react-native-community/masked-view from commonjs to ESM.