[Native] Can't resolve & Unexpected token for node_modules/react-native lib

ManAnRuck commented 4 years ago

Bug Report

Describe the bug running Docz failed with a lot of Can't resolve & Unexpected token errors for node_modules/react-native library

To Reproduce

git clone https://github.com/demokratie-live/democracy-app/tree/docs/doczJs checkout docs/doczJs branch

run: yarn docz

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '../Components/AccessibilityInfo/AccessibilityInfo' in '/Users/USERNAME/Jobs/democracy-deutschland/sources/democracy/node_modules/react-native/Libraries/react-native'

File: ../node_modules/react-native/Libraries/react-native/react-native-implementation.js

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '../Components/CheckBox/CheckBox' in '/Users/USERNAME/Jobs/democracy-deutschland/sources/democracy/node_modules/react-native/Libraries/react-native'

File: ../node_modules/react-native/Libraries/react-native/react-native-implementation.js

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '../Components/DatePicker/DatePickerIOS' in '/Users/USERNAME/Jobs/democracy-deutschland/sources/democracy/node_modules/react-native/Libraries/react-native'

File: ../node_modules/react-native/Libraries/react-native/react-native-implementation.js

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '../Components/DatePickerAndroid/DatePickerAndroid' in '/Users/USERNAME/Jobs/democracy-deutschland/sources/democracy/node_modules/react-native/Libraries/react-native'

File: ../node_modules/react-native/Libraries/react-native/react-native-implementation.js

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '../Components/DrawerAndroid/DrawerLayoutAndroid' in '/Users/USERNAME/Jobs/democracy-deutschland/sources/democracy/node_modules/react-native/Libraries/react-native'

File: ../node_modules/react-native/Libraries/react-native/react-native-implementation.js

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '../Components/MaskedView/MaskedViewIOS' in '/Users/USERNAME/Jobs/democracy-deutschland/sources/democracy/node_modules/react-native/Libraries/react-native'

File: ../node_modules/react-native/Libraries/react-native/react-native-implementation.js

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '../Components/Picker/PickerIOS' in '/Users/USERNAME/Jobs/democracy-deutschland/sources/democracy/node_modules/react-native/Libraries/react-native'

File: ../node_modules/react-native/Libraries/react-native/react-native-implementation.js

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '../Components/ProgressBarAndroid/ProgressBarAndroid' in '/Users/USERNAME/Jobs/democracy-deutschland/sources/democracy/node_modules/react-native/Libraries/react-native'

File: ../node_modules/react-native/Libraries/react-native/react-native-implementation.js

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '../Components/ProgressViewIOS/ProgressViewIOS' in '/Users/USERNAME/Jobs/democracy-deutschland/sources/democracy/node_modules/react-native/Libraries/react-native'

File: ../node_modules/react-native/Libraries/react-native/react-native-implementation.js

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '../Components/SegmentedControlIOS/SegmentedControlIOS' in '/Users/USERNAME/Jobs/democracy-deutschland/sources/democracy/node_modules/react-native/Libraries/react-native'

File: ../node_modules/react-native/Libraries/react-native/react-native-implementation.js

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '../Components/StatusBar/StatusBarIOS' in '/Users/USERNAME/Jobs/democracy-deutschland/sources/democracy/node_modules/react-native/Libraries/react-native'

File: ../node_modules/react-native/Libraries/react-native/react-native-implementation.js

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '../Components/ToastAndroid/ToastAndroid' in '/Users/USERNAME/Jobs/democracy-deutschland/sources/democracy/node_modules/react-native/Libraries/react-native'

File: ../node_modules/react-native/Libraries/react-native/react-native-implementation.js

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '../Components/Touchable/TouchableNativeFeedback' in '/Users/USERNAME/Jobs/democracy-deutschland/sources/democracy/node_modules/react-native/Libraries/react-native'

File: ../node_modules/react-native/Libraries/react-native/react-native-implementation.js

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '../Image/Image' in '/Users/USERNAME/Jobs/democracy-deutschland/sources/democracy/node_modules/react-native/Libraries/react-native'

File: ../node_modules/react-native/Libraries/react-native/react-native-implementation.js

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '../Settings/Settings' in '/Users/USERNAME/Jobs/democracy-deutschland/sources/democracy/node_modules/react-native/Libraries/react-native'

File: ../node_modules/react-native/Libraries/react-native/react-native-implementation.js

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '../Utilities/BackHandler' in '/Users/USERNAME/Jobs/democracy-deutschland/sources/democracy/node_modules/react-native/Libraries/react-native'

File: ../node_modules/react-native/Libraries/react-native/react-native-implementation.js

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '../Utilities/Platform' in '/Users/USERNAME/Jobs/democracy-deutschland/sources/democracy/node_modules/react-native/Libraries/react-native'

