TypeError: Cannot read properties of undefined (reading 'withConfig')

[DaleWebb]

Thanks for creating this package! It helped solve my problem of why simply importing only the ThemeProvider from styled-components/native would import all of react-native-web.

---

I encountered a runtime error while using this plugin in a mono-repo with NextJS v12 and React Native Web v0.17.

TypeError: Cannot read properties of undefined (reading 'withConfig')

I created a styled component like this, in my design-system mono-repo package:

import styled from 'styled-components/native';

export const Box = styled.View(...);

By changing styled.View to styled(View) (where View is imported from react-native-web), I was able to resolve the problem. However, this resolution appears to be the job of your plugin.

---

My Babel config (within my NextJS mono-repo package)

```js module.exports = { presets: ['next/babel'], plugins: [ [ 'babel-plugin-styled-components', { ssr: true, }, ], ['react-native-web'], 'babel-plugin-styled-components-react-native-web', ], }; ```

My patch file

```diff -var reactNative = require('react-native'); +import { StyleSheet as ReactNativeStyleSheet } from 'react-native'; -var InlineStyle = _InlineStyle(reactNative.StyleSheet); +var InlineStyle = _InlineStyle(ReactNativeStyleSheet); var StyledNativeComponent$1 = _StyledNativeComponent(InlineStyle); var styled = function styled(tag) { return constructWithOptions(StyledNativeComponent$1, tag); }; -/* React native lazy-requires each of these modules for some reason, so let's - * assume it's for a good reason and not eagerly load them all */ - - -var aliases = "ActivityIndicator ActivityIndicatorIOS ART Button DatePickerIOS DrawerLayoutAndroid\n Image ImageBackground ImageEditor ImageStore KeyboardAvoidingView ListView MapView Modal NavigatorIOS\n Picker PickerIOS ProgressBarAndroid ProgressViewIOS ScrollView SegmentedControlIOS Slider\n SliderIOS SnapshotViewIOS Switch RecyclerViewBackedScrollView RefreshControl SafeAreaView StatusBar\n SwipeableListView SwitchAndroid SwitchIOS TabBarIOS Text TextInput ToastAndroid ToolbarAndroid\n Touchable TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback\n View ViewPagerAndroid WebView FlatList SectionList VirtualizedList Pressable"; -/* Define a getter for each alias which simply gets the reactNative component - * and passes it to styled */ - -aliases.split(/\s+/m).forEach(function (alias) { - return Object.defineProperty(styled, alias, { - enumerable: true, - configurable: false, - get: function get() { - return styled(reactNative[alias]); - } - }); -}); ```

[christophehurpeau]

Hello, Thank you for your issue ! I was pretty sure I wrote a comment when I tried to fixed the issue but maybe I forgot to click on the button to submit it. I'm happy to see that I wasn't the only one to measure the impact on the web bundle size when adding styled-components with react-native web :) Please let me know if the fix I made does fix your issue !

[christophehurpeau]

@DaleWebb can you confirm it's fixed for you too ? Thanks

[DaleWebb]

Sorry, I refactored out of my project - I'll go back to a commit where I still had it and try it out when I can.

Thanks for addressing it!