Not able to run on web in expo sdk 49

[hyochan]

Current behavior:

I have posted issue in https://github.com/expo/expo/issues/23412 and found out that emotion actually causes the problem.

Currently, import {css} from '@emotion/native'; and using css variable in style props does not render in expo web. It used to work fine in expo SDK 48.

To reproduce:

1. Create new expo app with SDK 49 npx create-expo-app@latest --template tabs@49
2. Install @emotion/native
3. Use css variable in View component.

   <View style={css``} />

Expected behavior:

Render well in web like in SDK 48.

Environment information:

• react version: 18.2.0
• @emotion/react version: ^11.11.0
• @emotion/native version: ^11.11.1

[Andarist]

@emotion/native is mainly driven by external contributions. I don't really use Emotion in the context of React Native and I don't have tooling and other things set up to jump into issues like this quickly. Any help with this would be highly appreciated.

[younes0]

@hyochan We don't have any problem with Expo 49, using Metro Bundler for Web, Nativewind & Emotion Native. Maybe you need to add the isCSSEnabled option Please see this more informations: https://discord.com/channels/695411232856997968/813967490430402591/1126346223717195897

[hyochan]

@younes0 How can I access the discord link? I can't access the given link https://discord.com/channels/695411232856997968/813967490430402591/1126346223717195897

I have isCSSEnabled option in metro.config.js

const config = getDefaultConfig(__dirname, {
  isCSSEnabled: true,
});

I still see below error with below code.

import {Text, View} from 'react-native';
import styled from '@emotion/native';

const Container = styled.View`
  flex: 1;
  align-self: stretch;
  background-color: ${({theme}) => theme.bg.basic};
`;

export default function App(): JSX.Element {
  return (
    <Container>
      <Text>Hello world!</Text>
    </Container>
  );
}

However, this works fine when I remove @emotion/native.

import {Text, View} from 'react-native';

export default function App(): JSX.Element {
  return (
    <View>
      <Text>Hello world!</Text>
    </View>
  );
}

[younes0]

@hyochan these are my instructions, they aren't official

You need to add support for .mjs files in metro.config.js for some packages

config.resolver.sourceExts.push("mjs");

you can add (unstable) support for CSS for metro, which I recommend if you use nativewind

const config = getDefaultConfig(__dirname, {
  isCSSEnabled: true,
});

For react-refresh support, from what I understdood you need to add these packages

yarn add --dev @expo/metro-runtime react-refresh

• and import metro-runtime in your App.tsx (maybe before everything else?)

  import "@expo/metro-runtime";

[hyochan]

@younes0 I did everything above and you can also try this out in https://github.com/dooboolab-community/expo-router-starter/tree/migration/expo-49.

I am still seeing below error.

The problem might be also related to expo-router too since I feel like you are not using it.

[younes0]

@hyochan I don't use Expo Router.

I think you can close this issue as it's not related to Emotion, Emotion Native (css literal or styled) works fine on my setup (Expo 49, with Webpack or Metro as bundler). Expo Discord may be a more suitable place to ask for help as it may be not a bug in the mentioned packages.

I didn't try Expo Router and I am not sure my configuration suits Expo-Router, you could check this comment

[hyochan]

@EvanBacon May I kindly spot you here? Do you think this issue can be closed?