nativewind icon indicating copy to clipboard operation
nativewind copied to clipboard

entry.js dies with fresh start create-expo-app@latest & nativewind@^4.0.1

Open LBeckX opened this issue 1 year ago • 0 comments

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

  1. Quick Start Expo: npx create-expo-app@latest
  2. Use this instructions: https://www.nativewind.dev/v4/getting-started/expo-router
  3. Start the project with npx expo --clear
  4. Wait for the menu
  5. Press "w" to start the browser
  6. See how it dies

image

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": "*"
  }
}

LBeckX avatar Oct 16 '24 18:10 LBeckX