React-native-web: Build broken in 0.11 on server side: 'react-native-web' does not contain a default export

[msand]

The problem
A minimal project with next.js react-native-web and styled-components doesn't build in 0.11 but works in 0.10 Am I missing something or is this a bug?

How to reproduce

git clone https://github.com/msand/react-native-web-styled-components-bug.git
cd react-native-web-styled-components-bug
yarn
yarn dev
open http://localhost:3000

Exception:

./node_modules/styled-components/native/dist/styled-components.native.esm.js
Attempted import error: 'react-native-web' does not contain a default export (imported as 'reactNative').

./node_modules/styled-components/native/dist/styled-components.native.esm.js
Attempted import error: 'react-native-web' does not contain a default export (imported as 'reactNative').
TypeError: Cannot read property 'StyleSheet' of undefined
    at Module../node_modules/styled-components/native/dist/styled-components.native.esm.js

Expected behavior
Styling a View using styled-components and react-native-web works without crashes/build errors.

Environment (include versions). Did this work in previous versions?

The commit before this works, and only difference is upgrade of react-native-web from 0.10 to 0.11

• React Native for Web (version): 0.11
• React (version): ^16.8.4
• Browser: latest Chrome

[necolas]

The release notes mention that this import pattern, used by styled-components, is no longer supported:

import reactNative from 'react-native'

This change is necessary for expo web support.

They could change to:

import * as reactNative

[msand]

Oh, thanks! Sorry for bothering.

[msand]

This seems to run against a bit of troubles with the lean core efforts, import * as causes e.g. Navigator to be imported, and throw exceptions:

Invariant Violation: Navigator is deprecated and has been removed from this package. It can now be installed and imported fromreact-native-deprecated-custom-componentsinstead ofreact-native. Learn about alternative navigation solutions at http://facebook.github.io/react-native/docs/navigation.html

https://travis-ci.org/styled-components/styled-components/jobs/505939938#L755

[necolas]

Thanks that's good to know. React Native is in a bit of a messy transitional phase. RNW sort of has to move faster on some of these changes than RN because web apps have more demanding bundle / parse / eval constraints. Sorry for the disruption!

[chrisdevereux]

This change potentially breaks a lot of third party packages. Would it make sense to offer a compatibility build during the transition process?

[pflevy]

In case someone gets the error, I solved it by accessing the file node_modules/styled-components/native/dist/styled-components.native.esm and changing:
import reactNative, {StyleSheet} from 'react-native';
to:
import {StyleSheet} from 'react-native';

Then searched where 'reactNative' was being used and changed the return of the function on line 7009 to
return styled(alias);

Also to use it on the project you should call styled(Component) instead of styled.Component:
const StyledView = styled(View)``;