nativewind
nativewind copied to clipboard
entry.js dies with fresh start create-expo-app@latest & nativewind@^4.0.1
Describe the bug If you start a fresh project with React Native, Expo Router and NativeWind V4, the project dies when you call up the web version.
Reproduction
- Quick Start Expo: npx create-expo-app@latest
- Use this instructions: https://www.nativewind.dev/v4/getting-started/expo-router
- Start the project with
npx expo --clear - Wait for the menu
- Press "w" to start the browser
- See how it dies
Setup:
- Windows: 10
- Node: v21.6.2
- NPM: 10.8.2
Expected behavior I think the project should be easy to open in the browser and you should be able to use Tailwind (classNames)
additional
app/_layout.tsx
import {Stack} from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import {useFonts} from "expo-font";
import {useEffect} from "react";
import '../global.css';
SplashScreen.preventAutoHideAsync();
export default function RootLayout() {
const [loaded] = useFonts({
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
});
useEffect(() => {
if (loaded) {
SplashScreen.hideAsync();
}
}, [loaded]);
if (!loaded) {
return null;
}
return (
<Stack screenOptions={{headerShown: false}}>
<Stack.Screen name="(auth)"/>
<Stack.Screen name="(tabs)"/>
</Stack>
);
}
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
// NOTE: Update this to include the paths to all of your component files.
content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
presets: [require("nativewind/preset")],
theme: {
extend: {},
},
plugins: [],
}
global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: [
["babel-preset-expo", { jsxImportSource: "nativewind" }],
"nativewind/babel",
],
};
};
app.json
{
"expo": {
"name": "test-123",
"slug": "test-123",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"scheme": "myapp",
"userInterfaceStyle": "automatic",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/images/adaptive-icon.png",
"backgroundColor": "#ffffff"
}
},
"web": {
"bundler": "metro",
"output": "static",
"favicon": "./assets/images/favicon.png"
},
"plugins": [
"expo-router"
],
"experiments": {
"typedRoutes": true
},
"extra": {
"router": {
"origin": false
},
"eas": {
"projectId": ""
}
},
"owner": "*"
}
}