Test case for integrating Next.js and react-native-web. The current approach breaks server rendering the critical styles.
- Clone this repository.
yarn installyarn start- Open http://localhost:3000
- Disable JavaScript in your browser.
- Refresh the page.
The "critical" styles for the page are rendered by the server.
The "critical" styles for the page are missing.
- This seems related to a previous
react-native-webissue, but I am failing to determine how to properly integrate Next.js as the app renderer. - Next.js provides a way to define a custom document that is often utilized integrate CSS-in-JS server rendering (e.g. style-components, glamorous, emotion, aphrodite).
- Server rendered styles worked prior to the
react-native-webchanging the default exports to ES6 modules in0.7.0. - Using the
commonjs: trueforbabel-plugin-react-native-webrather than compilingreact-native-webwith webpack fixes the missing styles (i.e. revert this change).