Not able to run on web in expo sdk 49
hyochan opened this issue · 7 comments
Current behavior:
I have posted issue in expo/expo#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:
- Create new expo app with SDK 49
npx create-expo-app@latest --template tabs@49
- Install @emotion/native
- Use
css
variable inView
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
@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.
@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
@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>
);
}
@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";
@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.
@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
@EvanBacon May I kindly spot you here? Do you think this issue can be closed?