File: ../node_modules/react-native/Libraries/react-native/react-native-implementation.js

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (12:12)

File: ../node_modules/react-native/Libraries/ReactNative/UIManager.js:12:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (13:12)

File: ../node_modules/react-native/Libraries/Renderer/shims/ReactNative.js:13:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (13:12)

File: ../node_modules/react-native/Libraries/NativeModules/specs/NativeDialogManagerAndroid.js:13:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (13:12)

File: ../node_modules/react-native/Libraries/Utilities/NativeDeviceInfo.js:13:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (13:12)

File: ../node_modules/react-native/Libraries/Components/View/View.js:13:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (144:27)

File: ../node_modules/react-native/Libraries/ART/ReactNativeART.js:144:27

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (14:12)

File: ../node_modules/react-native/Libraries/TurboModule/TurboModuleRegistry.js:14:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (14:13)

File: ../node_modules/react-native/Libraries/Utilities/useWindowDimensions.js:14:13

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (14:19)

File: ../node_modules/react-native/Libraries/ReactNative/I18nManager.js:14:19

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (14:29)

File: ../node_modules/react-native/Libraries/Color/normalizeColor.js:14:29

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (14:7)

File: ../node_modules/react-native/Libraries/Components/TimePickerAndroid/TimePickerAndroid.js:14:7

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (15:12)

File: ../node_modules/react-native/Libraries/YellowBox/YellowBox.js:15:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (15:12)

File: ../node_modules/react-native/Libraries/Components/SafeAreaView/SafeAreaView.js:15:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (15:16)

File: ../node_modules/react-native/Libraries/Utilities/warnOnce.js:15:16

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (15:19)

File: ../node_modules/react-native/Libraries/DeprecatedPropTypes/DeprecatedPointPropType.js:15:19

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (15:34)

File: ../node_modules/react-native/Libraries/DeprecatedPropTypes/DeprecatedEdgeInsetsPropType.js:15:34

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (15:48)

File: ../node_modules/react-native/Libraries/ReactNative/RootTagContext.js:15:48

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (15:7)

File: ../node_modules/react-native/Libraries/Alert/Alert.js:15:7

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (16:12)

File: ../node_modules/react-native/Libraries/EventEmitter/RCTDeviceEventEmitter.js:16:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (16:12)

File: ../node_modules/react-native/Libraries/Interaction/PanResponder.js:16:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (16:7)

File: ../node_modules/react-native/Libraries/Utilities/Dimensions.js:16:7

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (17:12)

File: ../node_modules/react-native/Libraries/Lists/SectionList.js:17:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (17:12)

File: ../node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:17:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (17:12)

File: ../node_modules/react-native/Libraries/PermissionsAndroid/PermissionsAndroid.js:17:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (17:36)

File: ../node_modules/react-native/Libraries/Image/ImagePickerIOS.js:17:36

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (17:5)

File: ../node_modules/react-native/Libraries/LayoutAnimation/LayoutAnimation.js:17:5

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (18:12)

File: ../node_modules/react-native/Libraries/Components/Switch/Switch.js:18:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (18:12)

File: ../node_modules/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js:18:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (18:12)

File: ../node_modules/react-native/Libraries/StyleSheet/StyleSheet.js:18:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (18:12)

File: ../node_modules/react-native/Libraries/Lists/VirtualizedSectionList.js:18:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (18:12)

File: ../node_modules/react-native/Libraries/Components/RefreshControl/RefreshControl.js:18:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (18:27)

File: ../node_modules/react-native/Libraries/StyleSheet/processColor.js:18:27

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (19:12)

File: ../node_modules/react-native/Libraries/Components/Slider/Slider.js:19:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (19:12)

File: ../node_modules/react-native/Libraries/Components/Picker/Picker.js:19:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (19:12)

File: ../node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:19:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (19:12)

File: ../node_modules/react-native/Libraries/Components/TextInput/InputAccessoryView.js:19:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (20:12)

File: ../node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js:20:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (20:27)

File: ../node_modules/react-native/Libraries/Animated/src/Animated.js:20:27

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (21:12)

File: ../node_modules/react-native/Libraries/Lists/FlatList.js:21:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (21:12)

File: ../node_modules/react-native/Libraries/ReactNative/AppRegistry.js:21:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (21:5)

File: ../node_modules/react-native/Libraries/Share/Share.js:21:5

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (21:7)

File: ../node_modules/react-native/Libraries/Interaction/InteractionManager.js:21:7

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (22:17)

File: ../node_modules/react-native/Libraries/UTFSequence.js:22:17

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (22:7)

File: ../node_modules/react-native/Libraries/Components/Keyboard/Keyboard.js:22:7

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (23:12)

File: ../node_modules/react-native/Libraries/Components/Button.js:23:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (23:14)

