react-native-web doesn't work with styled-components

Bug report

Importing styled-components/native or @emotion/native results in the following error:

{ Error: Cannot find module 'react-native'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/aleksanderhr/projects/experiments/with-react-native-web-app/node_modules/styled-components/native/dist/styled-components.native.cjs.js:16:35)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.styled-components/native (/Users/aleksanderhr/projects/experiments/with-react-native-web-app/.next/server/static/development/pages/index.js:225:18)
    at __webpack_require__ (/Users/aleksanderhr/projects/experiments/with-react-native-web-app/.next/server/static/development/pages/index.js:23:31)
    at Module../pages/index.tsx (/Users/aleksanderhr/projects/experiments/with-react-native-web-app/.next/server/static/development/pages/index.js:113:82)
    at __webpack_require__ (/Users/aleksanderhr/projects/experiments/with-react-native-web-app/.next/server/static/development/pages/index.js:23:31) code: 'MODULE_NOT_FOUND' }

Describe the bug

I’ve verified that react-native-web and styled-components work together (at least on 0.10.1 of RNW), by running this as a create-react-app. However, when the app is run on NextJS it fails. My guess is that the alias works fine for the client side of things (since create-react-app uses webpack internally) but that it fails when running on the server. But I might be off here.

A clear and concise description of what the bug is.

To Reproduce

• clone with-react-native-web example
• add styled-components
• change index.js to the following:

import React from "react";
import styled from "styled-components/native";

const Wrapper = styled.View``;
const StandardText = styled.Text`
  font-size: 12;
`;

export default props => (
  <Wrapper>
    <StandardText>YOYOYO</StandardText>
  </Wrapper>
);

Expected behavior

I expected the page to render “YOYOYO”

System information

• OS: macOS
• Browser chrome
• Version of [7.0.3, 8.0.1] (Tested both)

Versions Tested: react-native-web: [0.10.1, 0.11.1] styled-components: [3.0.0, 4.2.0, 5.0.0 (Canary)]

[ghost]

const withTM = require('next-transpile-modules')(['styled-components']);

module.exports = withTM({
  webpack: config => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'react-native$': 'react-native-web'
    }
    return config
  }
});

This worked for me

[Aleksion]

@lolcookie I tried both of those and eventually gave up. Wiring everything up myself with Razzle proved to be a lot easier