File: ../node_modules/react-native/Libraries/Vibration/Vibration.js:23:14

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (23:7)

File: ../node_modules/react-native/Libraries/Components/StatusBar/StatusBar.js:23:7

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (24:11)

File: ../node_modules/react-native/Libraries/Components/AppleTV/TVEventHandler.js:24:11

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (24:12)

File: ../node_modules/react-native/Libraries/Modal/Modal.js:24:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (24:12)

File: ../node_modules/react-native/Libraries/Text/Text.js:24:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (24:19)

File: ../node_modules/react-native/Libraries/DeprecatedPropTypes/DeprecatedViewPropTypes.js:24:19

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (24:47)

File: ../node_modules/react-native/Libraries/ReactNative/requireNativeComponent.js:24:47

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (26:12)

File: ../node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.js:26:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (26:12)

File: ../node_modules/react-native/Libraries/Components/Touchable/Touchable.js:26:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (26:12)

File: ../node_modules/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js:26:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (27:12)

File: ../node_modules/react-native/Libraries/Components/Touchable/TouchableHighlight.js:27:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (27:13)

File: ../node_modules/react-native/Libraries/Components/Clipboard/Clipboard.js:27:13

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (27:16)

File: ../node_modules/react-native/Libraries/AppState/AppState.js:27:16

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (28:7)

File: ../node_modules/react-native/Libraries/PushNotificationIOS/PushNotificationIOS.js:28:7

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (29:19)

File: ../node_modules/react-native/Libraries/Storage/AsyncStorage.js:29:19

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (29:19)

File: ../node_modules/react-native/Libraries/Performance/Systrace.js:29:19

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (30:12)

File: ../node_modules/react-native/Libraries/Components/ScrollView/ScrollView.js:30:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (30:12)

File: ../node_modules/react-native/Libraries/Components/TextInput/TextInput.js:30:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (30:12)

File: ../node_modules/react-native/Libraries/Lists/VirtualizedList.js:30:12

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (38:23)

File: ../node_modules/react-native/Libraries/Linking/Linking.js:38:23

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (40:11)

File: ../node_modules/react-native/Libraries/ActionSheetIOS/ActionSheetIOS.js:40:11

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (41:45)

File: ../node_modules/react-native/Libraries/Image/ImageBackground.js:41:45

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (64:16)

File: ../node_modules/react-native/Libraries/Animated/src/Easing.js:64:16

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (84:14)

File: ../node_modules/react-native/Libraries/Utilities/PixelRatio.js:84:14

failed Re-building development bundle - 9.998s

————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
4 pages                                                          Failed                                                         docz-app

Expected behavior

let Docz work :)

Environment

docz version: [2.0.0-rc.65]
OS: [macOS Catalina]
Node/npm version: [Node 10/Yarn 1.19.1]

rakannimer commented 4 years ago

Hey @ManAnRuck

To use react-native in your docz app you will need to alias react-native to react-native-web and install react-native-web as a dependency.

For more details, you can check out the recently updated react-native example here :

https://github.com/doczjs/docz/tree/master/examples/react-native

I took a quick look at your codebase and you might need to also alias react-native-linear-gradient to react-native-web-linear-gradient

Let me know if it works as expected 👍

ManAnRuck commented 4 years ago

thanks @rakannimer okay, :) this looks one step better. but still some issues.

first is TypeError: Constructor requires 'new' operator on Button.mdx https://github.com/demokratie-live/democracy-app/blob/docs/doczJs/packages/mobile-ui/src/components/Button/Button.mdx

second with styled-components/native in Header.mdx <- here I tried already to add an alias but same issue https://github.com/demokratie-live/democracy-app/blob/docs/doczJs/packages/mobile-ui/src/components/Instruction/Header.mdx

rakannimer commented 4 years ago

I opened a PR (https://github.com/demokratie-live/democracy-app/pull/1) that should resolve all the issues you're seeing.

Re-writing here what I wrote in the PR description for whoever's interested :

I found three problems in the codebase :

styled-components 4.4.0 has an issue with react-native-web. The next SC release will have the fix built in so make sure to update when it's released. For now I added 4.4.0-reactnativewebfix
Missing tsconfig in repo root causing docz to silently fail when parsing the component props.
docz had an issue where lower case component names (e.g. index.tsx) had to be manually included in the projects files by modifying filterComponents in doczrc.js. Thanks to @esturcke this is no longer an issue so I updated docz to latest version in the next tag.

ManAnRuck commented 4 years ago

awesome!!! 👏 thank you very much for supporting the German democracy 😉

also nice to see the tsconfig styled settings, I was looking for this padding-horizontal 😍

doczjs / docz

[Native] Can't resolve & Unexpected token for node_modules/react-native lib #1213

Bug Report